3D-Tilt-Karte

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

interface TiltCardProps {
  intensity?: number;
  glow?: string;
  radius?: number;
}

export default function TiltCard({
  intensity = 1,
  glow = "#0071e3",
  radius = 16,
}: TiltCardProps) {
  const ref = useRef<HTMLDivElement>(null);
  const mx = useMotionValue(0);
  const my = useMotionValue(0);
  const rx = useSpring(
    useTransform(my, [-0.5, 0.5], [12 * intensity, -12 * intensity]),
    { stiffness: 220, damping: 20 },
  );
  const ry = useSpring(
    useTransform(mx, [-0.5, 0.5], [-12 * intensity, 12 * intensity]),
    { stiffness: 220, damping: 20 },
  );

  return (
    <div style={{ perspective: 900 }}>
      <motion.div
        ref={ref}
        style={{
          rotateX: rx,
          rotateY: ry,
          borderRadius: radius,
          boxShadow: `0 20px 60px -20px ${glow}66`,
        }}
        className="w-64 border border-black/10 bg-white p-6 text-[#1d1d1f] dark:border-white/10 dark:bg-[#1c1c1e] dark:text-[#f5f5f7]"
        onMouseMove={(e) => {
          const el = ref.current;
          if (!el) return;
          const r = el.getBoundingClientRect();
          mx.set((e.clientX - r.left) / r.width - 0.5);
          my.set((e.clientY - r.top) / r.height - 0.5);
        }}
        onMouseLeave={() => {
          mx.set(0);
          my.set(0);
        }}
      >
        <div className="mb-4 h-10 w-10 rounded-full" style={{ backgroundColor: glow }} />
        <h3 className="text-base font-semibold">Tilt 3D</h3>
        <p className="mt-1.5 text-sm text-[#86868b]">
          Bewege den Cursor über die Karte, um sie im Raum zu neigen.
        </p>
      </motion.div>
    </div>
  );
}