Colophon · Plate 124

EscapementHow a blueprint learned to keep time — the palette, the type, and the pure-SVG going train that ticks a real seconds hand.

ESCAPEMENT is a fictional horological plate for the Generative Assets collection. Its single job: make the invisible machine that chopped time into seconds legible in one glance, and prove it by running — an anchor rocking, an escape wheel stepping one tooth per beat, geared at true ratios.

01 The palette

Drawing-office blue, brass on the bench

Every colour is argued from the subject: this is an engineer's drawing of a clock movement. The ground is cyanotype blue — the blueprint. The mechanism is drawn in brass, the metal a real going train is cut from. Bearings burn a single ruby. Small annotation text takes a cooler spec-ink so it never competes with the brass lines.

#12222C

Blueprint

Cyanotype ground — the drawing office.

#C79A4C

Brass line

The metal of the train; used for lines and marks.

#7FA6B4

Spec-ink

Cool annotation type — clears 4.5:1 on blue.

#C6402E

Jewel-red

The ruby pivots — the one warm accent.

Body copy uses a brightened ink (#D9E8EE) rather than the brass, keeping the bright accent reserved for lines and marks — so text always clears the contrast floor over the animated plate.

02 The type

A grotesque and a drawing-instrument mono

Escapement

Chivo · 300 → 900

A precise, slightly industrial grotesque. Set at 900 for the wordmark it reads like a stamped part number; the light 300 carries the quiet sub-lines. Engineered, not decorative.

30 T · 2 rev/min

IBM Plex Mono · 400 → 600

Every number on the plate — tooth counts, ratios, the live readout — is monospaced so figures align like a specification sheet. The mono is the voice of the annotations.

03 The techniques

One signature: a working escapement, no libraries

The whole mechanism is inline SVG driven by a single requestAnimationFrame loop — no three.js, no GSAP, no matter-js. An SVG mechanism wants exact geometry, not a physics engine, so the only dependency is Google Fonts.

Procedural gearsEvery wheel's tooth path is generated in JS from its tooth count — trapezoidal teeth for the going train, asymmetric pointed teeth for the escape wheel, and an Archimedean spiral() for the mainspring. Changing a ratio is changing a number.
The true going trainBarrel 96T → centre 64T → third 60T → fourth 30T → escape 30T, with the matching pinions (12, 8, 8, 15). Multiply the meshes and a barrel turning 1 rev / 8 h drives an escape wheel beating once a second. The ratios are real horology, not eyeballed.
The stepThe escape wheel advances exactly one tooth (12°) per beat with an easeOutBack snap, plus a small backward recoil between ticks — the detail that names it an anchor. The seconds hand steps 6° in lockstep, once per real second.
Real time, not a loopElapsed time is read from performance.now(), so the beat is your device's own clock. Hide the tab and the loop pauses via visibilitychange; return and it resumes exactly where the wall clock now stands.
The tickA short band-passed noise burst through the WebAudio API — a two-tone tick/tock alternating each beat. The context is created only on the first user gesture and stays silent until you press Tick, so there is never an autoplay error.

04 Three iteration passes

Each pass drove the beat and asserted on the output

Pass 1Craft

Tuned the escape-tooth profile so the pointed teeth actually read as a ratchet against the anchor pallets, not a generic cog.
Split the accent: pulled all small annotation text off brass onto spec-ink / ink so every label clears 4.5:1 on the blueprint.
Set a deliberate type scale — a 900-weight wordmark against 300-weight sub-lines — and aligned the readout figures to tabular numerals.

Pass 2Depth

Enriched the signature with a true recoil: the escape wheel now kicks a hair backwards between ticks, the second-read detail that distinguishes anchor from deadbeat.
Added the exploded callouts — thin brass leaders naming each part — and the honest "third + fourth wheels, behind the plate" shaft to the dial.
Gave the tick a tick/tock alternation and shaped its envelope so it lands like a mechanical click, not a beep.

Pass 3Hardening

Verified the plate scales cleanly to 375px and the ratio table reflows to two columns; nav and wordmark stay inside the viewport.
Wired reduced-motion to stop the loop and render a settled, legible frame with the audio muted; added a matchMedia listener so toggling the OS setting re-applies live.
Confirmed no console errors, DPR-independent crisp SVG, and that the seconds hand holds its place across a tab hide/show — because the beat is real time.