Guest stepper

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useId,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type KeyboardEvent,} from 'react';import { GhostPointer, runDemo } from './ghost-pointer';import { EXTRA, Figure, GUESTS, widthOf, type Guest } from './guests';import { Odometer } from './odometer';import { spring } from './spring';import { useAutoplay } from './use-autoplay';import { useIdle } from './use-idle';import styles from './guest-stepper.module.css';/* * Guest stepper: how many guests a place can host, counted on a line of 3D figurines. Each * guest is a character standing in line: plus brings the next one in at the end, minus sends the

/* Guest stepper (guest-stepper.tsx, odometer.tsx). Sizes are in em: the stage sets the   font-size from its own width (a container query). The guests are drawn in px, a unit each,   and the line scales them down to fit. --glide and --glide-ms, the spring the line moves on,   come from the component.   Colours are the tokens below, light-dark(light, dark): the component 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 figurines are pictures and stay as they are; at night only what   is round them goes dark. */.root {  /* The stage and its dots; the card, and the pill it closes into, a step up. */  --surface: #e7e7ea;  --dots: rgb(0 0 0 / 0.05);  --surface-2: #fff;  /* The words and the count; the hint, Close's cross, the plus sign and Edit. */  --ink: #1c1c1e;  --ink-muted: #6e6e73;  /* Close and Edit, then Close under the pointer. */  --control: #f2f2f5;  --control-hover: #e9e9ee;  /* Minus and plus: their ring, then under the pointer. */  --step-ring: #d9d9df;  --step-ring-hover: #b9b9c1;

/** Transparent 3D figurines. Keep /experiments/guest-stepper alongside the copied component. */export type Guest = {  id: string;  kind: 'person' | 'animal' | 'alien';  src: string;  /** The figure's size in the unscaled line, with its feet on the common baseline. */  width: number;  height: number;};const guest = (id: string, kind: Guest['kind'], width: number, height: number): Guest => ({  id,  kind,  src: `/experiments/guest-stepper/${id}-3d-v1.webp`,  width,  height,});/** People, pets and visitors from space; all three are visible in the initial group of four. */export const GUESTS: readonly Guest[] = [  guest('sage-woman', 'person', 53, 98),  guest('lavender-man', 'person', 50, 98),  guest('shiba', 'animal', 58, 76),  guest('mint-alien', 'alien', 52, 90),

import { useLayoutEffect, useRef } from 'react';import { easingOf, spring } from './spring';import styles from './guest-stepper.module.css';/* * The big number, as an odometer. Each digit is a column of digits behind a window: when the * number changes, the columns whose digit changed roll to the new one, up as the number grows and * down as it shrinks, through 9 and 0 as a counter's wheels do. Past 9 a tens digit fades in * beside the ones; at the top of the range a "+" joins them; the number stays centred, its glyphs * gliding to their new places. *//** Each column holds the digits three times over, so it can roll on past 9, or back past 0. */const DIGITS = Array.from({ length: 30 }, (_, i) => i % 10);/** A digit's height and width, and the "+"'s width, in em. */const LINE = 1.15;const DIGIT = 0.62;const PLUS = 0.56;const ROLL = spring(0.22, 360);/** Where a column's strip rests to show `digit`: in its middle round. */const rest = (digit: number) => `translateY(${-(10 + digit) * LINE}em)`;

'use client';import { useEffect, type RefObject } from 'react';/* * The figurines' idle life: every second or two, one guest shifts their weight or gently bobs. * Each gesture is one short Web Animation, * and nothing runs between them. It goes on only while the line is on screen in a visible tab, * and never under reduced motion. * * [data-shown] finds guests in line; [data-body] is the figurine that moves. Aliens float a * little; people and pets sway around their feet. The transparent artwork stays intact. */export function useIdle(root: RefObject<HTMLElement | null>, enabled = true) {  useEffect(() => {    const element = root.current;    if (!element || !enabled) return;    const motion = window.matchMedia('(prefers-reduced-motion: reduce)');    let onScreen = false;    let timer = 0;    let active: Animation | undefined;    const gesture = () => {      const bodies = element.querySelectorAll<HTMLElement>('[data-shown] [data-body]');

/* * Springs as CSS easings. A spring pulls a value to its target and lets it settle: fast at first, * then slowing down, overshooting a little and coming back if it is bouncy. CSS `linear()` draws * any curve through a list of points, so the spring's motion is sampled once, and the same curve * serves CSS transitions and the Web Animations API. */export type Spring = {  /** The curve, as a CSS `linear()` easing. */  easing: string;  /** How long it takes to settle, in ms: the duration to play the curve over. */  duration: number;};/** Points sampled along the curve: plenty for a smooth motion. */const SAMPLES = 40;/** * A spring that covers most of the distance in about `response` ms. With a `bounce` of 0 it * settles without overshooting; at 0.3 it overshoots by about 5% and comes back. */export function spring(bounce: number, response: number): Spring {  // The damping ratio (1: no overshoot) and the natural frequency, in radians per second.  const damping = 1 - bounce;

'use client';import type { CSSProperties, Ref } from 'react';/* * The demo's ghost pointer, and the timeline that moves it. A demo is a script of awaited steps: * wait, glide the pointer onto a control, press it and call the component's own handler, as a * click 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. */export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;  /** Glides the pointer onto `target`: its middle, or a point given as shares of its size. */  moveTo: (target: Element | null | undefined, at?: { x: number; y: number }) => Promise<void>;  /** Presses and lets go; `action` runs as the pointer goes down. */  press: (action: () => void) => Promise<void>;};/** What a stopped demo's pending step rejects with. */class Stopped extends Error {}

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