3D Card

1"use client";2
3import React, { useCallback, useEffect, useRef, useState } from "react";4import { cn } from "@/lib/utils";5
6export type ThreeDTiltCardProps = {7  children: React.ReactNode;8  className?: string;9  /** 0–1 factor for max tilt. `0.4` ≈ 10° (intensity × 25). */10  intensity?: number;11  /** Kept for API compat; glare covers the old parallax role. */12  depth?: number;13  border?: boolean;14};15
16function useFinePointer() {17  const [fine, setFine] = useState(false);18  useEffect(() => {19    const mq = window.matchMedia("(hover: hover) and (pointer: fine)");20    const sync = () => setFine(mq.matches);21    sync();22    mq.addEventListener("change", sync);23    return () => mq.removeEventListener("change", sync);24  }, []);25  return fine;26}27
28function usePrefersReducedMotion() {29  const [reduce, setReduce] = useState(false);30  useEffect(() => {31    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");32    const sync = () => setReduce(mq.matches);33    sync();34    mq.addEventListener("change", sync);35    return () => mq.removeEventListener("change", sync);36  }, []);37  return reduce;38}39
40export function ThreeDTiltCard({41  children,42  className,43  intensity = 0.4,44  depth: _depth = 60,45  border = true,46}: ThreeDTiltCardProps) {47  void _depth;48  const reduce = usePrefersReducedMotion();49  const finePointer = useFinePointer();50  const tiltRef = useRef<HTMLDivElement>(null);51  const cardRef = useRef<HTMLDivElement>(null);52  const active = !reduce && finePointer;53  const maxTilt = intensity * 25;54
55  const reset = useCallback(() => {56    const tilt = tiltRef.current;57    const card = cardRef.current;58    if (!tilt || !card) return;59    tilt.classList.remove("is-hover");60    card.classList.remove("is-tilting");61    card.style.setProperty("--tilt-rx", "0deg");62    card.style.setProperty("--tilt-ry", "0deg");63  }, []);64
65  const track = useCallback(66    (e: React.PointerEvent<HTMLDivElement>) => {67      if (!active) return;68      const tilt = tiltRef.current;69      const card = cardRef.current;70      if (!tilt || !card) return;71      const r = tilt.getBoundingClientRect();72      if (r.width === 0 || r.height === 0) return;73      const px = Math.min(1, Math.max(0, (e.clientX - r.left) / r.width));74      const py = Math.min(1, Math.max(0, (e.clientY - r.top) / r.height));75      tilt.classList.add("is-hover");76      card.classList.add("is-tilting");77      card.style.setProperty(78        "--tilt-ry",79        ((px - 0.5) * maxTilt).toFixed(2) + "deg",80      );81      card.style.setProperty(82        "--tilt-rx",83        ((0.5 - py) * maxTilt).toFixed(2) + "deg",84      );85      card.style.setProperty("--tilt-gx", (px * 100).toFixed(1) + "%");86      card.style.setProperty("--tilt-gy", (py * 100).toFixed(1) + "%");87    },88    [active, maxTilt],89  );90
91  const onPointerDown = useCallback(92    (e: React.PointerEvent<HTMLDivElement>) => {93      if (!active) return;94      // Touch / pen: capture so drag keeps targeting even past the edge.95      if (e.pointerType !== "mouse") {96        try {97          e.currentTarget.setPointerCapture(e.pointerId);98        } catch {99          /* ignore */100        }101      }102    },103    [active],104  );105
106  const onPointerLeave = useCallback(107    (e: React.PointerEvent<HTMLDivElement>) => {108      if (e.pointerType === "mouse") reset();109    },110    [reset],111  );112
113  useEffect(() => {114    if (!active) reset();115  }, [active, reset]);116
117  return (118    <div119      ref={tiltRef}120      className={cn("t-tilt relative", className)}121      onPointerDown={active ? onPointerDown : undefined}122      onPointerMove={active ? track : undefined}123      onPointerUp={active ? reset : undefined}124      onPointerCancel={active ? reset : undefined}125      onPointerLeave={active ? onPointerLeave : undefined}126    >127      <div128        ref={cardRef}129        className={cn(130          "t-tilt-card relative h-full w-full rounded-md bg-background",131          border && "border border-border",132        )}133      >134        <div className="relative z-10 h-full w-full">{children}</div>135        <div className="t-tilt-glare" aria-hidden />136      </div>137    </div>138  );139}