How the Patient Machine was made

The concept

Harlin & Sons, Instrument Makers is a fictional Perth workshop that cuts brass orreries. The page has one job: put a working instrument in your hands. Six planets run on their true sidereal periods; drag any one of them and you are turning time itself — the whole train answers, gears, pinions, Moon and all. Give it a date between 1600 and 2399 and it winds to that sky.

Palette

Type

Techniques

The orrery is a single runtime-built SVG. A path generator cuts trapezoidal gear teeth from a module and tooth count (gearPath(r, N)); six coaxial wheels of 13–33 teeth each mesh an eight-leaf pinion at its rim, and the pinion's rotation is solved from the meshing condition (−Nw/Np times the wheel angle, phased so tooth interleaves tooth along the line of centres).

Positions are astronomy, not animation: each planet carries its J2000 mean elements and an equation of centre (2e·sinM + 1.25e²·sin2M), so Mercury genuinely hurries at perihelion. Dragging inverts the same maths — pointer angle change is divided by that planet's instantaneous angular speed dλ/dt to get a change in days, and one re-render moves every wheel, arm, pinion and the Moon from the new epoch. That inversion is the whole trick: drag Jupiter a hand's width and Mercury whips through laps, because a degree of Jupiter is forty days. GSAP supplies only the date-winding tween and the entrance; release velocity is sampled by hand for the flywheel fling. There is no canvas, no WebGL and no image anywhere on the page.

Second reads: Halley's engraving brightens as its 1986 / 2061 perihelia approach; the Moon laps a 27.32-day wheel; the escapement's balance wheel only ticks while time runs.

Iteration log

• Pass 1 · Craft

  Verified every wheelwork fraction against the real sidereal periods (13:54, 8:13, 32:17, 83:7, 265:9 — all within ±0.08%, as the drift column admits). Removed one of two felt texture overlays (one reads as cloth; two read as noise). Added a no-JS guard so scroll-revealed copy is never left invisible, and tightened the focus ring on the planet hit targets.

• Pass 2 · Depth

  Planets now warm on hover and glow while held — the machine acknowledges your hand. Engraved a small italic take hold beneath Jupiter that rides the arm and burns away on first grab. Drag and keyboard turns now write the reached date back into the date field, and each planet reports its longitude to screen readers as a proper slider.

• Pass 3 · Hardening

  Added touch-action:none so dragging works on phones instead of scrolling. Clamped time to the machine's stated 1600–2399 range — the escapement now politely holds at the end of its wheelwork rather than overflowing the calendar. Re-verified: zero console errors, J2000 longitudes correct in headless Chrome, no horizontal overflow at 375px, reduced motion renders a settled machine, and the loop parks when the tab hides.

Colophon

Designed and built in one sitting by Sapience Analytics — concept, copy, gear maths and all. Part of the Generative Assets collection.