Holo card

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useId,  useLayoutEffect,  useRef,  type KeyboardEvent,  type PointerEvent,} from 'react';import { DemoPointer, runDemo, type Point } from './demo-pointer';import { useAutoplay } from './use-autoplay';import styles from './holo-card.module.css';/* * Holo card: a printed trading card on a plain stage. Drag anywhere on the stage and the * card turns in 3D around the axis across the drag, while the character, a cutout of its own over * the printed art, drifts a little the same way, so it seems to float in front of the card, and a * soft white light slides the other way across the card. Let go and it all springs back. * * - Everything follows one value, the drag: how far the pointer is from where it pressed, in the *   card's own px. A spring integrated frame by frame carries it: stiff while held, so the card

/* Holo card (holo-card.tsx): the printed card in the middle of a plain stage. The card's width,   --w, follows the stage's size; everything on the card is placed in shares of its box.   Memory. A phone keeps a page's pixels in tiles the width of the screen, and a tile painted again   gets a second buffer. So what moves stays off the page's tiles: the card is a layer of its own,   and inside it only the light and the character are layers, of a fixed size, moved by their   transforms. The stage is a size container of a set height, so nothing inside it ever lays out   the page.   Colours are the tokens below, light-dark(light, dark): the stage takes the color-scheme it   inherits from the page (light unless the page says otherwise), or the one its colorScheme prop   sets (data-color-scheme). The card, its character and its light are printed matter, the same on   both. */.stage {  /* The stage, and its edge: soft grey with a hairline by day, plain black at night. */  --surface: #ededf0;  --line: rgb(0 0 0 / 0.05);  /* The card's shadow on the stage, close and far: by day it lifts the card off the grey; at     night the black stage needs none. */  --shadow-near: rgb(0 0 0 / 0.14);  --shadow: rgb(0 0 0 / 0.24);  /* The keyboard focus ring round the card. */  --focus: #1c1c1e;

'use client';import type { CSSProperties, Ref } from 'react';/* * The demo's pointer, and the steps that move it. A demo is a script of awaited steps: wait, * glide the pointer somewhere, press, drag it along a path, let go, calling the component's own * handlers as a hand would. Stopping the demo (the reader takes over, or it scrolls away) ends * the step in progress at once: its promise rejects, which ends the script right there, and the * pointer fades out. * * Nothing the pointer does needs a layout. It moves by animations the compositor plays (a drag * too: the point handed to the component each frame follows that animation's clock); the press * scales a box that keeps a transform at rest, since a box that gains or loses one is laid out * again; and the arrow and the hand are HTML boxes that swap by their visibility (a change of * style inside an SVG lays the SVG out again). */export type Point = { x: number; y: number };export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;  /** Glides the pointer to a point of the screen, in client px. */

'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);    const observer = new IntersectionObserver(      ([entry]) => {        onScreen = entry.isIntersecting;