Magnetic Surface
A grid of elements that rotate to face the mouse with vector mapping.
Preview
Interactive Preview
Magnetic Field.
Vector alignment simulation active.
Magnetic Field.
Vector alignment simulation active.
Magnetic Field.
Vector alignment simulation active.
Installation
Usage
tsx
import { MagneticSurface } from "@/components/block/magnetic-surface"
export default function Demo() {
return (
<div className="space-y-8">
<MagneticSurface variant="arrows" />
<MagneticSurface variant="lines" gridSize={40} />
</div>
)
}Dependencies
framer-motion
Props
| Prop | Type | Default |
|---|---|---|
| variant | "arrows""lines""crosses" | arrows |
| gridSize | number | 35 |