MagneticCard

"use client";

import type { ReactNode } from "react";
import { motion, useMotionValue, useReducedMotion, useSpring } from "motion/react";

type MagneticCardProps = {
  children: ReactNode;
  className?: string;
  /** How far the card follows the pointer, 0 to 1. */
  strength?: number;
  /** Extra pull on the content inside, so it feels like it floats in the card. */
  depth?: number;
};

const SPRING = { stiffness: 180, damping: 16, mass: 0.6 };

/* MagneticCard: the card leans toward the pointer like a magnet and springs back when it leaves. */
export function MagneticCard({
  children,
  className = "rounded-2xl border border-white/10 bg-[#16132a] p-6 text-white",
  strength = 0.15,
  depth = 0.5,
}: MagneticCardProps) {
  const reduce = useReducedMotion();
  const dx = useMotionValue(0);
  const dy = useMotionValue(0);
  const x = useSpring(dx, SPRING);
  const y = useSpring(dy, SPRING);
  const ix = useSpring(0, SPRING);
  const iy = useSpring(0, SPRING);

  const onMove = (e: React.PointerEvent<HTMLDivElement>) => {
    if (reduce) return;
    const r = e.currentTarget.getBoundingClientRect();
    const ox = e.clientX - (r.left + r.width / 2);
    const oy = e.clientY - (r.top + r.height / 2);
    dx.set(ox * strength);
    dy.set(oy * strength);
    ix.set(ox * strength * depth);
    iy.set(oy * strength * depth);
  };

  const onLeave = () => {
    dx.set(0);
    dy.set(0);
    ix.set(0);
    iy.set(0);
  };

  return (
    <motion.div onPointerMove={onMove} onPointerLeave={onLeave} style={{ x, y }} className={className}>
      <motion.div style={{ x: ix, y: iy }}>{children}</motion.div>
    </motion.div>
  );
}