Magnetic Button

"use client";

import { useRef } from "react";

export function MagneticButton() {
  const ref = useRef<HTMLButtonElement>(null);

  return (
    <button
      type="button"
      ref={ref}
      onPointerMove={(e) => {
        const el = ref.current;
        if (!el) return;
        const r = el.getBoundingClientRect();
        const dx = (e.clientX - (r.left + r.width / 2)) / r.width;
        const dy = (e.clientY - (r.top + r.height / 2)) / r.height;
        el.style.transform =
          "translate(" + (dx * 8).toFixed(1) + "px, " + (dy * 8).toFixed(1) + "px)";
      }}
      onPointerLeave={() => {
        if (ref.current) ref.current.style.transform = "";
      }}
      className="rounded-lg bg-amber-500 px-6 py-3 text-sm font-semibold text-neutral-950 transition-transform duration-200 ease-out hover:bg-amber-400"
    >
      Hover me
    </button>
  );
}