A field of tiny needles turns to face the pointer like compasses, growing and lighting up the closer they are.
Wind field · North Sea
14 kn NWgusts 22 kn
npx shadcn@latest add https://hyperblur.dev/r/cursor-glare-grid.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cursor-glare-grid.tsx.
import { CursorGlareGrid } from "@/components/hyperblur/cursor-glare-grid"
<CursorGlareGrid className="h-72" accent="#7fb3ff" />| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#4a4a4a" | Needle color far from the pointer. |
| accent | string | "#2f7bff" | Needle color near the pointer. |
| spacing | number | 18 | Distance between needles in pixels. |
| size | number | 7 | Base needle length in pixels. |
| radius | number | 150 | Falloff distance in pixels for size and color. |
| 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. |