I am a collector of books: it’s one of the few areas where I don’t practice minimalism: German Shepherd fur and PDFs being two other prominent ones. I read most of the books I get my hands on, but the current rate of collection far outpaces my reading. My habits tend to follow whatever I come across from reading the things I’m interested in, like a rapidly inflating ouroboros of literature.
One of my recent book purchases, through an incredibly well timed Thriftbooks search, is Watches: A Guide by Hodinkee. As I gazed lovingly through a chapter on chronographs, I came across the Louis Moinet Compteur de Tierces — a watch built in 1816, lost for nearly two centuries, and certified by Guinness as the earliest known chronograph. And nobody knew until 2013.
The book
The irony of time slipping past such a precise time keeping instrument was more than I could handle. The math of thirty rotations a second, for two hundred years.
I put the book down.
A couple weeks earlier I had come across mechanical-pencil.com — a site that takes objects most people throw in a junk drawer and explains them with the obsessive care it deserves. Deep history. Detailed diagrams. The engineering logic behind every decision. Pez dispensers, zippo lighters, and of course, the mechanical pencil. It made me want to do that for a watch. After reading the Louis Moinet excerpt, I realized I wanted to do it for this watch, specifically.
The build
Of course I wanted to do it with AI.
So I photographed the Compteur de Tierces, handed the images and some research to Claude, and asked it to build a working model. I wanted to understand the mechanism — not just that it oscillated at 30 Hz, but why that number mattered, what problem it was solving, and how a French watchmaker in 1816 managed to build something that the industry wouldn’t catch up to for another 195 years.
What follows is a scrollytelling proof of concept: animated diagrams of the foudroyante hand, the double-action shuttle, and the meridian transit it was built to time. Built by someone who wanted to go deeper than the chapter did, with the tools and time that could make it happen.
The Process
What I was actually trying to do
The Hodinkee chapter gave me the headline: Louis Moinet built a chronograph in 1816 that oscillated at 216,000 vibrations per hour — thirty complete rotations of the foudroyante hand every second — and nobody knew until 2013. That’s a hell of a fact. But the chapter didn’t go far enough. I wanted to understand the why behind the numbers. What problem was Moinet solving? Why 30 Hz specifically?
These were mechanical questions not in line with the book’s aesthetic and focus. And they require a kind of explanation that text alone struggles with. So the goal was straightforward: turn 2D images of a watch I’ll never hold into animated, interactive diagrams that could teach me how it works. A learning tool, built for myself, using AI to do the parts I couldn’t.
My quality bar was equally simple. If I could build it with minimal guidance, get a result that genuinely helped me understand the Compteur de Tierces, and not get frustrated doing it — maybe even enjoy the process — it was a win. This was always a proof of concept. The fact that it turned out as well as it did was a surprise.
How it came together
I started by photographing the Hodinkee spread, handing the scanned images and some supplemental research to Claude Code, and asking it to build a scrollytelling explainer in static HTML, CSS, and JavaScript — no frameworks, no build step. GSAP and ScrollTrigger handled the animation and scroll choreography. The site went through seven build phases over the course of several working sessions.
| Phase | What got built | Key technique |
|---|---|---|
| 1. Scaffold & Hero | Two-column layout, cropped dial photo, foudroyante hand overlay sweeping 1 rev/sec | mix-blend-mode: screen on SVG overlay |
| 2. Prologue & Purpose | Typography-only prologue; astronomical transit diagram showing what Moinet was timing | Procedural SVG — concentric rings, ecliptic arc, transit moon dots |
| 3. Anatomy Exploded View | Six stacked layers (case back → hands) that separate on scroll | GSAP ScrollTrigger pin with scrub: 0.8 over 2400px |
| 4. Beat Visualizer | Three-column comparison: 1 Hz, 4 Hz, 30 Hz — rotating balance wheels at each speed | The 30 Hz column blurs into continuous motion. That’s the “oh” moment. |
| 5. Shuttle Mechanism | Interactive SVG of the double-action start/stop/reset mechanism | Three buttons trigger different GSAP choreographies; auto-starts on scroll |
| 6. Annotated Dial | Real photo with SVG hotspot overlay, bidirectional hover sync | CSS @keyframes pulse + JS event delegation |
| 7. Legacy Timeline | Six entries from 1816 to present, vertical timeline with staggered scroll reveals | The 2013 Neuchâtel authentication styled as the key node — filled dot, gold glow |
Every tick mark, gear tooth, and scale division was generated procedurally with JavaScript loops rather than hand-drawn. A for loop drawing 60 evenly-spaced tierce marks is faster, more accurate, and trivially adjustable compared to placing them manually in an SVG editor.
What broke, and what I learned fixing it
The build wasn’t clean. Several patterns failed repeatedly before I understood why.
The aspect-ratio trap. CSS aspect-ratio: 1 does nothing if the element has no intrinsic or explicit width. In a flex or grid context where the parent doesn’t constrain the child, the box collapses to 0×0. This bit me on the hero image, the shuttle diagram, and the dial container — the same mistake, three times, before I recognized the pattern. The fix: always pair aspect-ratio with width: min(100%, NNNpx).
Z-index and DOM order. The anatomy exploded view stacks six SVG layers on top of each other. I had them in DOM order (hands first, case back last) but forgot to set explicit z-index values. CSS stacked them in the reverse of what I intended — the case back rendered on top of the crystal. A two-line fix, but only after I understood that DOM order and visual stacking order aren’t the same thing without explicit z-index.
Scroll animation direction. GSAP’s toggleActions: 'play none none reverse' sounds right for a scroll-driven reveal — play on enter, reverse on leave. In practice, it makes elements disappear when you scroll back up, which feels broken on a site meant to be read top-to-bottom. Switching to once: true on every reveal fixed the experience immediately. For storytelling, fire once and leave it visible.
Screenshot lies. The preview tool captures at 2× device pixel ratio but reports logical coordinates. Elements looked half their actual size in screenshots, which sent me chasing layout bugs that didn’t exist. The real debugging tool was getBoundingClientRect() via JS injection — actual pixel coordinates, no ambiguity.
SVG coordinate hell. SVG has no layout engine. Every component in the shuttle mechanism diagram had to be positioned by explicit XY translation within a shared viewBox. When the escape wheel, balance wheel, and pallet fork ended up bunched in the left half of the container with the shuttle lever floating off to the right, there was no CSS trick to fix it. The solution: sketch the desired layout on paper, define a coordinate grid, then write the SVG to match. Spatial reasoning first, code second.
What’s still rough
This is a proof of concept. Six issues remain open: the foudroyante hand needs an offset adjustment to match the actual photo crop, the planet transit path is static when it should animate, the anatomy layers need more mechanical detail, the shuttle components are still misaligned in SVG space, the dial hotspots could be larger and more prominent, and the timeline reveal timing needs tuning. I know where each one lives in the code. They’re polish, not architecture.
Where this goes
In the process of building this, I learned more about SVGs, scroll-driven animation, and GSAP than I expected. But I also learned a lot about watchmaking — the actual point. Building the beat visualizer forced me to understand why 30 Hz matters (temporal resolution for astronomical observation). Building the shuttle mechanism forced me to understand how you stop a timer without disturbing the going train. The act of building was the act of learning.
That loop — see something intricate, break it apart, animate the explanation, understand it by building it — is the thing I want to repeat. Take a picture of a mechanical movement, a jet engine cross-section, a camera shutter. Feed it to an AI that can generate exploded views and animated diagrams. Get back something that teaches you how it works.
If the loop gets fast enough, it stops being a weekend project and starts being a tool. Something that could live on AR glasses — point at a cocoon on a branch and see the butterfly forming inside, with an overlay explaining the lifecycle. Point at a bridge truss and see the load distribution. It’s very JARVIS. It’s also very much what I mean when I talk about using technology to augment our experience of the world, not replace it or disconnect us from it.
The Compteur de Tierces was built to time celestial transits — to measure the universe with greater precision than anyone had managed before. The fact that I can sit at a desk two centuries later and rebuild its mechanisms as interactive diagrams, using tools that didn’t exist two years ago, feels like the right kind of continuation.