An interactive button that follows the cursor with a magnetic pull effect — built with React and Motion for buttery smooth spring physics.

DEPENDENCIES
react
INTERACTION TYPE
Hover the button to see the magnetic effect
Watch the spring physics on mouse leave
Try moving your cursor slowly vs quickly
HOW TO USE
import MagneticButton from "@/components/ui/magnetic-button";

export default function MyPage() {
  return (
    <MagneticButton
      ariaLabel="Click me"
      className="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium text-foreground bg-background border border-border rounded-lg hover:bg-muted transition-all shadow-sm"
    >
      Hover me
    </MagneticButton>
  );
}