Flairtilt-3d

3D tilt

Card tilts in 3D toward the cursor — depth on hover.

hover me

tap / hover to play

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

const x = useMotionValue(0);
const y = useMotionValue(0);
const rotateX = useSpring(useTransform(y, [-0.5, 0.5], [12, -12]), { stiffness: 250, damping: 20 });
const rotateY = useSpring(useTransform(x, [-0.5, 0.5], [-12, 12]), { stiffness: 250, damping: 20 });

<motion.div
  onPointerMove={(e) => {
    const r = e.currentTarget.getBoundingClientRect();
    x.set((e.clientX - r.left) / r.width - 0.5);
    y.set((e.clientY - r.top) / r.height - 0.5);
  }}
  onPointerLeave={() => { x.set(0); y.set(0); }}
  style={{ rotateX, rotateY, transformPerspective: 800 }}
/>