Magnetic Button

import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
import { useRef } from "react";

export function MagneticButton({ label = "Hover me" }) {
  const ref = useRef(null);
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const transform = useMotionTemplate`translate(${x}px, ${y}px)`;

  const onMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    x.set((e.clientX - (r.left + r.width / 2)) * 0.4);
    y.set((e.clientY - (r.top + r.height / 2)) * 0.4);
  };
  const reset = () => { x.set(0); y.set(0); };

  return (
    <motion.button
      ref={ref}
      onMouseMove={onMove}
      onMouseLeave={reset}
      style={{ transform }}
      transition={{ type: "spring", stiffness: 200, damping: 12 }}
      className="rounded-full bg-accent px-7 py-3 font-medium text-black"
    >
      {label}
    </motion.button>
  );
}