Holographic card

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useId,  useRef,  type KeyboardEvent as ReactKeyboardEvent,  type PointerEvent as ReactPointerEvent,} from 'react';import { CARD, createFoil, type Foil } from './renderer';import { useAutoplay } from './use-autoplay';import styles from './holographic-card.module.css';/* * Holographic card: a dark card with a triangle on it. Move over it and a rainbow foil blooms * where the light falls: contour lines ringing the card, a Sierpinski triangle inside the * triangle, and the card tilts a little toward the light. * * - The foil is a WebGL2 shader (renderer.ts) on a canvas inside the card; the words, the outline *   of the triangle and the marks are HTML and SVG on top, so they stay sharp and readable. * - The light follows the pointer anywhere over the stage, so it reaches the card's edge before *   the pointer does. It eases after the pointer (about 60 ms), comes on in about 0.3 s and goes

/* Holographic card (holographic-card.tsx): a near-black stage with the card in its middle and a   quiet hint under it; by day the stage turns pale and the card stays dark, as an object would.   Sizes. The card is drawn at 442 × 628 px at its own size: every length inside it is in em of a   16 px font size, which the stage sets from its own size (a container query), so the whole card   scales down to fit a smaller or shorter stage and keeps its proportions.   Colours are the tokens below, light-dark(light, dark) where the two differ: the component takes   the color-scheme it inherits from the page, or the one its colorScheme prop sets.   Memory. The stage is one layout and size boundary; the card tilts by a transform on its own   layer, the light is a canvas the shader redraws, and the demo pointer moves by a transform. */.root {  /* The stage, its glow behind the card, and the hint's words. */  --stage: #06090a;  --stage-glow: #0b0e10;  --hint: rgb(255 255 255 / 0.3);  /* The card's shadow on the stage. */  --card-shadow: rgb(0 0 0 / 0.85);  /* The same on both schemes: the card itself, which stays dark. */  --card-top: #111315;  --card-bottom: #0f1112;  --card-edge: rgb(255 255 255 / 0.13);

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The foil of the holographic card: one WebGL2 fragment shader over the whole card, in the card's * own design units (442 × 628, y down), whatever size it is drawn at. * * - The card's ground: near-black, a shade darker toward the bottom. With no light, the shader *   draws only this, so the card at rest is plain. * - Contour lines: thin lines every 8.5 units along a height field, the smooth minimum of the *   distances to two points (one right of the triangle, one under it), bent by a few slow waves. *   So the lines ring those two points, merge, and run in long wavy bands to the edges. * - The colour is a rainbow laid diagonally across the card (green at the lower left, through *   blue, violet and pink, to gold at the upper right) that slides a little as the light moves *   across, as a foil's colours do when it tilts. * - The light: a soft round falloff about 360 units wide around the pointer, brightest in a small *   core, which turns the lines on in their colour and washes the ground between them. Far from it *   the lines stay barely visible while the light is on at all. * - The triangle: a 1-unit outline, an 8-unit band around it with no lines, and inside, a *   Sierpinski triangle walked level by level from the point's barycentric coordinates. The kept *   triangles light up in the foil's colour; the holes stay dark, with a soft shade under their top *   edge. Levels smaller than about 2.5 device px are drawn as their average, so they never shimmer. */export const CARD = { width: 442, height: 628 } as const;

'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;