Magnetic Cursor Attraction Button

import React, { useRef, useState } from 'react';
import { motion } from 'framer-motion';

export function MagneticButton({ children = "Explore Platform", pullFactor = 0.35 }) {
  const ref = useRef(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handlePointerMove = (e) => {
    const { clientX, clientY } = e;
    const { left, top, width, height } = ref.current.getBoundingClientRect();
    const centerX = left + width / 2;
    const centerY = top + height / 2;
    const distanceX = (clientX - centerX) * pullFactor;
    const distanceY = (clientY - centerY) * pullFactor;
    setPosition({ x: distanceX, y: distanceY });
  };

  const handlePointerLeave = () => {
    setPosition({ x: 0, y: 0 });
  };

  return (
    <motion.button
      ref={ref}
      onPointerMove={handlePointerMove}
      onPointerLeave={handlePointerLeave}
      animate={{ x: position.x, y: position.y }}
      transition={{ type: "spring", stiffness: 220, damping: 18, mass: 0.6 }}
      className="px-8 py-4 rounded-2xl bg-stone-900 border border-violet-500/30 text-white font-medium shadow-2xl hover:border-violet-500 transition-colors"
    >
      {children}
    </motion.button>
  );
}