Browse components
Magnet Lines
A field of short lines that swing to point at the cursor like iron filings, glowing and stretching as it nears.
Magnet Lines
Installation
npx shadcn@latest add @glint-ui/magnet-linesFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/magnet-lines.json
Usage
import { MagnetLines } from "@/components/ui/magnet-lines";
<div className="relative h-96">
<MagnetLines gap={30} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| gap | number | 30 | Px between line centers. |
| lineLength | number | 16 | Line length in px. |
| lineWidth | number | 2 | Line thickness in px. |
| color | string | "#3f3f46" | Idle line color. |
| activeColor | string | "#c6ff3d" | Color near the cursor. |
| radius | number | 220 | Px radius that lights up. |
| className | string | — | Extra classes for the root element. |