znverse

← Magnetic Button

Magnetic Button

A button that gently follows the pointer for a magnetic feel.

Usage

Copy src/MagneticButton.tsx into your React project. No extra dependencies.

tsx
import { MagneticButton } from "./MagneticButton";

export function Example() {
  return <MagneticButton>Get started</MagneticButton>;
}

Notes

  • Client component ("use client")
  • Uses pointer move within a small radius around the button
  • Respects prefers-reduced-motion