How the column was built.
STRATUM renders a sedimentary basin as a live cross-section. The whole thing is one HTML file: a canvas 2D deposition engine, no images, no libraries. This page opens it up — the palette dug from real rock, the two typefaces, and the little geology model that keeps the outcrop forever mid-formation.
01 The concept
A stratigraphic column is how a geologist writes down a rock face: each bed drawn to scale, oldest at the bottom, named by grain size and dated where it can be. STRATUM makes that column build itself. It is aimed at anyone who has stood at a road-cut and wondered how the stripes got there — the page's single job is to make deep time legible in a few seconds without lying about how slow it really is.
The subject is duration. So the design never finishes: beds keep arriving, storms keep cutting them back, and once in a long while a fault drops one half of the record against the other. Left in a tab it deposits a kilometre of rock a minute — a hundred million times faster than the real thing.
02 Palette — dug from the rock
Every colour is a real lithology. Nothing is chosen for prettiness; the section is the swatch card. The bright oxide-red is reserved for lines and marker beds, never for small text, so the log's captions clear 4.5:1 on parchment.
03 Type — condensed field hand
Two faces, arguing the same point: precision above, patience below.
Archivo is run at a narrow width axis (wdth 70–76) so headlines read like the stamped labels on a core box — tight, industrial, sure of themselves. Spectral handles the column log and body: a warm, slightly literary serif whose italics carry the field-note voice. The width and weight axes of Archivo are loaded live from the variable font, so one file gives the whole condensed scale.
04 The engine
The signature — a column that visibly deposits, cuts and faults — is a small physical model painted to an offscreen canvas.
- Accretion — each frame raises a depositional surface a fraction of a pixel and paints a fresh sliver: a graded fill (coarse, bright base to fine, dark top) plus scattered grain stipples whose size tracks depth in the bed. Beds finish at a target thickness and hand off to the next lithology in a transgressive cycle.
- Subsidence — when the pile reaches the upper third, the entire strata buffer is translated downward and old beds fall off the base. The basin floor sinks as fast as it fills, so the surface holds station while rock stacks beneath — and the resting frame is always a full, banded outcrop.
- Storm cut — an erosion event clears a jagged scoured slab off the top, draws an oxide unconformity line across it, and drops a conglomerate lag. Time is lost at the cut, exactly as in the field.
- Fault — the buffer is split at a vertical plane and one side is redrawn shifted by a random throw, offsetting every bed at once; a dashed sandstone fault plane marks the break.
- The log — an HTML sidebar rebuilt from the live bed list, youngest at top, each row naming lithology, thickness in metres and an age in Ma mapped to its geological period. Hovering a row outlines that exact bed on the canvas; the cursor reads out depth and rock type where it hovers.
- Discipline — DPR capped at 2, offscreen buffer for the strata, rAF paused on document.hidden with a clamped delta on return, a CSS gradient fallback if the 2D context fails, and a settled static frame under prefers-reduced-motion.
05 Three passes
Drove a full deposition run and watched the log. First pass fixed the resting state: the original built bottom-up live, so a cold load showed a near-empty basin for several seconds — added an instant prefill that deposits a full banded column (with one storm surface and markers already in it) before the loop starts, so the 7-second thumbnail is a complete outcrop. Tightened the type scale to a real condensed Archivo (wdth 70), pulled the sandstone surface-line brightness down so it read as water contact not neon, and rewrote every event caption in active, concrete voice.
Enriched the signature: graded bedding (coarse-to-fine grain gradient within each bed), wavy laminae, pebble lags in conglomerate, and rare marker beds — coal, ironstone and a pale volcanic-ash tuff — that interrupt the cycle and flag red in the log. Added the second-read details: a depth ruler down the left edge, a live cursor that reads metres-below-surface and names the bed under it, and the hover link between a log row and its band. Refined easing on the surface shimmer so it breathes rather than flickers.
Verified 375px: the log drops beneath the canvas and scrolls, the readout chips go two-up, nothing overflows. Confirmed reduced-motion renders the prefilled column and never starts rAF; document.hidden pauses the loop and the delta is clamped on return so a backgrounded tab doesn't dump a decade of sediment in one frame. Checked focus-visible on every link, the WebGL/2D fallback, and removed a redundant second surface glow (the Chanel rule). Final copy read top to bottom.
06 Colophon
One index.html, one guide.html, all CSS and JavaScript inline, no external assets but two Google fonts. No three.js, no GSAP, no canvas library — the deposition model, the offscreen buffer and the field log are hand-written vanilla JS in a few hundred lines.
Part of Generative Assets — a collection of procedural, single-file websites. Return to the column →