MagnetLines
magnet-linesRotates a field of line segments toward the pointer.
Usage
Basic usage
9×9 grid of line segments, with each line pointing towards the mouse in real time like a compass.
<MagnetLines containerSize="16rem" lineColor="var(--color-foreground)" />Fine mesh
Increase rows/columns and narrow the line width to obtain a finer magnetic line field.
<MagnetLines
rows={13}
columns={13}
containerSize="16rem"
lineWidth="0.4rem"
lineHeight="2rem"
lineColor="var(--color-chart-1)"
/>Sparse thick lines
Fewer rows and columns + thicker line segments, with brand colors to enhance visual decoration.
<MagnetLines
rows={6}
columns={6}
containerSize="16rem"
lineWidth="0.8rem"
lineHeight="3rem"
lineColor="var(--color-primary)"
/>Initial angle
baseAngle determines the rest angle of all line segments when the pointer does not move.
<MagnetLines
baseAngle={45}
containerSize="16rem"
lineColor="var(--color-chart-2)"
/>When to Use
Lay out a grid of thin line segments and turn each line segment to point to the mouse in real time, creating a magnetic field/compass-style minimalist interactive decoration. It is a lightweight solution of pure CSS transform (without WebGL). Compared with WebGL-heavy backgrounds such as GhostCursor / LaserFlow, it is lighter and more suitable for small graphic embellishments. The container is square and occupies 80vmin by default.
Import
import { MagnetLines } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| rows | number | 9 | Number of grid rows; rows × columns determines the total number of segments |
| columns | number | 9 | Number of grid columns |
| containerSize | string | "80vmin" | Container size (any CSS length), square, with segments spread equally across it |
| lineColor | string | var(--color-foreground) | Line segment color, light and dark theme; any CSS color string can be used |
| lineWidth | string | "1vmin" | Single line segment width (any CSS length) |
| lineHeight | string | "6vmin" | Single line segment height (any CSS length) |
| baseAngle | number | -10 | Initial rest angle (degrees); maintain this angle when the pointer does not move or reduces-motion |
| className | string | — | Additional class name for the root container |
| style | CSSProperties | — | Inline styles for the root container, merged after the computed grid styles |
Usage Guidelines
rows × columnsis the number of DOM line segment nodes (default 81). Too large a grid will drag down the rendering. Control the density as needed.- All line segments under reduced-motion are fixed at
baseAngleand no longer follow the mouse.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
<div className="relative flex h-72 items-center justify-center overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<MagnetLines
rows={9}
columns={9}
baseAngle={-10}
containerSize="16rem"
lineColor="var(--color-foreground)"
/>
</div>