Object cards

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useImperativeHandle,  useRef,  useState,  type CSSProperties,  type FocusEvent,  type KeyboardEvent,  type PointerEvent,  type Ref,} from 'react';import { DemoPointer, runDemo, type Point } from './demo-pointer';import { ArrowIcon, CheckIcon, CopyIcon, ShareIcon } from './icons';import type { ObjectKind } from './renderer';import { StandIn } from './stand-in';import { useAutoplay } from './use-autoplay';import { useObjectView } from './use-object-view';import styles from './object-cards.module.css';/*

/* Object cards (object-cards.tsx): two product cards side by side on a grey stage, one under the   other in a narrow one; at night the stage is near-black, the dark card stays black and the light   one turns charcoal, and the pictures (the objects and their grounds) keep their colours. Every   size in a card is a multiple of --u, a 254th of the card's width, which the scene sets from the   stage's width (a card on its own measures itself), so a card keeps its proportions at any size.   Memory and layout. The scene is a layout boundary of a size known from the stage's width   alone, so nothing that changes inside it lays out more than the scene. What changes while the   demo plays stays off the page's tiles (a phone keeps them in buffers of several MB, and a tile   painted again gets a second one): the objects turn on their canvases, the ranges and Copy Link   each paint on a small layer of their own, and the pointer moves on its own layer without any   layout (demo-pointer.tsx). */.stage {  /* Its colours, light and dark: each light-dark() pair resolves by the color-scheme the stage     inherits from the page, or the one the colorScheme prop sets (below). The stage and its     edge. */  --surface: #c1c1c1;  --line: rgb(0 0 0 / 0.06);  position: relative;  container-type: inline-size;  overflow: hidden;  overflow: clip;  border-radius: 18px;

'use client';import { useEffect, useRef, useState } from 'react';import { holdRenderer, releaseRenderer, type ObjectKind } from './renderer';import { spinAt } from './spin';import { axisAngle, identity, isIdentity, multiply, shrink, tidy, type Turn } from './turn';/* * One object in its picture: the canvas it is drawn on, its own spin and the turn a hand gives * it. Frame by frame, the clock of its spin moves on at the chosen speed and the object is drawn * as `spinAt(clock)`, turned further by what the reader added: a drag turns it about the axis * across the drag; let go, it keeps turning, slower and slower, while the added turn eases away * and the object settles back into its own spin. Only while it is on screen in a visible tab: * off screen the canvas gives its pixels back, and in a hidden tab nothing runs. Under reduced * motion, or with `hold` (the card's `still`), it does not spin on its own, and it stays where * the reader turns it. *//** * How long the spin takes to reach a new speed, a let-go object to slow down, and the turn the * reader added to ease away, in seconds (each the time to cover about two thirds of the way). */const EASE = 0.25;const COAST = 0.45;

import { discMesh, knotMesh, DISC_FACE, type Mesh } from './shapes';import type { Turn } from './turn';/* * One WebGL context draws every object on the page. It renders on a canvas of its own, which is * never shown; each card has a plain 2D canvas, and as soon as an object is drawn its picture is * copied there with drawImage. One context, one set of buffers and one program serve any number * of cards, where a context per card would hold its own of each, multisampled buffers included. * * The glass is a fragment shader, lit in view space: * - the body goes from a deep blue on the key light's side to a glowing one on the far side, *   where the light that went through gathers, and is deepest where it faces the eye; * - toward the outline the light caught inside glows, and a narrow band along the outline turns *   pale, as glass reflects more at grazing angles (dark under the disc, as the edge of a glass *   on a white table is); * - the highlights are reflections of a studio (a band of light round the horizon, a light *   overhead, two soft boxes), with sharp edges, so they read as gloss; * - on the disc's top face, a mark is embossed: its outline, a distance field, bends the *   surface's normal along a narrow bevel, which catches the light. The face is a little *   hollow, so its reflections move as the disc wobbles. */export type ObjectKind = 'disc' | 'knot';

/* * The two objects, as meshes built once: a glass disc turned on a lathe, and a torus knot swept * along its curve. Each is a list of triangles over vertices that carry a position and a normal, * interleaved (x, y, z, nx, ny, nz). Both fit in a sphere of radius 1 around the origin. */export type Mesh = {  /** Six floats per vertex: its position, then its normal. */  vertices: Float32Array;  /** Three vertex numbers per triangle. */  indices: Uint16Array;};export type Vec3 = [number, number, number];/** * The disc's cross-section, in units of its radius, from the middle of its bottom face round its * edge to the middle of its top face, as (distance from the axis, height): a flat bottom, a * straight side, a flat-topped lip, and a top face sunk a little inside the lip, like a dish. * The corners are rounded when the mesh is built. */export const DISC_SECTION: readonly [number, number][] = [  [0, -0.21],  [0.9, -0.21],

import type { ObjectKind } from './renderer';import { axisAngle, chain, type Turn } from './turn';/* * How each object turns on its own, as a function of time: where it is after `time` seconds at * the normal speed. The knot turns about an axis that leans to the left, showing its narrow side * and its five-fold face in turn, while it also turns slowly about its own axis. The disc spins * about its own axis, leaning back by about 40 degrees, and wobbles a little once a turn, so its * face always shows, its edge catches the light below it and its reflections move. *//** The disc's spin, and its wobble with it: a full turn every 3.7 seconds, in radians per second. */const WOBBLE = (2 * Math.PI) / 3.7;export function spinAt(kind: ObjectKind, time: number): Turn {  if (kind === 'knot') {    return chain(      axisAngle(0, 0, 1, 0.29),      axisAngle(0, 1, 0, 0.292 * time - 2.32),      axisAngle(1, 0, 0, 0.17),      axisAngle(0, 0, 1, 0.06 - 0.13 * time),    );  }  // The disc's axis is its y: a quarter turn about x brings its top face to the viewer, less

/* * Rotations as 3 × 3 matrices, in the column-major order WebGL takes them: element (row r, * column c) sits at c * 3 + r. Enough to turn an object about any axis and to stack turns. */export type Turn = Float32Array;export const identity = (): Turn => new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]);/** A turn by `angle` radians about the axis (x, y, z), which need not be of length 1. */export function axisAngle(x: number, y: number, z: number, angle: number): Turn {  const length = Math.hypot(x, y, z);  if (!length || !angle) return identity();  const [a, b, c] = [x / length, y / length, z / length];  const cos = Math.cos(angle);  const sin = Math.sin(angle);  const k = 1 - cos;  return new Float32Array([    cos + a * a * k,    b * a * k + c * sin,    c * a * k - b * sin,    a * b * k - c * sin,    cos + b * b * k,    c * b * k + a * sin,

import { memo, useId } from 'react';import { LOOKS, project, type ObjectKind } from './renderer';import { DISC_FACE, DISC_LIP, DISC_SECTION, KNOT, KNOT_TUBE, knotPoint } from './shapes';import { spinAt } from './spin';/* * The objects as plain drawings, for the first frame (the server's, before WebGL starts) and for * browsers without WebGL. Each is projected from the same shapes, turned as the renderer turns * them at the start, so the picture does not jump when the canvas takes over: * - the disc is a few rings of its section (the outline, the lip, the well inside it, the face), *   filled with gradients, and the mark's outline; * - the knot is its curve cut into short pieces, painted from the farthest to the nearest, each *   a thick stroke with a pale rim, a deep core and a highlight along it, so the near tube covers *   the far one where they cross. *//** The picture's size, in the units of its view box: the media area's proportions. */const PICTURE = { width: 245, height: 183 } as const;type Point = { x: number; y: number; depth: number };const where = (kind: ObjectKind, point: readonly [number, number, number]): Point =>  project(kind, spinAt(kind, 0), point, PICTURE.width, PICTURE.height);

/* * The cards' small icons, drawn on a 12 × 12 grid with strokes in the text's colour. They are * decorative: each sits beside a text or inside a labelled control. */const STROKE = {  fill: 'none',  stroke: 'currentColor',  strokeWidth: 1,  strokeLinecap: 'round',  strokeLinejoin: 'round',} as const;/** An arrow up and to the right: open the item. */export function ArrowIcon() {  return (    <svg viewBox="0 0 12 12" aria-hidden="true">      <path {...STROKE} d="M3.5 8.5 8.5 3.5M4.6 3.5h3.9v3.9" />    </svg>  );}/** Two sheets, one over the other: copy. The front one is filled with the button's colour. */export function CopyIcon() {

'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 onto a control and press it, or grab an object and drag it, 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 while the demo plays needs a layout, because one here in the same * frame as one in the cards would make the browser lay out the whole page (see the note at the * top of the stylesheet). So it moves by animations the compositor plays (a drag too: the dragged * object 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>;

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