CALIBRE 27

Construction notes

How the movement became markup.

CALIBRE 27 is an invented haute-horlogerie manufacture staged as a late bench inspection: anthracite velvet, one narrow lamp, and a movement taken apart slowly enough for the train to keep breathing. The page avoids watch photography so the claim stays literal. Every visible part is markup, every wheel is geometry, and the escapement is timed by JavaScript rather than implied by a poster image.

The Concept

The page presents the C27-M as a private movement inspection rather than a sales brochure. The first viewport is intentionally close and asymmetric: a cream serif title sits beside a running SVG calibre, a twelve-line ledger names the layers, and a bench-rule readout reports how assembled the movement is. Scroll behaves like tweezers over a parts tray: the exploded groups draw together, briefly become a working movement, then drift open again as the reader leaves the bench.

Layered SVG Movement

The signature object lives in index.html inside #calibreSvg. Each component is a named .movement-part group with data-x, data-y, data-r, pivot coordinates, a name, and a function. initAssembly() in main.js reads those attributes, measures the theatre scroll position, smooths the progress with smooth(), and writes SVG transforms. That is why the baseplate, barrel, bridge, wheels, pallet, balance, jewels, and screws feel like twelve separate layers instead of a single flat drawing.

Running Train

drawGears() generates every tooth path with gearPath(), alternating outer and root radii around a circle. updateMotion() then drives the train at the displayed ratios: the barrel crawls, the center wheel multiplies by 8, the third and fourth wheels jump faster, and the escape wheel advances in six discrete locks per second. The pallet forks between two angles, the balance wheel oscillates as a 3 Hz sine wave, and the SVG receives a left/right tick state so the locking jewels visibly trade impulse.

Tourbillon, Loupe & Winder

The tourbillon section uses a second SVG with its own orbit map, dial ring, rose-gold carriage, miniature escape wheel, pallet, and balance. updateMotion() rotates #tourbillonCage as one complete carriage and counter-oscillates #tourbillonBalance inside it. The pass-three bench interactions live in initWinder() and initLoupe(): holding the crown button raises --torque, brightens the barrel torque arcs, and temporarily speeds the train while preserving its ratios; pointer movement over .movement-shell positions a code-drawn loupe with --loupe-x and --loupe-y. initTooltips() keeps every movement part and ledger item inspectable by hover, focus, Enter, or Space.

Palette & Type

The token system in styles.css starts with anthracite #17181c, tray black #101116, rose gold #c9906b, polished silver, dial cream #f6eedf, ruby, and blued-steel accents. The background layers combine fixed radial lamp light, woven velvet grain, ruled bench marks, and low-contrast metallic washes. Cormorant Garamond carries the tall manufacture headlines, Archivo keeps body copy readable, and Chivo Mono handles labels, spec math, and tabular numerals.

Reproduce This

Prompt an AI agent to build a pure HTML/CSS/JS luxury watch manufacture page with self-hosted serif, sans, and mono fonts. Ask for a code-drawn SVG movement with named layers, generated gear teeth, scroll-based exploded assembly, correct train ratios, a ticking escape and pallet, a 3 Hz balance, an independently rotating tourbillon, a crown-winding control, a pointer loupe, hover and keyboard inspection tooltips, velvet grain, bench-light gradients, a technical spec table, strong mobile composition, and reduced-motion plus document-visibility safeguards.