Generative Assets · site 203 · how it was made
How CHAPPE was made
CHAPPE stages one link in the history of signal: the optical telegraph of 1794, rendered as a dusk panorama in which a real dispatch — Condé est restituée à la République — physically hops tower to tower, arm over arm, and assembles letter by letter in a telegraphist's log. The page has a single job: make bandwidth visible.
Palette — a Revolution evening
Every colour is argued from the hour. The last of the sun sits low behind the ridge toward Paris; everything nearer the viewer has already gone to ink.
Per the collection's ink/line rule, the bright bone token is reserved for the arms, the log capitals and headings; body copy runs in a dimmed body ink derived from it, and the amber is spent on lines, counters and the cursor — never on small text over the sky without a scrim.
Type
Playfair Display (italic 900) carries the Didone France of the 1790s — the hero line and section heads are the page's typographic bravery, set as a printed proclamation. IBM Plex Sans does the working text: the telegraphist's log runs in wide-tracked 600-weight capitals so each arriving sign lands like a stamped character, and the HUD counters sit in tabular figures.
Techniques
No libraries — one hand-written SVG scene and one requestAnimationFrame clock.
- Layered SVG panorama. A 1600×640 viewBox with a five-stop dusk gradient, low sun glow, and five painter-ordered ridge paths; eight tower layers are interleaved between the ridges so each station stands in front of its own ridge and behind the next.
preserveAspectRatio="xMidYMax slice"anchors the foreground; below 700px the strip becomes a centred horizontal scroll. - Nested-transform kinematics — the signature. Each semaphore is a regulator group rotating about the mast top, with two indicator groups pivoting at the beam's ends inside it, so indicator angles are relative to the beam exactly as on Chappe's machine, and one shared builder renders towers, practice frame and the 26 alphabet glyphs from the same geometry.
- Counterweight easing. Arms tween with a back-out ease — regulator 820 ms at overshoot 0.6 (heavy beam), indicators 700 ms at overshoot 1.15 with a 90 ms lag — so every arrival overshoots a few degrees and settles like a pendulum.
- Pipelined relay. One hop every 1.6 s: at tick
t, towerkthrowsmessage[t−k], with a 60 ms-per-station ripple down the line — so up to eight signs are in flight at once, and the log appends a letter only when the Montmartre tower's arms have actually settled. The 35-sign dispatch plus service signs makes a 49-tick cycle, about 78 s. The page loads pre-advanced to tick 17, already mid-word. - Hardening. A clamped-delta rAF clock survives tab throttling;
window.__chappeexposes tick, log text, and every tower's live angles so QA gates on state, not seconds; reduced-motion renders the settled tick-17 frame with no loop. - Second read. Stay five minutes and night actually falls — a dusk overlay deepens to 0.22 and lamplight fades up in the tower windows. Hover any tower to see which sign it is holding; when arms settle on a letter, the hub glints amber — the next station's telescope confirming the sign.
Accuracy notes
The machine's geometry is historical; the alphabet is honestly reconstructed, and the page says so on its face.
- Historical: a ~4.6 m regulator with two ~2 m counterweighted indicators; for signalling the regulator took two working attitudes (vertical/horizontal) and each indicator seven angles at 45° steps, the folded eighth excluded — 2×7×7 = 98 figures, of which 92 were used; oblique regulator attitudes carried service signs; signals indexed a 92×92 codebook of 8,464 entries. The Lille–Paris line (~230 km, 15 stations) announced the recapture of Condé-sur-l'Escaut on 30 August 1794 within the hour, and carried back the renaming to Nord-Libre.
- Reconstructed: Chappe's operators never spelled letters, so the shipped alphabet maps A–M to the vertical regulator and N–Z to the horizontal, stepping the indicator pair through its seven legal angles in alphabetical order; space is the closed 45° oblique, end-of-dispatch the closed 135° oblique, rest the closed vertical. The panorama frames eight towers of the real fifteen, and time runs roughly twenty-fold fast (1.6 s per hop against a real station's ~30 s hold) — both stated in the page copy.
Iteration log
Pass 1 — Craft
Caught a dishonest number before it shipped: the log counter was hardcoded “/ 34” while the actual dispatch is 35 signs — replaced with the measured length. The hero eyebrow wrapped “1794” onto its own line (shortened and set nowrap); the slice-crop was eating both panorama labels (“← VERS LILLE” lost its first half at 1440px — both moved inside the crop-safe zone, the Paris label end-anchored); and tower 1's bone arm ran behind the hero sub-copy, so the scrim deepened from .62 to .74 and the sub-copy gained a real text-shadow.
Pass 2 — Depth
Drove the relay and watched arrivals feel unacknowledged, so settling arms now fire a brief amber hub glint — the telescope-confirmation beat — shared by towers and practice frame. Added the hover tag (“St. 4 — tient « E »”) that reads each tower's live sign off the same state the QA probe uses, and kept the five-minute nightfall with window lamps as the second-read reward.
Pass 3 — Hardening
Removed one ornament — a mist band across the far ridge that read as smudge, not weather. Re-verified the full suite headless: 17 checks including log-grows-by-state (never wall-clock), arm angles equal to the code table on every settled tower, two towers holding the same letter with identical angles, two-frame liveness hash, 375px with the wordmark/nav/h1 measured inside the viewport and zero genuine offenders, and a reduced-motion run whose frame hashes byte-identical while still showing the mid-word settled relay.
Every figure above — tick length, easings, overshoot constants, cycle count, sign count, contrast ratio — was re-read against the shipped source after the final code change.