Guide · Colophon

Building EON How we drew 4.6 billion years on a single logarithmic line and made a variable typeface carry the weight of deep time.

The concept

EON is a public-science instrument that lays the whole history of Earth end to end and lets anyone scrub it. Its one job: make deep time felt in a few seconds — the eras swelling and thinning in a variable typeface as you zoom, the five great extinctions cut in as scars, and human history hiding as a hairline you have to magnify a million-fold to find. It's built for museums, science communicators, and the merely curious.

The problem is scale. Draw 4.6 billion years fairly and everything you have a name for piles into the last pixel. So the axis is logarithmic — each step left is another factor of ten — and the recent world finally gets room to breathe.

The signature — a variable font that fits its span

Every era, period and eon label is set in one typeface, Archivo, driven live along both of its axes. A band's on-screen width decides its lettering: a stratum squeezed to a few pixels is drawn light and condensed and nearly transparent; a stratum that fills the view is drawn heavy and wide and solid. Zoom, and the names visibly stretch to fit — the whole timeline re-letters itself as you move.

The map is a single smoothstep from on-screen pixel width to 'wght' 300–820 and 'wdth' 70–125, per band, every frame. Below a width threshold the label fades out entirely, so only the strata actually in focus carry type — which keeps the deep, compressed past clean and lets detail bloom exactly where you look.

Technique

• SVG timeline. One coordinate system sized to the container in real pixels; x = (L_left − log₁₀(years)) / span × width. Elements are created once and updated by attribute each frame — no per-frame DOM rebuilding.
• Logarithmic axis. Domain runs from 10 years ago to 4.6 Ga. On a log scale the entire Precambrian folds into a corner while the Phanerozoic — every animal you can name — spans most of the width.
• Archivo variable font (wght 100–900, wdth 62.5–125), loaded from Google Fonts and steered by font-variation-settings. The genuine width axis is what makes the morph read as stretching, not just thickening.
• The honest strip. A second, linear minimap under the axis draws the same 4.6 Ga to true scale — where the Phanerozoic is a thin gold band and all of recorded human history is a sub-pixel red hairline. The log axis makes us findable; the strip reminds you how small that is.
• GSAP runs the entrance (a pull-back from the end of the dinosaurs to the whole record) and a slow idle breath. Pointer, wheel, pinch and keyboard all drive zoom and scrub; the loop pauses on document.hidden.

Palette

Argued from sediment and shadow, not decoration. The bright gold is reserved for lines and marks; body copy takes a light parchment ink so it clears 4.5:1 on the near-black ground — the ink/line split, run in the dark direction.

Type

Archivo variable carries the whole personality — display for the wordmark and headings, and the living face on the axis. IBM Plex Mono is the instrument's data voice: dates, readouts, tick labels and captions.

Iteration log