A gooey blob follows the pointer while smaller blobs orbit it, stretch away and melt back in through an SVG goo filter.
Voice memo
Morning standup
00:42
npx shadcn@latest add https://hyperblur.dev/r/cursor-metaballs.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cursor-metaballs.tsx.
import { CursorMetaballs } from "@/components/hyperblur/cursor-metaballs"
<CursorMetaballs className="h-72" color="#ff3d81" color2="#ffb02e" />| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#2f7bff" | Gradient start color. |
| color2 | string | "#7fb3ff" | Gradient end color. |
| size | number | 34 | Radius of the main blob in pixels. Satellites scale with it. |
| count | number | 5 | Number of orbiting blobs, up to 12. |
| goo | number | 10 | Blur radius of the goo filter. Higher values merge blobs from further away. |
| idle | boolean | true | Play a slow scripted path while the pointer is away. The effect hands over to the real pointer when it enters and eases back when it leaves. |
| children | ReactNode | Content rendered inside the stage. The stage fills its parent, so give the parent a height. |