Magnetic Button

spring x magnetic

A pill button that leans toward the cursor with a tactile press. The default CTA.

pointerspringcta

Code

magnetic-button.tsx

"use client";
import { useRef, useState } from "react";

export function MagneticButton({ children }: { children: React.ReactNode }) {
  const ref = useRef<HTMLButtonElement>(null);
  const [p, setP] = useState({ x: 0, y: 0 });
  return (
    <button
      ref={ref}
      onMouseMove={(e) => {
        const r = ref.current!.getBoundingClientRect();
        setP({ x: (e.clientX - (r.left + r.width / 2)) * 0.3, y: (e.clientY - (r.top + r.height / 2)) * 0.3 });
      }}
      onMouseLeave={() => setP({ x: 0, y: 0 })}
      style={{ transform: "translate(" + p.x + "px," + p.y + "px)" }}
      className="rounded-full bg-brand px-6 py-3 text-brand-foreground transition-transform duration-200 active:scale-95"
    >
      {children}
    </button>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Magnetic Button component and wire it to my accent.”