The Making-Of
A single showpiece for an imagined independent watchmaker — concept, code, and AI-generated imagery, produced end-to-end by Claude (Fable 5). The centrepiece is a working escapement drawn from raw SVG primitives and driven by hand-written physics.
Hæderus Genève is a fictional haute-horlogerie maison. The brief: obsessive precision — microns and patience. A. Lange & Söhne catalogue photography married to Swiss-poster typography. Quiet pride, no hype. Everything on the page should feel measured to a thousandth of a millimetre.
Hanken Grotesk — a refined neo-grotesque — carries body copy and wide-tracked small-caps technical labels (letter-spacing to .34em). Cormorant, a high-contrast serif, sets the numerals, watch names and display headlines in italic, echoing engraved dial numerals. The pairing is deliberately catalogue-like: engineering sans against jeweller's serif.
Three originals, generated with GPT Image 2 (gpt-image-2, quality high) and inspected for jewellery-grade realism. Prompts were written as an art director would brief a photographer — subject, materials, lighting, lens, mood, palette, and an explicit "no text/watermark".
Stills become motion in code — the movement macro is parallax-exploded on scroll (image, annotation lines and floating labels each drift at their own rate), and the collection images ken-burns within their frames on hover.
The hero mechanism is not a video or a GIF — it is a Swiss lever escapement drawn entirely from circles, lines and paths, then animated by a hand-written model. Escape-wheel club teeth, balance timing screws and the Breguet hairspring are all generated procedurally in JavaScript. One time variable drives four coupled parts:
// one phase drives the whole mechanism const phase = 2*Math.PI*BEAT_HZ*t; const s = Math.sin(phase); // balance wheel — harmonic oscillation (±148°) balance.rotate(AMP*s); // pallet fork — locked at a bank, snaps through // zero at each centre-crossing (tanh = near-square) fork.rotate(FORK_BANK * Math.tanh(9*s)); // escape wheel — one discrete tooth per beat const beat = Math.floor(phase/Math.PI); const drop = smoothstep(0, 0.16, phase/Math.PI - beat); escape.rotate(STEP * (beat + drop));
The tanh keeps the fork banked for most of the swing and flips it fast as the balance crosses centre; the escape wheel's smoothstep gives the tell-tale quick unlock–drop–lock tick rather than a smooth spin. The hairspring subtly winds and unwinds with the balance. It runs at a chosen 1.15 Hz for legibility, and pauses off-screen via an IntersectionObserver.
The footer renders your actual local time on a canvas grand-feu dial — Roman numerals in Cormorant, blued Breguet hour and minute hands, and a true smooth-sweep seconds hand interpolated with sub-second precision (seconds + milliseconds/1000) on requestAnimationFrame, DPR-scaled for retina.
±0.002 mm — with a cubic ease and hairline bars drawing in beneath.Built the escapement geometry and physics, the live dial, all sections and the count-up system. First pass hunted layout rhythm, mechanism plausibility and contrast of labels over the movement macro.
Tuned easing and tempo, tightened type hierarchy and spacing, verified mobile reflow at 375 px and the exploded-parallax timing. Added texture and hover depth.
Final polish pass — beat-synced pulse on the caption dot, richer hairline animations, console clean, cross-checked desktop and mobile.
The live log of each pass is kept in the build report.
The site is fully static — no build step. Deploy the folder to Cloudflare Pages: