Docs·Magnet 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

Usage

API Reference

PropertyTypeDefault
rows

Number of rows in the grid.

number9
columns

Number of columns in the grid.

number9
containerSize

Size of the square container.

string"80vmin"
lineColor

Color of the lines.

string"#efefef"
lineWidth

Width (thickness) of each line.

string"1vmin"
lineHeight

Height (length) of each line.

string"6vmin"
baseAngle

Base rotation angle for the lines.

number0

View source

Click the icon in the preview panel to browse source for each variant.

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
import { MagnetLines } from "@/components/ui/magnet-lines"
<MagnetLines 
  rows={9}
  columns={9}
  containerSize="60vmin"
  lineColor="currentColor"
  lineWidth="0.8vmin"
  lineHeight="5vmin"
  baseAngle={0}
/>