ns-ui
Card grid on a magnetized hairline lattice — the cursor bends the grid lines and the DOM cards sample the same displacement field, riding the bent sheet.
Use when a fixed card grid that should feel ambiently cursor-reactive, the hairline lattice bending under the pointer while the real DOM cards sample the same displacement field and ride the bent sheet; pick grid-bento-dense instead when which tile is largest should actually change rather than the layout staying fixed, or background-gradient-shader when the ambient motion belongs to the page behind rather than to the grid itself.
Install
npx shadcn add https://design.helpmarq.comns-ui / grid-magnetic-lattice
Hairline lattice and card grid share one displacement field. Move the cursor — the sheet bends toward it, and the cards ride the bent lattice instead of floating over it. Flick fast and watch the sheet relax behind you.
| Prop | Type | Default | Description |
|---|---|---|---|
| labels? | string[] | DEFAULT_LABELS | mono label per card (3x2 grid by default) |
| cell? | number | 32 | lattice cell size in px |
| sampleStep? | number | 8 | sampling interval along each line in px |
| sigma? | number | 140 | gaussian falloff radius of the field in px |
| peakBend? | number | 22 | maximum line bend in px (peaks at r = sigma) |
| cursorLerp? | number | 0.14 | smoothed-cursor lerp per frame — flicks lag, the sheet relaxes behind them |
| className? | string | "min-h-[520px]" | — |
| aria-label? | string | "Card grid on a cursor-warped lattice" | — |