animated metaballs using webgl
npm install react-webgl-metaballs
> animated metaballs using webgl
 
``bash`
npm install --save react-webgl-metaballs
`jsx
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 (
Props
txt
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={
}
OPTIONAL. Needs to a ReactElement! can be used to further contain the orbs so they dont interfere with your other content child
OPTIONAL. you can wrap your content inside Metaballs. type is any
``