Liquid Metaballs
Gooey blobs that drift, collide, and merge under an SVG goo filter — with a cursor blob.
Soft blobs of color drift across the surface and fuse into one gooey mass
wherever they meet, courtesy of an SVG goo filter. An extra blob follows the
cursor and merges with the rest. Playful and organic. Drop it as the first child
of a relative container.
Fluid by nature
Move your cursor to stir the goo.
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/liquid-metaballs.json"Usage
tsx
import { LiquidMetaballs } from "@/components/godui/liquid-metaballs";
<div className="relative overflow-hidden">
<LiquidMetaballs />
<YourContent />
</div>The layer is absolute inset-0 z-base; parent must be relative, content at
z-raised+. The goo filter id is per-instance, so multiple metaball backgrounds
coexist safely. Pauses off-screen and on hidden tabs; freezes under
prefers-reduced-motion.
Examples
Extra gooey
Raise gooeyness and blobCount.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
blobCount | number | 7 | Number of floating blobs. |
colors | string[] | indigo/violet/pink/cyan | Blob colors (cycled). |
speed | number | 1 | Drift speed multiplier. |
gooeyness | number | 16 | Goo strength (blur stdDeviation). |
interactive | boolean | true | A blob follows the cursor (adds a pointer listener). |
Also accepts standard div attributes (e.g. className, style).