Metaballs

Five points orbit on offset sine paths and sum into a single inverse-square field, thresholded into soft, merging blobs. Colours blend in OKLab, so the violet ramp stays clean, and the cursor gently swirls the field around it.

metaballsOKLabswirl cursor

Live· swirl

Installation

Add it to your project

$

pnpm dlx shadcn@latest add https://funshader.com/r/metaballs.json

Installs 5 files into components/shaders. The engine is shared, so a second shader only adds its own three files.

Usage

Mount it behind your content

app/hero.tsx

import { MetaballsShader } from "@/components/shaders/metaballs/metaballs-shader";

export function Hero() {
  return (
    <section className="relative isolate min-h-svh overflow-hidden">
      <MetaballsShader className="-z-10" />
      {/* your content */}
    </section>
  );
}

The shader fills its nearest positioned ancestor. Give the parent relative isolate and the shader -z-10 to put it behind everything else. The cursor is tracked on the window, so content on top doesn’t block it.

API reference

Props

Prop	Type	Default	Description
colors	ShaderColor[]	["#02010A", "#04052E", "#3D2C8D", "#916BBF"]	Palette, low → high. Hex strings or 0–1 RGB triplets, up to 8.
speed	number	0.84	Multiplier on elapsed seconds.
scale	number	1.82	Zoom. Higher values show more of the field.
intensity	number	0.54	Mass.
paramA	number	0.72	Edge.
warp	number	0.01	Amount of organic domain warp.
detail	number	3.14	Frequency of the warp noise.
contrast	number	0.91	Colour grade: contrast.
brightness	number	0	Colour grade: brightness offset.
saturation	number	1	Colour grade: saturation.
hue	number	0	Hue rotation in radians.
vignette	number	0.36	Edge darkening, 0–1.
blur	number	0.01	Soft 5-tap blur radius.
grain	number	0.07	Film grain amount.
seed	number	6975	Noise seed.
rotation	number	0.59	Field rotation in radians.
drift	number	0.06	Slow positional drift.
oklab	boolean	true	Blend palette colours in OKLab.
offset	[number, number]	[-0.1,0.18]	Pans the field.
cursor	Partial<ShaderCursor>	{"effect":"swirl","strength":0.2,"radius":0.46,"follow":"direct"}	Pointer effect: push, lens, swirl, ripple, glow or none.
paused	boolean	false	Freezes the current frame.
maxDpr	number	2	Cap on devicePixelRatio.
respectReducedMotion	boolean	true	Draws a still frame for prefers-reduced-motion.
className	string	—	Classes for the absolutely-positioned wrapper.

Keep exploring

More shaders

03

Mesh Gradient

Soft colour points drifting into one smooth gradient.

mesh gradientOKLabswirl cursor

01

Smoke

Electric smoke that ripples under your cursor.

fbm warpripplespring cursor