A field of short strokes that turn to face the pointer like iron filings around a magnet. Without a pointer they follow a slow swirl.
npx shadcn@latest add https://hyperblur.dev/r/bg-magnet-lines.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-magnet-lines.tsx.
import { BgMagnetLines } from "@/components/hyperblur/bg-magnet-lines"
<div className="relative h-96"><BgMagnetLines /><h1 className="relative">...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| spacing | number | 26 | Distance between strokes in pixels. |
| length | number | 12 | Base stroke length in pixels. Strokes near the pointer grow a little. |
| thickness | number | 2 | Stroke width in pixels. |
| color | string | "rgba(255,255,255,0.2)" | Stroke color away from the pointer. |
| accent | string | "#2f7bff" | Color strokes take on near the pointer. |
| radius | number | 200 | Distance in pixels within which strokes light up. |
| swirl | number | 1 | Strength of the idle swirl when no pointer is present. 0 disables it. |
| speed | number | 1 | Speed of the idle motion. |