Guide · How it was made

Building OXIDE

A corrosion observatory. The single job of the page is to make one slow, invisible process — iron oxidising — watchable: a mild-steel coupon rusts across compressed decades while a live front consumes the bright metal. Everything else on the page stays quiet so the plate can speak.

01

The signature

The plate is a bistable reaction–diffusion field solved on a canvas grid — an Allen–Cahn front. Every cell holds one scalar φ that is either metal (0) or rust (1); the only stable states are those two, and diffusion drags the boundary between them into fresh steel. Corrosion is nucleated at the coupon's scratches (φ = 1) and propagates outward as a filled, blooming front, not a stain.

∂φ/∂t = D ∇²φ + r · φ(1−φ)(φ−a)
a = 0.10 … 0.40 per cell — a spatially varying threshold sets the local front speed

A per-cell threshold a, drawn from a smoothed noise field, makes the front ragged and organic: where the metal is tougher the boundary crawls, stranding bright islands that hold out before they too are taken — the page's second-read detail. The reaction–diffusion micro-structure is deliberately not rendered raw (it reads as circuitry); instead the φ field is lightly blurred into a filled rust body, aged from a hot corrosion edge to spent dark oxide, mottled by the same noise. The brushed-steel base, its diagonal sheen and the four corner rivets are drawn procedurally — no raster images anywhere. A live counter reads percent corroded and elapsed years; the field loops from clean to consumed on roughly a 24-second cycle (~200 compressed years).

02

Palette

Argued entirely from the subject: cold rolled steel, the iron beneath it, and the oxide it becomes. The bright corrosion is reserved for marks and the active front; small text runs on a lightened steel ink so body copy clears 4.5:1 over the dark ground.

Raw iron
#26292E
The ground. Cold, near-black iron the whole page rests on.
Steel
#7C848C
The bright metal being consumed — brushed, faintly cool.
Corrosion
#B4562A
The living front. Accent for marks, the plate's active edge.
Rust ink
#6C3316
Spent oxide, and the dark ink for small text on light steel panels.
03

Type

OXIDE
Archivo Expanded · 900

A heavy, wide industrial grotesque for the wordmark and headings — it reads like stamped steel stock, broad and load-bearing. Set uppercase with tight tracking so the display feels machined, not decorative.

54.0%
0197 yr
JetBrains Mono · 400–700

Every readout, label and datum is monospaced with tabular figures so the climbing counters hold their place and the page reads as an instrument, not a brochure. Body copy runs in Archivo regular for calm legibility.

04

Iteration log

Pass 1
Craft
Contrast, colour, accuracy
  • Small steel labels measured 3.85:1 on the iron ground — added a dedicated steel-ink token (#9DA4AB) for all sub-body text, lifting nav, HUD keys and meta to 5.8:1.
  • Specimen-panel rust text sat at 4.43:1; lightened the light-steel cells and darkened the rust ink to #6C3316 for a comfortable 5.6–6.2:1.
  • Brightened the base metal and added a diagonal polished sheen so the plate reads as bright steel being lost, not flat grey.
Pass 2
Depth
Driving the signature
  • The first build ran a Gray–Scott coral regime — driven and watched, it filled the plate with an axis-aligned labyrinth that read as a circuit board, not rust.
  • Replaced it with a genuine bistable Allen–Cahn front: filled blooms with a smooth advancing coastline. Re-ran the sim each change and confirmed the corroded fraction and year both climb.
  • Added per-cell threshold noise so fronts are ragged and leave stubborn metal islands — a detail you only catch on a second, longer watch.
  • Moved the hot glow onto the propagating φ = 0.5 coastline; aged the interior from fresh corrosion to dark spent rust. Added a chip hover lift.
Pass 3
Hardening
375px, motion, timing
  • Timed the loop by sampling the counter every 2s: the cycle was consuming in under 7s. Slowed the per-step front velocity and spaced the seed scratches so a clean→consumed cycle now runs ~24s, resting at ~35–55% for the thumbnail.
  • Reduced-motion path was rendering a settled rusted frame but leaving the readout at 0% — now paints a matching percent and year, no animation loop.
  • Verified headless: zero console errors, one real <h1>, DPR capped at 2, rAF paused on document.hidden, reseed on resize, and no overflow at 375px.
  • Softened the plate vignette that was eating the smaller mobile canvas edges (Chanel rule).