Magnet Lines

An interactive grid of lines responds to cursor movement, creating a magnetic field effect. Each line smoothly rotates to follow the cursor position, resulting in a dynamic and engaging visual pattern. Features: • Interactive cursor tracking • Smooth line rotations • Customizable grid dimensions • Flexible sizing options • Performance optimization • Responsive design • Custom styling support • Dynamic angle calculations • Hardware-accelerated animations • Configurable initial state

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Magnet Lines to your project and fits it to your theme.

import { MagnetLines } from "@/components/ui/magnet-lines"

function MagnetLinesDemo() {
  return (
    <MagnetLines
      rows={9}
      columns={9}
      containerSize="60vmin"
      lineColor="tomato"
      lineWidth="0.8vmin"
      lineHeight="5vmin"
      baseAngle={0}
      style={{ margin: "2rem auto" }}
    />
  )
}

export { MagnetLinesDemo };