We are live on DevHunt: tool of the week contest

check it out

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

PropTypeDefault
variant
"arrows""lines""crosses"
arrows
gridSizenumber35