Making things since 2011
0009design6 min

Seven wheels, no clock hand

A round dial with a pointer hand always reads like a wristwatch, even when it is driving software. Breaking the silhouette into a tonneau chassis and a 6 Hz gear train turned a timepiece into an engine.

When software wants to tell you it is working, its default answer is a spinner. A glowing ring, a pulsing orb, or three dots bouncing in a white rounded box.

I needed a two-second mark to open and close a technical film. I built the modern version first. A clean circle, a radial sweep, a soft bloom. Every pixel was sharp, and none of it had weight. It looked like a voice assistant waiting for a prompt, or a fitness ring closing on a wrist. You could have sped it up or reversed the curve and the eye wouldn't have felt the difference, because nothing inside it had mass.

A machine that does real work shouldn't borrow its grammar from a loading screen.

Two disciplines solved the problem of showing invisible work inside a confined frame long before software needed to. One is haute horlogerie in the valleys of the Swiss Jura. The other is Formula 1 telemetry on the pit wall. Neither uses a pulse to show power. One uses a gear train under tension, where every wheel is bound by the pitch circle of the wheel beside it. The other uses high-contrast registers, where a number only moves when a state actually locks.

So I threw out the circle and built an engine in code, drawn procedurally at 2× resolution, tooth by tooth, frame by frame, with zero 3D renders and zero stock art.

If an artifact is built by an engine, it shouldn't introduce itself with a spinner.

Kill the round dial

The first trap was the silhouette. For five builds, I kept trying to make a circular case work. I added a brushed bezel, eight five-lobe titanium screws, and a central pointer hand.

It failed every time. The human eye has a four-hundred-year reflex. The moment it sees a round ring with a hand pointing at three o'clock, it reads wristwatch. I wasn't building a timepiece. I was building an engine.

In watchmaking, when you want to break out of the dress-watch reflex and expose the architecture of a chassis, you abandon the circle for the tonneau, the curved barrel-rectangle where the case acts like the carbon monocoque of an F1 car.

Switching the silhouette from a circle to an upright superellipse (1 to 1.18) changed the posture of the entire piece. The center hand disappeared. In its place ran a diagonal, step-milled rose-gold bridge spanning from upper left to lower right, bolted directly into a counter-diagonal Grade 5 titanium cross-frame.

Once the clock hand was gone, the eye stopped asking what time it was and started asking what the machine was driving.

When a metaphor starts hijacking the artifact, don't polish the metaphor. Break the silhouette. A circle with a hand tells time. A chassis with a bridge transfers force.

True pitch ratios, not decorative gears

Nothing looks cheaper than "steampunk" gears, random cogs pasted onto a background that spin at arbitrary speeds without ever transferring a gram of torque.

In a real calibre, motion is a ledger. If the center barrel has 48 teeth, the intermediate wheels have 28, and the pinions have 14, then you do not get to choose how fast the pinions turn. The math chooses for you.

python# 6 Hz escapement step (0.05s cubic ease-out, 0.116s hold)
barrel_step  = -2.00                    # 48 teeth (driving)
wheel_step   = -barrel_step * (48 / 28) # +3.428° (rhodium intermediate)
pinion_step  = -barrel_step * (48 / 14) # +6.857° (rose-gold pinion)

Every sixth of a second, the escapement releases. Each step completes in the first 0.05 seconds on a cubic ease-out, then holds dead still for the remaining 0.116 seconds until the next release.

At 30 frames per second, that 0.116 second hold is everything. Smooth, continuous rotation looks like a CSS animation. A 6 Hz step-and-hold looks like spring tension fighting a pallet fork.

Animation floats. Mechanics step, lock, and hold.

Why full-spectrum colour kills metal

In build six, I made a mistake that almost ruined the metal.

I wanted the three intermediate wheels and the central tourbillon cage to stand out against the 18k satin rose gold, so I gave them a chromatic thin-film shader, an "oil-slick" finish that shifted across cyan, magenta, neon green, and yellow. Beside it, I set six circular white enamel chips inside the upper-left selector drum.

On a dark obsidian canvas (#0B0E14), full-spectrum rainbow metal doesn't look like Swiss horology. It looks like an RGB gaming mouse. And bright white circles next to brushed rose gold look like plastic poker chips.

Look at a real high-complication movement or an F1 suspension upright. Contrast never comes from saturation. It comes from material separation and specular discipline.

  1. 18k satin rose gold (#F7D4B6 → #C98A63 → #4A2A18). Warm, vertically brushed, carrying the primary bridge and the outer tonneau bezel.
  2. Brushed and mirror-polished white rhodium (#FAFCFF → #78808E → #282E3A). Cold, razor-sharp, carrying the 28-tooth wheels and the three-arm cage, with at most a 5% sapphire-ice tint (#A5C4FF) on the brightest bevels.
  3. Micro-blasted Grade 5 titanium (#2A303C). Matte, structural, carrying the load-bearing struts and the recessed selector drum.

I stripped the white chips down to dark recessed obsidian medallions (#0D1017) ringed in 1.5 px platinum collets. Five of the six marks sit dormant in muted pewter (#7D8590). Only the single mark indexed under the pointer tooth lights up in alabaster (#F8FAFC) and champagne gold (#FFD68A).

The moment the rainbow disappeared, the rose gold gained physical weight.

When everything shines in colour, nothing looks like metal. Let polish and shadow do the work of paint.

The two-frame cascade, and why 1.5 px is a lie

The engine has three moving complications linked along the diagonal bridge. An indexing drum at the top left, a sliding carriage riding a recessed carbon rail down the spine, and an octagonal odometer gate at the bottom right.

In the first motion pass, all three started moving at 0.35 s and locked into place on the exact same frame at 1.10 s.

It felt fake. In the physical world, force takes time to travel through a train. A relay does not close at the same millisecond the switch is thrown.

I rebuilt the lock as a mechanical cascade.

  • The Index (0.35 s to 0.98 s). The upper-left drum rotates 60° anticlockwise and locks first at 0.98 s, lighting the active medallion under the platinum index tooth.
  • The Transfer (0.35 s to 1.06 s). A rose-gold carriage steps down the four stations of the rail on three quint ease-out curves, charging a 1.5 px sapphire-indigo fibre-optic filament (#EEF2FF) behind it while leaving the track ahead at a dim 25% standby trace. It slams into the final socket at 1.06 s.
  • The Strike (1.08 s). The tourbillon's caliper needle swings into the lower-right gate and strikes at 1.08 s.
  • The Detent Overshoot (0.90 s to 1.15 s). Triggered by the strike, the lower-right cylinder rolls upward into its locked plate at 1.10 s, overshoots its detent, and rebounds to dead center by 1.15 s.

Two bugs bit me in that final 0.25 seconds.

The first was sub-pixel politeness. I originally set the mechanical overshoot on the lower-right drum to 1.5 px. On a 27-inch monitor at 2× zoom, 1.5 px looked refined. On a 9 by 16 phone screen, 1.5 px scaled down to less than 0.7 px, completely invisible to the naked eye. I had to push the overshoot to 3.5 px (7 px at 2×) and expose the departing edge of the previous plate scrolling out of the top of the window before the eye actually felt the physical stop.

The second was the optical illusion of vertical weight. When I dropped a simplified 160 px version of the engine into a system diagram with a heavy caption underneath it, my eye swore the horizontal input leads were hitting the case 12 px below center. I went to nudge the engine down, then plotted a 1 px red guide wire across row 411 of the canvas first. The wire passed dead through the left five-lobe spline screw, the flange tick, the tourbillon arbor, and the right spline screw. My eye had been tricked by the caption mass below the bezel.

In precision layout, you trust the micrometer, not the squint.

Serializing the artifact

When a piece of software generates an artifact, a video, a certificate or a chart, the industry reflex is to slap a watermark in the corner. A floating badge, or a shimmering sticker that begs the viewer to notice the tool.

That is free-tier thinking.

When a watchmaker finishes a movement in Les Breuleux or Geneva, they do not paste a holographic sticker onto the sapphire crystal. The serial is engraved into the movement itself, where it rewards a close look and never interrupts a casual one. So the engine carries a brushed platinum plaque bolted into the lower-left bridge with two micro-screws, and a serial hallmark etched into the titanium chamfer at 22% opacity, invisible until the light catches the bevel at a boundary.

Luxury never begs for credit. It serializes the artifact.

What I'd keep

  • Break the silhouette when the metaphor gets too literal. If a round dial makes an engine look like a watch, move to a tonneau chassis and replace the clock hand with a load-bearing bridge.
  • Let tooth counts dictate the animation curves. True pitch ratios (48 / 28 / 14) and a 6 Hz step-and-hold give code-drawn metal physical mass.
  • Ban full-spectrum gradients on metal. Use material contrast, 18k satin rose gold against cold white rhodium and micro-blasted Grade 5 titanium, and keep five out of six indicators dark so the active state commands the eye.
  • Stagger mechanical locks by 40–80 ms. Force travels sequentially (Index → Carriage → Caliper → Gate), and a detent needs a 3.5 px overshoot to read on a phone screen.
  • Hallmark the bevel, never watermark the glass. If the machine built the work, stamp the serial into the frame and let the precision speak for itself.