How it was made
PRECESSION is a fictional instrument-maker's showpiece: a brass armillary sphere set in a deep indigo sky, built to make one hard-to-hold fact visible — that the North Star is temporary. Its single job is to let you scrub 25,772 years and watch the celestial pole drift from Thuban to Polaris to Vega and home again.
Earth spins like a slow top. Its axis leans 23.44° off the plane of its orbit, and that lean itself rotates — one full circle every 25,772 years. So "north" in the sky is not fixed: the pole traces a wide circle among the stars, and whichever bright star it happens to pass becomes the age's pole star. The page is a single reading instrument. There is no navigation, no funnel, no product — just the armillary, a readout, and a scrubber. Turn the millennia and the geometry tells the truth.
The audience is anyone who has been told "the North Star is Polaris" and never learned it comes with an expiry date. The instrument answers by showing the whole circle at once and letting you ride the pole around it.
Every colour is argued from a brass instrument under a night sky. The concept's suggested small-text ink, #5A6A8E, measures only 3.36:1 on the indigo — below the 4.5:1 floor — so it was demoted to a line-only token (the precession circle and ticks) and two brighter inks were introduced for real body copy.
Cardo is a humanist old-style face cut for classical scholarship — engraved, faintly Renaissance, exactly the voice of a maker who labels an armillary by hand. Its true italic carries the two bright words.
IBM Plex Mono for every epoch, angle and count. Tabular figures so the numbers don't jitter as you scrub, and a machined counterpoint to Cardo's warmth.
The scene is three.js r160 (WebGL). A background of ~1,500 shader-drawn points is the fixed sky. The armillary is built from TorusGeometry rings in a physically-shaded brass, lit by a warm key and a cool rim so the metal reads. If the WebGL context fails, a static CSS armillary and starfield stand in — never a blank frame.
The signature is pure geometry. The ecliptic pole E is fixed; the north celestial pole sits ε = 23.44° away from it and rotates around it with the precession phase:
NCP(φ) = cos ε · E + sin ε · (cos φ · R + sin φ · (E × R))
Each frame the equatorial ring and the polar axis are quaternion-aligned to NCP(φ), so the axis tip rides a small circle among the stars — the traced precession circle you see drawn in chart-ink. The seven named pole stars are placed at NCP of their own epoch's phase, so when you scrub to −2787 the pole falls exactly on Thuban; at 2102, Polaris; at 13727, Vega. The nearest star and its offset in degrees are computed live by dot product. As a second read, the equinox marker sits at E × NCP and slides through the zodiac ring as the pole turns, and the current pole star's halo swells so the eye catches which star holds the north.
Both the range slider and a horizontal drag on the sphere set the year; left alone, the pole drifts at ~58 years a second so the instrument is always mid-span. Reduced-motion stops the drift and renders a single settled frame at Polaris, while scrubbing still works on demand. DPR is capped at 2, the canvas reframes on resize, and the loop pauses when the tab is hidden.
Caught the contrast trap first: the spec's #5A6A8E ink is only 3.36:1 on indigo. Reserved it for lines and marks and introduced #C6CEE3 (body, 10:1) and #8E9AC0 (secondary, 6.4:1). Set a deliberate type scale, tightened the hero to a single tall Cardo column, and balanced the brass against the cold sky.
The pole apparatus was originally at sky-radius 120 — the traced circle and every pole star sat off-frame, so the signature was invisible. Rescaled it to sit just outside the rings, bringing the circle, the seven star beads and the live axis into view. Added the sliding equinox node, a solstitial colure ring, a slow breathing camera, and a pulse on the current pole star's halo as a second-read cue.
Compacted the hero so the readout and scrubber clear the fold — the resting thumbnail now shows the whole instrument mid-drift near Polaris. Applied the Chanel rule: labelled only Thuban, Polaris and Vega in 3D (the rest read as beads) to kill the top-right label pile-up, and hid minor tick labels below 640px. Confirmed the reduced-motion static frame, focus-visible rings, DPR cap, resize reframe, rAF pause on hidden, zero console errors, and no overflow at 375px.