Tilt Card

"use client";

import * as React from "react";
import { motion, useMotionTemplate, useMotionValue, useSpring } from "motion/react";

/* SSR-safe: renders "no preference" on the server and the first client pass, so markup always hydrates. */
function subscribeReducedMotion(onChange: () => void) {
  const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
  mq.addEventListener("change", onChange);
  return () => mq.removeEventListener("change", onChange);
}

function usePrefersReducedMotion() {
  return React.useSyncExternalStore(
    subscribeReducedMotion,
    () => window.matchMedia("(prefers-reduced-motion: reduce)").matches,
    () => false,
  );
}
export interface TiltCardProps extends React.ComponentPropsWithoutRef<"div"> {
  /** Maximum rotation in degrees at the card's edges. */
  tiltStrength?: number;
  /** Show a light reflection that follows the pointer. */
  glare?: boolean;
  /** Peak opacity of the glare, 0–1. */
  glareOpacity?: number;
  /** Spring that smooths rotation, lift and glare. */
  spring?: { stiffness: number; damping: number; mass: number };
  /** Scale while hovered (1 = no lift). */
  scale?: number;
  /** CSS perspective distance in px — lower is more dramatic. */
  perspective?: number;
  /** Corner radius of the surface in px. */
  rounded?: number;
  /** Classes for the tilting surface (background, border, shadow). Replaces the default surface styling. */
  surfaceClassName?: string;
}

const DEFAULT_SURFACE =
  "border border-zinc-900/10 bg-white shadow-[0_1px_0_rgb(255_255_255/0.6)_inset,0_24px_48px_-24px_rgb(24_26_28/0.35)] dark:border-white/10 dark:bg-[#1b1f23] dark:shadow-[0_1px_0_rgb(255_255_255/0.05)_inset,0_24px_48px_-20px_rgb(0_0_0/0.7)]";

/**
 * A card that tilts toward the pointer in 3D with an optional glare.
 * Children can use `[transform:translateZ(32px)]` to float above the surface.
 * Touch input and reduced-motion preferences get a flat, static card.
 */
export function TiltCard({
  tiltStrength = 12,
  glare = true,
  glareOpacity = 0.35,
  spring = { stiffness: 220, damping: 22, mass: 0.6 },
  scale = 1.03,
  perspective = 900,
  rounded = 20,
  surfaceClassName = DEFAULT_SURFACE,
  className = "",
  style,
  children,
  onPointerMove,
  onPointerEnter,
  onPointerLeave,
  ...props
}: TiltCardProps) {
  const reduceMotion = usePrefersReducedMotion();

  // Raw targets, set directly from pointer events (no React state).
  const rotateXTarget = useMotionValue(0);
  const rotateYTarget = useMotionValue(0);
  const scaleTarget = useMotionValue(1);
  const glareTarget = useMotionValue(0);
  const glareX = useMotionValue(50);
  const glareY = useMotionValue(50);

  const rotateX = useSpring(rotateXTarget, spring);
  const rotateY = useSpring(rotateYTarget, spring);
  const lift = useSpring(scaleTarget, spring);
  const glareAlpha = useSpring(glareTarget, spring);
  const glareBackground = useMotionTemplate`radial-gradient(circle at ${glareX}% ${glareY}%, rgb(255 255 255 / 0.9) 0%, rgb(255 255 255 / 0.25) 28%, rgb(255 255 255 / 0) 62%)`;

  const enabled = !reduceMotion;

  const track = (event: React.PointerEvent<HTMLDivElement>) => {
    // Only fine pointers tilt; touch scrolling must never fight the card.
    if (!enabled || event.pointerType === "touch") return;
    const rect = event.currentTarget.getBoundingClientRect();
    const px = (event.clientX - rect.left) / rect.width - 0.5; // -0.5 … 0.5
    const py = (event.clientY - rect.top) / rect.height - 0.5;
    rotateYTarget.set(px * 2 * tiltStrength);
    rotateXTarget.set(-py * 2 * tiltStrength);
    scaleTarget.set(scale);
    glareX.set((px + 0.5) * 100);
    glareY.set((py + 0.5) * 100);
    glareTarget.set(glare ? Math.min(Math.max(glareOpacity, 0), 1) : 0);
  };

  const reset = () => {
    rotateXTarget.set(0);
    rotateYTarget.set(0);
    scaleTarget.set(1);
    glareTarget.set(0);
  };

  return (
    <div
      className={`relative inline-block ${className}`}
      style={{ perspective, ...style }}
      onPointerEnter={(event) => {
        onPointerEnter?.(event);
        track(event);
      }}
      onPointerMove={(event) => {
        onPointerMove?.(event);
        track(event);
      }}
      onPointerLeave={(event) => {
        onPointerLeave?.(event);
        reset();
      }}
      {...props}
    >
      <motion.div
        className={`relative h-full w-full has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-4 has-[:focus-visible]:outline-zinc-400 ${surfaceClassName}`}
        style={{
          borderRadius: rounded,
          rotateX,
          rotateY,
          scale: lift,
          transformStyle: "preserve-3d",
        }}
      >
        {children}
        {glare && enabled && (
          <span
            aria-hidden="true"
            className="pointer-events-none absolute inset-0 overflow-hidden"
            style={{ borderRadius: "inherit", transform: "translateZ(1px)" }}
          >
            <motion.span
              className="absolute inset-0"
              style={{ background: glareBackground, opacity: glareAlpha }}
            />
          </span>
        )}
      </motion.div>
    </div>
  );
}