Take a mechanical watch apart in your browser, gear by gear

Somewhere in your family there was a person who took the clock apart to see how it worked and could not put it back together. This page is for that person, with the putting-back-together solved.

Mechanical Watch, by Bartosz Ciechanowski, renders an entire watch movement in your browser: mainspring, gear train, escapement, balance wheel, all of it 3D, all of it live, every mechanism driven by sliders you drag to run time forward and backward through the mechanics. You do not read about how the escapement stops the gear. You stop it, yourself, and feel the logic click.

The internet noticed. The essay went up on May 4, 2022, and its Hacker News thread sits at 4,298 points, which puts it among the most upvoted pages in that site's history.

Hand-rolled WebGL, no engine

I went through the source expecting to find a framework and found a craftsman. The page is 89KB of HTML without a single canvas element in it; every figure is conjured at load time by two hand-written scripts, a 34KB base library and a 327KB watch.js. Search those files and you find raw WebGL calls, createShader and drawArrays, and no trace of Three.js or any other engine. The dozens of interactive figures run on code with no dependencies at all.

The care goes all the way down. There is even a global toggle wired into the page that pauses every animation at once, for readers who want the figures to hold still.

That is the whole stack: hand-modeled geometry, hand-rolled rendering, prose in between, and the same treatment has been given to engines, airfoils, sound, bicycles and the Moon. Each essay takes months. His archive shows one to three a year, with the bicycle essay standing alone in all of 2023, and his Patreon charges per article rather than per month, from $4.50 an essay, with 543 people currently paying. A subscription that only bills when the work exists is its own kind of receipt.

The bar it sets

The craft lesson for anyone who explains things for a living: the interactivity is never decoration. Each slider exists because the concept it drives is genuinely easier to grasp in motion. That is the bar. Most interactive content fails it. This page is why we know the bar exists, and the blog where every diagram is a toy you can grab clears it by the same means, live widgets instead of pictures.

If the hand-rolled part sounds like the fun part, WebGL Fundamentals teaches the same no-magic approach from a blank file: raw WebGL, no frameworks, exactly the road Ciechanowski walks.

Clear an hour. It will take twenty minutes and you will spend the other forty dragging the balance wheel back and forth like the tinkerer you were always going to be.

More machinery worth loading: the datacenter in the hallway runs eighty-nine apps behind zero open ports.