A canvas field of iron-filing needles that swing into the field lines of a dipole magnet. A hidden magnet drifts on its own until the pointer takes over.
npx shadcn@latest add https://hyperblur.dev/r/cursor-magnetic-filings.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cursor-magnetic-filings.tsx.
import { CursorMagneticFilings } from "@/components/hyperblur/cursor-magnetic-filings"
<div style={{ height: 320 }}><CursorMagneticFilings color="#7fb3ff" strength={1.1} /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#7fb3ff" | Color of needles that are fully aligned to the field. Hex only. |
| baseColor | string | "#3b4150" | Color of resting needles far from the magnet. Hex only. |
| spacing | number | 13 | Distance between needles in pixels. Raised automatically on large areas to cap the count. |
| length | number | 9 | Needle length in pixels. |
| thickness | number | 1.3 | Needle stroke width in pixels. |
| strength | number | 1 | Scales how far the magnetic field reaches. |
| idle | boolean | true | Let a hidden magnet orbit when the pointer is away. When false the needles rest until you move over them. |
| children | ReactNode | Content drawn above the canvas. It ignores pointer events except on interactive children. |