Magnet Lines
Free
A grid of short lines that all turn to face the pointer, and sway in a slow wave when it is away.
Feel the pull
Customize
9
14
22px
#ff784f
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/magnet-lines.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/magnet-lines.tsx.
Usage
import { MagnetLines } from "@/components/ui/magnet-lines";
<section className="relative h-[600px] bg-ink-950">
<MagnetLines rows={9} columns={14} lineHeight={22} />
</section>Props
6 properties| Property | Type | Default | Description |
|---|---|---|---|
| rows | number | 9 | Number of rows in the grid. |
| columns | number | 14 | Number of columns in the grid. |
| color | string | "#ff784f" | Line color as a hex value. |
| lineWidth | number | 2 | Line thickness in pixels. |
| lineHeight | number | 22 | Line length in pixels. |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion