Magnet Lines
A grid of short lines that turn to point at the cursor like compass needles.
import { MagnetLines } from "pleate/effects/magnet-lines";Behind a headline
Point the way
Props
- spacing
Distance between lines in px.
numberdefault 34- length
Line length in px.
numberdefault 16- thickness
Line width in px.
numberdefault 2- colors
CSS colors or tokens: lines near and far from the target. Defaults follow the palette.
string[]- speed
Playback speed.
numberdefault 1- scale
Pattern size; above 1 is bigger.
numberdefault 1- interactive
React to the pointer over the parent.
booleandefault true
Accessibility
- Decorative: the canvas is aria-hidden and ignores pointer events, so content on top stays usable.
- Pauses off screen and in hidden tabs; with reduced motion it shows a still frame.
- Fills its parent: give the parent position relative and the background absolute inset-0.