Train footer

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useId, useLayoutEffect, useRef, useState, type CSSProperties } from 'react';import {  BAY,  CHIMNEY,  PUFF_HEIGHT,  PUFF_KINDS,  PUFF_WIDTH,  PuffSymbols,  TRAIN_HEIGHT,  TRAIN_WIDTH,  Train,  Viaduct,} from './art';import { useAutoplay } from './use-autoplay';import styles from './train-footer.module.css';/* * Train footer: a site footer (brand, a line of copy, three columns of links) above a wide sky and * an engraved brick viaduct. Every few seconds a little steam train crosses the viaduct from left * to right, trailing a plume of smoke.

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The engraving: a brick viaduct, a small goods train and its smoke, all drawn in SVG in one unit * system (1 unit = 1 px at full size; the footer scales the lot). Every colour is a CSS token, so * the same drawing works by day and by night. * * - Shading is engraved: dense masses (the arch vaults, the train's dark parts) are filled with a *   dot or line pattern rather than a flat tone, and the light faces carry fine brick or hatch *   lines. Patterns are user-space, so they stay crisp at any scale. * - The viaduct is one bay (pier to pier) drawn once in <defs> and repeated with <use>. * - Puffs of smoke are three cloud shapes: their circles are stroked thick and then filled on top, *   which leaves only the outer outline; a few curls inside give the engraved billow. */import type { CSSProperties } from 'react';import styles from './train-footer.module.css';/** One bay of the viaduct, pier centre to pier centre, and the height drawn below the deck. */export const BAY = 235;export const VIADUCT_HEIGHT = 400;/** The train's box; its wheels stand on y = TRAIN_HEIGHT. */export const TRAIN_WIDTH = 856;export const TRAIN_HEIGHT = 180;

'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. `visible` and `reduced` are there for parts * that only need to know one of them. */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]) => {

/* Train footer (train-footer.tsx): words and links on white paper, a wide sky, and an engraved   viaduct in sepia ink along the bottom, which a steam train crosses now and then. At night the   paper turns near-black and the engraving pale sepia.   Colours are the tokens below, light-dark(light, dark) where the two differ: 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).   Sizes. The drawing is in units (1 unit = 1 px at full size); the scene scales it by --s, which   the component sets from the footer's width. The words step down a little on narrower footers   (--t, set on the content by container queries on the root).   Memory. The train and the puffs of smoke move only by transform and opacity, each on a layer of   its own; the viaduct never repaints. */.root {  /* Paper, words, links, small print and the top rule. */  --paper: #fdfdfd;  --text: #121010;  --body: #474645;  --link: #484745;  --muted: #716f6e;  --rule: #dcdcdc;  /* The engraving: ink lines, dark masses, the dots pricked in them, soft tooling marks and