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

PropTypeDefault
rowsNumber of rows in the grid.
number9
columnsNumber of columns in the grid.
number9
containerSizeSize of the square container.
string"80vmin"
lineColorColor of the lines.
string"#efefef"
lineWidthWidth (thickness) of each line.
string"1vmin"
lineHeightHeight (length) of each line.
string"6vmin"
baseAngleBase rotation angle for the lines.
number0

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

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

Have any questions?
Contact on@harshjdhv
import { MagnetLines } from "@/components/ui/magnet-lines"

<MagnetLines 
  rows={9}
  columns={9}
  containerSize="60vmin"
  lineColor="currentColor"
  lineWidth="0.8vmin"
  lineHeight="5vmin"
  baseAngle={0}
/>