"use client"; import { useRef } from "react"; import { motion, useMotionValue, useSpring, useTransform, } from "framer-motion"; import { cn } from "@/lib/utils"; export function TiltCard3D({ children, className, }: { children: React.ReactNode; className?: string; }) { const ref = useRef(null); const x = useMotionValue(0); const y = useMotionValue(0); const springConfig = { stiffness: 150, damping: 18, mass: 0.5 }; const rotateX = useSpring( useTransform(y, [-0.5, 0.5], [12, -12]), springConfig ); const rotateY = useSpring( useTransform(x, [-0.5, 0.5], [-12, 12]), springConfig ); function onMouseMove(e: React.MouseEvent) { const rect = ref.current?.getBoundingClientRect(); if (!rect) return; x.set((e.clientX - rect.left) / rect.width - 0.5); y.set((e.clientY - rect.top) / rect.height - 0.5); } function onMouseLeave() { x.set(0); y.set(0); } return (

{children}

); } export default function Demo() { return (

▲

Depth on demand

Every element inside this card sits at its own depth, so the whole thing tilts like it has real dimension.

); }

3D Tilt Card

Depth on demand