Depth Card

npm install motion

"use client";

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

type DepthCardProps = {
  /** Usually a stack of <DepthLayer>s. */
  children?: ReactNode;
  /** Maximum rotation in degrees. */
  maxTilt?: number;
  /** Show a light reflection that follows the pointer. */
  glare?: boolean;
  className?: string;
};

type DepthLayerProps = {
  children?: ReactNode;
  /** How far the layer floats above the card, in pixels. Higher layers move more as the card tilts. */
  depth?: number;
  className?: string;
};

/**
 * One layer of a DepthCard. Layers sit at different heights in real 3D space,
 * so the tilt moves each one at its own speed.
 */
export function DepthLayer({ children, depth = 30, className = "" }: DepthLayerProps) {
  return (
    <div style={{ transform: `translateZ(${depth}px)`, transformStyle: "preserve-3d" }} className={className}>
      {children}
    </div>
  );
}

export function DepthCard({ children, maxTilt = 12, glare = true, className = "" }: DepthCardProps) {
  const reduceMotion = useReducedMotion();
  // pointer position across the card, 0–1 on each axis
  const px = useMotionValue(0.5);
  const py = useMotionValue(0.5);
  const spring = { stiffness: 160, damping: 18 };
  const rotateX = useSpring(useTransform(py, [0, 1], [maxTilt, -maxTilt]), spring);
  const rotateY = useSpring(useTransform(px, [0, 1], [-maxTilt, maxTilt]), spring);
  const glareX = useTransform(px, (v) => v * 100);
  const glareY = useTransform(py, (v) => v * 100);
  const glareBackground = useMotionTemplate`radial-gradient(circle at ${glareX}% ${glareY}%, rgb(255 255 255 / 0.16), transparent 55%)`;

  function handleMove(event: PointerEvent<HTMLDivElement>) {
    if (reduceMotion) return;
    const rect = event.currentTarget.getBoundingClientRect();
    px.set((event.clientX - rect.left) / rect.width);
    py.set((event.clientY - rect.top) / rect.height);
  }

  function handleLeave() {
    px.set(0.5);
    py.set(0.5);
  }

  return (
    <div style={{ perspective: 1000 }} className={className}>
      {/* no overflow-hidden here: clipping would flatten the 3D layers back onto the card */}
      <motion.div
        onPointerMove={handleMove}
        onPointerLeave={handleLeave}
        style={{ rotateX, rotateY, transformStyle: "preserve-3d" }}
        className="group relative h-full rounded-2xl border border-white/10 bg-gradient-to-br from-[#1D2727] to-[#0C1010] shadow-2xl shadow-black/50"
      >
        {children}
        {glare && (
          <motion.div
            aria-hidden
            style={{ background: glareBackground, transform: "translateZ(1px)" }}
            className="pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-300 group-hover:opacity-100"
          />
        )}
      </motion.div>
    </div>
  );
}