3D Tilt Card

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

export function TiltCard({ children }) {
  const x = useMotionValue(0); const y = useMotionValue(0);
  const rx = useTransform(y, [-60, 60], [12, -12]);
  const ry = useTransform(x, [-60, 60], [-12, 12]);
  return (
    <motion.div
      style={{ rotateX: rx, rotateY: ry, transformPerspective: 700 }}
      onMouseMove={(e) => { const r = e.currentTarget.getBoundingClientRect(); x.set(e.clientX - r.left - r.width/2); y.set(e.clientY - r.top - r.height/2); }}
      onMouseLeave={() => { x.set(0); y.set(0); }}
      className="rounded-2xl border border-white/10 bg-gradient-to-br from-[#1a2236] to-[#0a0e1a] p-6 text-white"
    >{children}</motion.div>
  );
}