Skip to main content
The Metaballs shader creates up to 20 colored gooey balls that move around and merge into smooth organic shapes. Perfect for creating liquid effects, blob animations, and organic motion graphics with up to 8 different colors.

​
Usage

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

function App() {
  return (
    <Metaballs
      colorBack="#000000"
      colors={['#6e33cc', '#ff5500', '#ffc105', '#ffc800', '#f585ff']}
      count={10}
      size={0.83}
      speed={1}
    />
  );
}

​
Parameters

​
colorBack
string
default:"'#000000'"
Background color in hex format. Visible outside the metaballs.
​
colors
string[]
Array of base colors for the balls in hex format. Supports up to 8 colors. Colors are assigned cyclically to the balls.
​
count
number
default:"10"
Number of balls (1 to 20). More balls create denser, more complex blob patterns.
​
size
number
default:"0.83"
Size of the balls (0 to 1). Larger values create bigger balls that merge more easily.
​
speed
number
default:"1"
Animation speed multiplier. Controls how fast the balls move and merge.

​
Common Sizing Parameters

​
fit
'none' | 'contain' | 'cover'
default:"'cover'"
How to fit the shader into the canvas dimensions.
​
scale
number
default:"1"
Overall zoom level (0.01 to 4).
​
rotation
number
default:"0"
Rotation angle in degrees (0 to 360).
​
offsetX
number
default:"0"
Horizontal offset (-1 to 1).
​
offsetY
number
default:"0"
Vertical offset (-1 to 1).

​
Presets

​
Default

<Metaballs
  colorBack="#000000"
  colors={['#6e33cc', '#ff5500', '#ffc105', '#ffc800', '#f585ff']}
  count={10}
  size={0.83}
  speed={1}
/>

​
Ink Drops

<Metaballs
  colorBack="#ffffff00"
  colors={['#000000']}
  count={18}
  size={0.1}
  speed={2}
/>

​
Solar

<Metaballs
  colorBack="#102f84"
  colors={['#ffc800', '#ff5500', '#ffc105']}
  count={7}
  size={0.75}
  speed={1}
/>

​
Background

<Metaballs
  colorBack="#2a273f"
  colors={['#ae00ff', '#00ff95', '#ffc105']}
  count={13}
  size={0.81}
  scale={4.0}
  offsetX={-0.3}
  speed={0.5}
/>

​
Technical Details

  • Max Balls: 20
  • Max Colors: 8
  • Algorithm: Inverse distance field blending
  • Motion: Noise-based procedural movement
  • Blending: Smooth merging using power curves
  • Anti-aliasing: Uses fwidth for smooth edges
  • Texture: Requires noise texture for movement randomization
  • Coordinates: Uses object UV coordinates
The shader creates metaballs by:
  1. Positioning each ball using noise-based procedural motion
  2. Computing inverse distance fields for each ball
  3. Accumulating color contributions weighted by field strength
  4. Applying power curves to create the characteristic gooey merging effect
  5. Smoothing edges with anti-aliasing
Fractional ball counts are supported - the last ball will have reduced size/opacity based on the fractional part.