ORBITAL HOUR

Field Guide · № 07

How the day
was wound

ORBITAL HOUR is a clean-room rebuild of a single world-concept: a hilltop horological observatory where winding a brass crown advances the sky through a gear train in true ratio. This page documents the brief it was given, the one technique it pushed until it felt impossible, and what three hostile critique passes changed.

01 · the brief received

W2-07 — orbital-hour

The showcase runs blind duels: a second model built this same concept elsewhere, unseen. Only the brief and the design constitution were shared. Here is the essence of what was handed over.

Concept
A public observatory of wound time. The day itself is clockwork; visitors wind a crown and the sun, moon and stars advance in geared ratio.
Signature
Drag-to-wind. A crown you drag (or arrow-key) that winds the whole scene through dawn → dusk → night via a visible SVG gear train in true ratio.
Complications
Sunrise dial, moon phase, sidereal drift, and a mainspring tension bar that eases back over time.
Palette
obsidian #0c0a09 · bone #e9e2d6 · aged gold #b98a2e · verdigris #4e8a78
Type
Italiana display · Sora text · JetBrains Mono for every dial numeral
Mood / voice
Patient, brass, nocturnal — the keeper of instruments, precise and a little reverent.

02 · the signature, executed deeply

One clock hangs off one number.

The whole observatory is a pure function of T — minutes of wound time. Winding changes only T; the sky gradient, the sun and moon positions, three dial hands and the entire gear train are recomputed from it every frame. No tweens fight each other because there is nothing to tween — there is one truth and everything reads from it.

The gear train is real arithmetic, not decoration. A 16-tooth crown pinion drives a 24-tooth idler (which exists only to correct direction) into a 128-tooth great wheel. 16 ∶ 128 is exactly 1 ∶ 8 — so eight turns of the crown are one whole day. Every wheel in the SVG carries its true ratio as a data attribute, and one function spins them all:

index.html — the entire kinematics, verbatim
/* every wheel carries its true ratio in data-m:
   crown 8, idler -5.333 (=-128/24), great wheel 1 */
const rotors=[...document.querySelectorAll('[data-m]')]
  .map(e=>({el:e, m:+e.dataset.m}));

function spin(){
  const base = T/1440*360;        // one day = one full turn
  for(const r of rotors)
    r.el.setAttribute('transform',
      'rotate('+(base*r.m).toFixed(2)+')');
  cdisc.style.transform='rotate('+(base*8)+'deg)';
}

Because the crown disc, the hero train and the diagram train all share data-m, they can never desynchronise — the ratio is enforced by the DOM, not by hand. A gravity-remontoire base drive keeps the wheel breathing even after the mainspring is spent, so nothing on the page is ever fully still.

03 · the critique passes

Three passes, one hostile eye.

Each pass shot the live page at 1440 and 390, read every frame like an art director looking for the reason to reject it, fixed everything found, then added one deliberate complexity upgrade.

Rhythm & the dead bands

  • found Cavernous black voids between the instrument cards, the gear train and the footer — the page read as if it had holes.
  • found Footer weight was a -- KB placeholder; mobile nav wrapped and crowded its links.
  • found The auto-run stopped the moment the mainspring emptied (~24s), freezing the lower sections — a motion-mandate defect.
  • fixed Tightened section rhythm; printed the real page weight; shrank the mobile watermark; added a gravity-remontoire base drive so the day never stalls.
  • upgrade Live escapement dividers between chapters — small gears cut from the same ratio system, turning in every band that used to be empty.

Legibility & the train diagram

  • found The big gear-train diagram's right-hand leader labels ran past the panel and clipped — "your hand", "direction", "one day" all lost their endings.
  • found Mobile navigation still wrapped into a cramped two-row block; the catalogue number № 07 forced the break.
  • fixed Shifted the whole gear cluster left and shortened the leader captions so every label sits inside the frame; hid the serial on mobile and locked the links to one row.
  • upgrade The observatory beam now sweeps the night sky — the telescope scans on a slow sine, instead of merely fading in.

Night depth & the keeper's egg

  • found The night sky, though correct, was thin — twinkling dots and one meteor, but nothing to reward a visitor who winds deep into the dark.
  • found The mainspring readout could wrap at tablet width; a stray Safari prefix was missing on the frosted panels.
  • fixed Locked the readout to one line, added the -webkit- backdrop prefix, and re-verified every control's focus ring and keyboard path.
  • upgrade A procedural asterism — the observatory's namesake constellation — now rises with the darkness in a clear patch of sky. And a keeper's aside greets you at 8, 24 and 64 turns of the crown.

04 · what it proves

SVG kinematics can carry a whole world.

No WebGL, no framework, no external image — one self-contained file under 90KB, every pixel procedural. The signature is a single idea pushed until it stops feeling like a trick: a website you literally wind, whose sky obeys a gear ratio you can see turning. That is the argument for the horology vertical, and for craft over stock.