Holo Card

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import { useReducedMotion, useVisibilityPause } from "@/lib/motiq";
7 
8/* -------------------------------------------------------------------------- */
9/* Types                                                                      */
10/* -------------------------------------------------------------------------- */
11 
12export type HoloCardFoil = "azure" | "spectral" | "none";
13 
14export interface HoloCardProps extends React.HTMLAttributes<HTMLDivElement> {
15  /** Card content. Laid out as a full-height column so a header/mid/footer trio reads like a pass. */
16  children?: React.ReactNode;
17  /** Peak lean in degrees at the card edge. 14 reproduces the lab's ±11° / ±15° pair. */
18  maxTilt?: number;
19  /** Tilt spring. Deliberately underdamped (ζ≈0.46) so release overshoots ~6% once. */
20  spring?: { stiffness?: number; damping?: number };
21  /** Iridescent foil sheet pinned to the raw pointer. */
22  foil?: HoloCardFoil;
23  /** Specular glare hotspot. */
24  glare?: boolean;
25  /** Counter-moving ground shadow under the card. */
26  shadow?: boolean;
27  /** Ambient sway before/after any pointer input. */
28  idleSway?: boolean;
29  /** Card aspect ratio (width / height). Pass 0 to let the content size the card. */
30  aspect?: number;
31  /** Accessible name for the tilt surface. */
32  label?: string;
33  /** Fires with the settled spring angles (rotateX, rotateY) as they change. */
34  onTilt?: (rx: number, ry: number) => void;
35  /** Park the loop while scrolled offscreen or the tab is hidden. */
36  pauseWhenHidden?: boolean;
37  /** Force the static, motion-free resting pose regardless of system preference. */
38  reducedMotion?: boolean;
39}
40 
41/* -------------------------------------------------------------------------- */
42/* Physics                                                                    */
43/* -------------------------------------------------------------------------- */
44 
45/** Hand-rolled delta-time spring — keeps the component dependency-free. */
46class Spring {
47  x: number;
48  v = 0;
49  target: number;
50  k: number;
51  d: number;
52  constructor(value: number, k: number, d: number) {
53    this.x = value;
54    this.target = value;
55    this.k = k;
56    this.d = d;
57  }
58  step(dt: number): number {
59    const a = this.k * (this.target - this.x) - this.d * this.v;
60    this.v += a * dt;
61    this.x += this.v * dt;
62    return this.x;
63  }
64}
65 
66// … truncated