Metaballs
A smoothly merging liquid blob (metaballs / ferrofluid) background.
A "blur + contrast" filter on a 2D canvas approximates a metaball field: as neighboring blobs come close, their edges naturally grow a merging bridge, flowing like mercury or ferrofluid. It can also follow the cursor.
Loading preview…
npx shadcn@latest add https://webberui.com/r/metaballs.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
7
0.12
1
16
<Metaballs />
Installation
npx shadcn@latest add https://webberui.com/r/metaballs.jsonOr, once registries are configured in components.json, install it as @webberui/metaballs.
Usage
The component fills its parent container, so put it inside a bounded box with an explicit height (and avoid viewport height units):
import { Metaballs } from "@/components/ui/metaballs";
<div className="relative h-[320px] w-full overflow-hidden rounded-xl">
<Metaballs interactive />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
count | number | 7 | Number of blobs |
colors | string[] | Magenta / purple / cyan | Blob palette, applied by cycling through the list |
background | string | "#0a0a12" | Background color, which is the baseline for the merge threshold |
size | number | 0.12 | Radius multiplier (relative to the container's short edge) |
speed | number | 1 | Drift speed multiplier |
blur | number | 16 | Blur radius (px), which stretches out the merging bridges |
contrast | number | 18 | Contrast strength, which determines edge sharpness |
interactive | boolean | true | One blob follows the cursor smoothly (mouse only) |
Accessibility
- When the user has "reduce motion" enabled at the system level, only a single static frame of the merged field is drawn — no animation and no interaction
- A purely decorative background: the container is marked
aria-hidden, so it does not interfere with assistive technology