Tilt

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useEffect, useRef } from "react";4 5/**6 * Tilts its children toward the pointer, with a glare that tracks the light.7 *8 * The perspective lives on the WRAPPER, not on the tilting element. Putting it9 * on the element itself makes the vanishing point follow the card as it moves,10 * so the projection is wrong everywhere except dead centre — the usual reason11 * a tilt effect looks subtly like a sticker instead of like an object.12 *13 * The glare is a gradient whose angle is derived from the same pointer vector14 * as the rotation, so light and geometry agree. A glare animated separately15 * reads as a shine sliding over a flat surface.16 *17 * Skipped entirely on coarse pointers: without hover there is nothing to tilt18 * toward, and a touch-drag belongs to the page's scroll.19 */20 21export interface TiltProps {22  children: React.ReactNode;23  /** Maximum rotation in degrees at the corners. */24  max?: number;25  /** 0–1. Lower is heavier and lags further behind the pointer. */26  ease?: number;27  /** Glare opacity. 0 removes it. */28  glare?: number;29  /** Lift toward the viewer while hovered, in pixels. */30  lift?: number;31  still?: boolean;32  className?: string;33}34 35export function Tilt({36  children,37  max = 12,38  ease = 0.12,39  glare = 0.35,40  lift = 10,41  still = false,42  className = "",43}: TiltProps) {44  const hostRef = useRef<HTMLDivElement>(null);45  const cardRef = useRef<HTMLDivElement>(null);46  const glareRef = useRef<HTMLDivElement>(null);47 48  useEffect(() => {49    const host = hostRef.current;50    const card = cardRef.current;51    const sheen = glareRef.current;52    if (!host || !card) return;53 54    const reduced =55      still ||56      (typeof matchMedia === "function" &&57        matchMedia("(prefers-reduced-motion: reduce)").matches);58    const coarse =59      typeof matchMedia === "function" && matchMedia("(pointer: coarse)").matches;60    if (reduced || coarse) return;61 62    // Target and current are separate so the card eases rather than snapping63    // to each pointer sample.64    let targetX = 0;65    let targetY = 0;66    let targetZ = 0;67    let x = 0;68    let y = 0;69    let z = 0;70    let frame = 0;71    let running = false;72 73    const tick = () => {74      x += (targetX - x) * ease;75      y += (targetY - y) * ease;76      z += (targetZ - z) * ease;77 78      card.style.transform = `rotateX(${y.toFixed(2)}deg) rotateY(${x.toFixed(2)}deg) translateZ(${z.toFixed(2)}px)`;79 80      if (sheen) {81        // Same vector as the rotation, so the highlight and the geometry82        // describe one object rather than two effects.83        const angle = Math.atan2(y, x) * (180 / Math.PI) + 90;84        const strength = Math.min(1, Math.hypot(x, y) / max) * glare;85        sheen.style.background = `linear-gradient(${angle}deg, rgba(255,255,255,${strength.toFixed(3)}) 0%, rgba(255,255,255,0) 60%)`;86      }87 88      // Stop once settled instead of idling forever at sub-pixel deltas.89      if (90        Math.abs(targetX - x) < 0.01 &&91        Math.abs(targetY - y) < 0.01 &&92        Math.abs(targetZ - z) < 0.0193      ) {94        running = false;95        return;96      }97      frame = requestAnimationFrame(tick);98    };99 100    const start = () => {101      if (running) return;102      running = true;103      frame = requestAnimationFrame(tick);104    };105 106    const onMove = (event: PointerEvent) => {107      const box = host.getBoundingClientRect();108      const px = (event.clientX - box.left) / box.width - 0.5;109      const py = (event.clientY - box.top) / box.height - 0.5;110      targetX = px * max * 2;111      // Inverted: pointer below centre should tip the TOP toward the viewer.112      targetY = -py * max * 2;113      targetZ = lift;114      start();115    };116 117    const onLeave = () => {118      targetX = 0;119      targetY = 0;120      targetZ = 0;121      start();122    };123 124    host.addEventListener("pointermove", onMove);125    host.addEventListener("pointerleave", onLeave);126 127    return () => {128      host.removeEventListener("pointermove", onMove);129      host.removeEventListener("pointerleave", onLeave);130      cancelAnimationFrame(frame);131      card.style.transform = "";132    };133  }, [max, ease, glare, lift, still]);134 135  return (136    <div137      ref={hostRef}138      className={className}139      // Perspective on the wrapper: on the card itself the vanishing point140      // would travel with it and the projection would be wrong off-centre.141      style={{ perspective: 900 }}142    >143      <div ref={cardRef} className="relative will-change-transform">144        {children}145        {glare > 0 ? (146          <div147            ref={glareRef}148            aria-hidden149            className="pointer-events-none absolute inset-0 rounded-[inherit]"150          />151        ) : null}152      </div>153    </div>154  );155}156