Case Study

Meridian · Calibre 01

A working watch movement, built entirely in code

A browser-native 3D specimen of a fictional hand-wound tourbillon, framed as a plate from a watchmaker's reference folio. Nothing is imported. Every gear, jewel and texture, and the clockwork moth that lives on the bench, is generated in code. The mechanism runs on its own logic: real tooth counts, driven from a single beat counter. Visitors can wind it, take it apart, tour it part by part, and watch it run down.

View Live ↗
0Imported models or textures
60:1Gear train, centre wheel to tourbillon
The Meridian watch movement under a night sky, rendered in three.js

Overview

A deterministic kinematic model, not an animation. The escapement, tourbillon and gear train all derive from one integer beat counter at 8 beats per second, and the train is solved backward from the cage by real tooth counts: 60:1 from the centre wheel to the cage, 12:1 between the hands. The whole scene is procedural: 27 parts, 555 instances and 51 PBR material families, with perlage, Geneva stripes and engravings baked to canvas at load, at about a million triangles per frame. Material changes happen per fragment in custom shaders. A re-plating wave sweeps a new finish across the movement from the crown, and a terminator dissolve turns day into night. The build was spec-driven. I wrote fifteen specification documents with a 41-item acceptance list, an eight-step review ritual that gated each of twelve phases, and an override order for when rules collide. Perplexity Computer built it across those phases and seven review rounds. I then took it into Claude Code and added a hidden menu of 23 scripted camera takes, so the page can film its own commercials.

Key Features

  • 01Mechanics from one beat counter: the escapement, tourbillon and gear train all follow an integer beat counter solved by real tooth counts, with no keyframes anywhere in the mechanism
  • 02Wind it, watch it stop: hold the crown or press W and the ratchet and click turn. The reserve drains with every beat, and at zero the balance winds down to a stop until it's wound again
  • 03Fully procedural: no imported models or texture images. Gears are generated from module and tooth count, and surface finishes and engravings are baked to canvas at load
  • 04Shader-level transitions: a re-plating wave swaps Ice, Rhodium and Rose finishes per fragment across the whole movement, and day to night runs as a reversible terminator dissolve into a procedural night sky
  • 05Take it apart: the Dissected view fans the movement out by layer with labelled leaders. Click any of 27 parts for its card, or take a six-stop guided tour
  • 06A living companion: a procedurally modelled clockwork moth that perches on moving parts, flies, and reacts to the movement's state, starring in a 12-second opening film where the watch assembles around it
  • 07A page that films itself: a hidden reel menu of 23 scripted takes with a camera director, focus pulls and an on-page pointer that clicks the real controls, all frame-repeatable
  • 08Built by an AI agent under a written spec: fifteen documents, a 41-item acceptance list, review gates on every phase, and seven review rounds, then a Claude Code pass for filming and sharing

Built With

three.jsGSAPJavaScript ES ModulesCustom GLSL ShadersPerplexity ComputerClaude CodeVercel