KQ-046 · IRON/FILINGS
Iron Filings
A canvas lattice of dash filings that align to the cursor like iron around a magnetic pole — near the pointer they snap radial and brighten, far off they relax and dim.
KQ-046 · IRON/FILINGS
MAGNETIC FIELDKQ-046
Move the pointer — the filings align.
Radial alignment · dashes point along B toward the pole
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/iron-filings
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| spacing | number | 26 | Pixels between filings in the grid (clamped 16–48). |
| height | number | 320 | Stage height in px when used standalone. |
| children | ReactNode | — | Overlay content rendered above the field. |