Magnet Lines

Animated field lines bend toward the cursor.

Default

Move the pointer anywhere on the page and every line turns toward it. Rows, columns, base angle and color are wired to the controls underneath.

Rows10

Columns12

Base Angle-10

Line Color

Prop	Type	Default	Description
`rows`	`number`	`9`	Number of grid rows.
`columns`	`number`	`9`	Number of grid columns.
`containerSize`	`string`	`80vmin`	Specifies the width and height of the entire grid container.
`lineColor`	`string`	`#efefef`	Color for each line (the <span> elements).
`lineWidth`	`string`	`1vmin`	Specifies each line's thickness.
`lineHeight`	`string`	`6vmin`	Specifies each line's length.
`baseAngle`	`number`	`-10`	Initial rotation angle (in degrees) before pointer movement.

Keyboard shortcuts and ARIA behavior.

The lines are decorative spans with no content, so assistive technology skips them.
The effect tracks the pointer only. Nothing inside it takes focus.