DocsMagnet Lines

Magnet Lines

A grid of lines that rotate to face the cursor, creating a magnetic field effect. Perfect for interactive backgrounds and hero sections.

Installation

pnpm dlx shadcn@latest add @componentry/magnet-lines

Dependencies: clsx tailwind-merge

Usage

API Reference

PropTypeDefault
rowsnumber

Number of rows in the grid.

9
columnsnumber

Number of columns in the grid.

9
containerSizestring

Size of the square container.

"80vmin"
lineColorstring

Color of the lines.

"#efefef"
lineWidthstring

Width (thickness) of each line.

"1vmin"
lineHeightstring

Height (length) of each line.

"6vmin"
baseAnglenumber

Base rotation angle for the lines.

0

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
PreviousInfinite Image FieldNextMatrix Rain
import { MagnetLines } from "@/components/ui/magnet-lines"
 
<MagnetLines 
  rows={9}
  columns={9}
  containerSize="60vmin"
  lineColor="currentColor"
  lineWidth="0.8vmin"
  lineHeight="5vmin"
  baseAngle={0}
/>