A flock of small arrow points that steer toward the pointer, keep their distance from each other and circle it like starlings.
Starling murmuration
npx shadcn@latest add https://hyperblur.dev/r/cursor-swarm.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cursor-swarm.tsx.
import { CursorSwarm } from "@/components/hyperblur/cursor-swarm"
<CursorSwarm className="h-72" count={40} />| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 40 | Number of points in the swarm, up to 200. |
| color | string | "#7fb3ff" | Point color. |
| size | number | 2.4 | Point size in pixels. |
| speed | number | 1 | Speed multiplier for the whole swarm. |
| trail | number | 0.7 | Length of the motion streaks, from 0 for none to 1 for long. |
| 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. |