Components
A field of hundreds of tiny lines that orient toward your cursor like iron filings around a magnet. Each line blends between a gentle wind-wave idle animation and a magnetic pull toward the mouse — closer lines point more aggressively and glow brighter. When idle, a simulated cursor orbits slowly so the preview is always alive. Supports content overlay as children. Faded edges, configurable spacing, line color, force radius, wave speed. Zero external dependencies — pure canvas.
Loading preview...
import { Component as MagneticLines } from "@/components/ui/magnetic-lines";
export default function Demo() {
return (
<div className="flex min-h-screen items-center justify-center bg-background p-8">
<div className="w-full max-w-5xl">
<div className="text-center mb-12">
<h2 className="text-2xl font-bold tracking-tight text-foreground mb-2">
Magnetic Lines
</h2>
<p className="text-sm text-muted-foreground max-w-md mx-auto">
Hundreds of lines orient toward your cursor like iron filings around a magnet. Move your mouse to control the field.
</p>
</div>
{/* Standalone showcase */}
<div className="rounded-2xl border border-border overflow-hidden">
<MagneticLines className="w-full h-[500px]" />
</div>
{/* As a hero background with content */}
<div className="mt-8 rounded-2xl border border-border overflow-hidden">
<MagneticLines
className="w-full h-[360px]"
lineColor="rgba(160, 120, 255, ALPHA)"
mouseRadius={200}
spacing={24}
>
<div className="flex flex-col items-center justify-center h-[360px] px-8 text-center">
<span className="inline-flex items-center gap-2 rounded-full border border-border bg-card/60 backdrop-blur-sm px-4 py-1.5 text-xs text-muted-foreground mb-6">
<span className="size-1.5 rounded-full bg-violet-400 animate-pulse" />
Now in public beta
</span>
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4">
Feel the pull
</h1>
<p className="text-muted-foreground max-w-md text-sm leading-relaxed mb-8">
Every line in this field is alive — responding to your presence in real time. Use it as a background for any section.
</p>
<div className="flex gap-3">
<button className="rounded-full bg-primary px-6 py-2.5 text-sm font-semibold text-primary-foreground">
Get Started
</button>
<button className="rounded-full border border-border bg-card/60 backdrop-blur-sm px-6 py-2.5 text-sm font-semibold text-foreground">
Learn More
</button>
</div>
</div>
</MagneticLines>
</div>
</div>
</div>
);
}