React-webgl-metaballs NPM

react-webgl-metaballs

Metaballs example

animated metaballs using webgl

Install

npm install --save react-webgl-metaballs

Usage

import React from 'react'

import MetaBalls from 'react-webgl-metaballs'

class Example extends React.Component {
  /* Metaballs is going to fill its parentcontainer so use the parentcontainer to set its size */
  render () {
    return (
      <div>
        <MetaBalls/>
      </div>
    )
  }
}

Props

  orbData={[{},{},{}]}  
  OPTIONAL. Array of objects that can be used to cofigure the orbs or just use empty objects to configure the amount of orbs.
  If orbData is not set 2-10 random orbs will be created.

  Possible options to configure your orbs are:

  OrbConfig {
    size?: number;
    
    posX?: number;
    posY?: number;

    colorR?: number;
    colorG?: number;
    colorB?: number;

    moveX?: number;
    moveY?: number;
  }
  All fields are optional

  shiftColor={{min: x, max: y}}
  if set orbs will shift color after they collided with something

  deflectMovement={{min: x, max: y}}
  if set orbs will change their movement vector after colliding with something. both values need to be positive and should be rather low <10 for example 

  childContainerFlex={"row"}
  can be used to dynamically position your content next to innerContainer.
  If not set your content will fill the entire container.
  childContainerFlex?: "row" | "row-reverse" | "column" | "column-reverse";

  innerContainer={<div></div>} 
  OPTIONAL. Needs to a ReactElement! can be used to further contain the orbs so they dont interfere with your other content

  <MetaBalls>child</MetaBalls> 
  OPTIONAL. you can wrap your content inside Metaballs. type is any