Magnet Lines
Visual EffectsA grid of bars that rotate to point at the cursor like iron filings around a magnet. Pointer-driven, no rAF loop; holds base angle under reduced-motion.
Inspired by React Bits — Magnet Lines — independently built, not affiliated. Attribution policy
Installation
npx shadcn@latest add https://parable-three.vercel.app/r/magnet-lines.jsonRuns the shadcn CLI — the component source is copied intocomponents/parable/magnet-lines.tsx. You own it from there.
Usage
The exact code rendering the preview above.
<MagnetLines className="h-56 w-56" rows={9} columns={9} color="#8b5cf6" />Props
MagnetLinesProps extends React.HTMLAttributes<HTMLDivElement>
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | number | 9 | — |
| columns | number | 9 | — |
| lineWidth | string | "0.5vmin" | Line container size, any CSS length. |
| lineHeight | string | "4vmin" | — |
| color | string | "#8b5cf6" | — |
| baseAngle | number | -10 | Base (resting) rotation in degrees. |