Metaballs

Installation

npm i @paper-design/shaders-react

Code

import { Metaballs } from '@paper-design/shaders-react';

<Metaballs
  style={{ height: 500 }}
  colorBack="hsl(0, 0%, 7%)"
  count={10}
  size={0.83}
  offsetX={0}
  offsetY={0}
  scale={1}
  rotation={0}
  speed={1}
  colors={[
    "hsl(263, 60%, 50%)",
    "hsl(20, 100%, 50%)",
    "hsl(45, 100%, 51%)",
    "hsl(47, 100%, 50%)",
    "hsl(295, 100%, 76%)"
  ]}
/>

Props

colorBack

Background color.

colors

Colors used for the effect.

count

Number of balls on the canvas.

size

Base size of the balls.

offsetX, offsetY

Position of the center.

scale

Overall pattern zoom.

rotation

Overall pattern rotation angle.

speed

Animation speed.

Description

Circular shapes moving around the center, blending and merging based on distance.