The guide

How this site was made

Escapement & Co. is a fictional independent watchmaker producing forty pieces a year, built to sell one thing: a waitlist position for Calibre III. The art direction treats the page like a movement — midnight navy for the dial, hairline rules laid out like minute tracks, and one act of boldness carrying the whole design: a working Swiss lever escapement, drawn and animated entirely in SVG, beating at a horologically correct 4 Hz. No photographs anywhere. The drawing is the craft, exactly as the movement is the watch.

Palette

Four ideas, held with discipline: night, silver, steel, and one drop of burgundy — the strap, the rubies, nothing else. The burgundy never colours a surface larger than a pallet stone or a ledger square, so it always reads as a jewel.

Typography

Three voices, each with a horological job. None of them would suit any other site in this series.

Technique: the escapement

The hero is not a video or a Lottie file. Every part — 15-tooth escape wheel with club teeth and crossings, black-polished pallet fork with ruby stones, screwed balance, Archimedean hairspring — is generated as SVG paths by ~200 lines of vanilla JavaScript, then driven by a single clock with the real phase relationships of a 4 Hz Swiss lever escapement:

const AMP = 240, FREQ = 4;          // amplitude °, hertz
const BEAT = 1 / (2 * FREQ);        // 125 ms per beat
const STEP = 360 / 15 / 2;          // 12° of wheel per beat

function render(t) {
  // balance: simple harmonic motion
  const theta = AMP * Math.sin(2 * Math.PI * FREQ * t);

  const k = Math.floor(t / BEAT);   // which beat we are in
  const u = (t - k * BEAT) / BEAT;  // progress through it

  // escape wheel: locked, then snaps 12° as the beat opens
  const escA = (k + easeOut(Math.min(u / 0.22, 1))) * STEP;

  // pallet fork: flips banking side at every zero-crossing
  const side = n => (n % 2 ? 8.5 : -8.5);
  const f = lerp(side(k - 1), side(k),
                 easeInOut(Math.min(u / 0.26, 1)));
}

Because the balance is a sine wave, its zero-crossings land exactly on beat boundaries — so the fork flip, the wheel’s 12° snap and the impulse jewel passing through the fork slot all happen at the same instant, for free. The hairspring “breathes” by rotating and scaling a few percent with the balance angle. The dead-beat seconds dial in the spec sheet is pure CSS: animation: deadbeat 60s steps(60) infinite — the one place steps() is honest, because a lever escapement really does move in steps.

Details that reward attention: hovering an annotation label warms its leader line to burgundy and lights the mechanical part itself; each beat, the receiving pallet stone flares briefly as the tooth drops — entry, exit, entry, exit — so the impulse the copy describes is actually visible; a tempo control offers 4 Hz, an eighth-speed ½ Hz for studying the lock-and-drop, and Rest. prefers-reduced-motion starts the drawing at Rest in a poised mid-swing pose — calm, never broken.

The three passes

Pass 1 — correctness & composition

The full-page capture exposed a real bug: scroll-revealed sections stayed invisible whenever the page was captured or scrolled unusually, so a 1.4 s safety now guarantees nothing ever stays hidden. Moved the banking-pin and impulse-jewel leader dots onto their actual parts, and centred the guide’s reading column, which was listing left at 1440 px.

Pass 2 — elevate

Gave the drawing instrument behaviour: a live θ readout of the balance angle in the figure caption, a beat-synced flash on whichever pallet stone is receiving the tooth, and part-highlighting when you hover an annotation. The anglage vignette grew from a floating sketch into a full-width bridge cross-section with engineering hatch and a “poli miroir” leader, drawn in the same convention as the hero; the black-polish panel earned a single crisp specular edge, so the “black from one angle, white from the next” claim is visible without hovering.

Pass 3 — taste

Chanel rule: deleted the hero’s “read the specification” link — it repeated the nav and diluted the single call to action. Re-aligned the one annotation whose leader line touched its label (banking pins — a precision drawing cannot miss by 8 px), kept every vignette label inside the crop-safe zone at 390 px, widened the tempo buttons to thumb size on phones, and verified reduced-motion: the drawing rests in a poised mid-swing with Rest pre-selected.

Do this yourself

1. Pick the one true mechanism of your subject — the thing insiders stare at — and ask Claude to make it the hero as a working diagram, not a picture of one. Specify real numbers (4 Hz, 15 teeth, 12° per beat); accuracy is the aesthetic.
2. Ban photography up front. Tell Claude every visual must be SVG, CSS or canvas. Constraint produces craft.
3. Give the palette a story, not a list — “midnight dial, silvered print, one burgundy the size of a ruby” beats five hex codes. Then ask Claude to enforce the accent’s maximum surface area.
4. Choose type by job: one engraved display face, one bookish body face, one mono for every number. Ask for faces you have never seen on a startup site.
5. Drive all motion from a single clock. One t, every element a pure function of it. Phase relationships stay honest and reduced-motion becomes trivial: freeze t.
6. Make structure mean something: section numbers as Roman numerals like a calibre, dividers drawn as minute tracks, a ledger with exactly as many cells as units you will make.
7. Screenshot, critique, repeat — three times. Have Claude read its own screenshots at 1440 and 390 wide and name what is weakest before touching code.
8. Finish by removing something. If the page survives without it, it was an accessory.

Escapement & Co. · drawn entirely in code · return to the atelier →