Colorful blobs pour out along the pointer path, carry its velocity, swirl in a soft flow field and fade into streaks.
Splash Studio
Paint with motion
Move to mix color. Stop to let it settle.
Open canvas
npx shadcn@latest add https://hyperblur.dev/r/cursor-fluid-splash.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cursor-fluid-splash.tsx.
import { CursorFluidSplash } from "@/components/hyperblur/cursor-fluid-splash"
<CursorFluidSplash className="h-80"><h1>Paint with motion</h1></CursorFluidSplash>| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#2f7bff", "#ff3d81", "#ffb02e", "#22d3a6", "#8b5cf6"] | Palette the splashes cycle through. |
| size | number | 26 | Base blob radius in pixels. |
| intensity | number | 1 | How many blobs are emitted per pixel of movement. |
| trail | number | 0.85 | How long streaks linger, from 0 to 1. |
| 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. |