← Back to USNEA

Field notes on the build · Generative Assets

How this page grows

A crust that keeps the time — assembled here the way it assembles on the rock, one wandering particle at a time.

Concept

Slow colonists

USNEA is a fictional lichenometry field studio: they read time off lichen crusts, and build instruments that turn slow growth into a reading. The page has one job — make the geologic patience of colonisation legible in under a minute, without lying about it. The crust on the boulder is a real diffusion-limited aggregation, not a video or a texture, so every reload draws a different rock.

Palette

Four tones off a granite boulder

Pulled straight from a saxicolous crust in raking light: dark wet stone, the sage of a settled thallus, and the sulphur flash of fresh growth at the margin. Nothing decorative — each colour is a thing on the rock.

Rock shadow
#22241F

The page ground — wet granite in shade. Everything reads against deep time.

Granite
#3A3C38

The boulder body and panel fills; the lit face of the stone.

Lichen sage
#9FB08A

The settled crust and the numeral voice — the colour a thallus becomes with age.

Sulphur
#D8C45A

Reserved for the growing edge, rules and marks — the bright fresh margin, never body text on texture.

Bone (ink)
#E7E4D6

A dedicated light ink for body copy — clears 4.5:1 over stone where sage would not.

Following the collection's hardest-won lesson, sulphur is a mark colour, not a text colour on busy fields. Body copy runs in bone; small labels in a muted sage-grey; sulphur is spent only on lines, the growing edge, and single accents.

Type

Newsreader & Karla

Usnea saxatilis
Newsreader — display & italic. A botanical-plate serif with a true optical-size axis; it carries the binomial, the wordmark and the giant age numeral with an editorial, herbarium calm.
0.4 mm/yr · coverage 41.2%
Karla — labels, body, data. A humanist grotesque with tabular numerals that hold still while the readouts tick. It keeps the instrument side of the studio legible and unfussy.

Typographic bravery lives in two places: the USNEA wordmark, set in Newsreader Light at up to 12.5rem and revealed letter-by-letter on a slow rotate; and the age numeral in the slow-clock section, a single Newsreader figure the height of the viewport that counts up as the crust fills.

Technique — the signature element

Diffusion-limited aggregation, on a masked boulder

The whole visual is two stacked canvases and no libraries. A boulder silhouette is generated from a union of six perturbed ellipses (a seeded RNG keeps the outline stable) and rasterised into a mask grid at 4 px cells. The granite body is shaded per masked cell against a raking light, then grained with speckle.

Growth is true DLA. Three spores are seeded in the lower crevices. Each frame a handful of walkers launch on a short ring around the frontier — the recently-fixed cells — then random-walk across the mask until they graze an occupied neighbour, at which point they fix permanently and become a new edge. Because only the exposed edge catches wanderers, the crust reaches outward in fingers and interiors fill last — the characteristic DLA dendrite, which is the same rule that grows coral, frost and mineral trees.

Two layers keep it cheap: fixed particles are painted once onto a persistent canvas (sage sprites, with a 4.5% chance of a sulphur apothecium fleck — a second-read detail), so the crust never redraws. A transparent top canvas clears each frame to carry only the live things: the sulphur flash at each fresh fixing, the faint bone trail of the particle currently wandering, and the ring pulse when you seed. A stick budget that eases as coverage rises is what compresses decades into a minute, then slows to a geologic crawl. Click bare granite and a new colony starts from your point.

Discipline for the collection floor: DPR capped at 2, canvases sized to the viewport with a debounced rebuild, the rAF loop paused on document.hidden with a clamped delta on resume, and prefers-reduced-motion pre-grows the aggregation to ~42% synchronously and paints one settled frame — never a blank.

Iteration log

Three passes

Pass 1Craft

  • Set a deliberate type scale (12.5rem wordmark → 0.69rem tracked labels) rather than round steps; tuned the hero readouts to a hairline four-up grid.
  • Reserved sulphur for marks only and introduced the bone ink token for body — the readouts and captions were failing contrast in sage over granite.
  • Rewrote all copy to specific lichenometry nouns (thallus, saxicolous, apothecia, GR‑14) and dated the survey notes to a plausible re-measurement cadence.
  • Removed a dead second IntersectionObserver left in the reveal code; collapsed to one clean observer.

Pass 2Depth

  • Enriched the signature: sulphur growth-edge flash on the live layer while the persistent crust settles to sage — so tips glow and the body ages, honestly and for free.
  • Second-read detail: rare sulphur apothecia flecks scattered through the crust, and the faint bone trail of the single particle currently wandering.
  • Micro-interaction: click any bare granite to seed a colony, with a sulphur ring pulse as feedback; the age numeral responds as coverage climbs.
  • Added the growth-rate sparkline in the slow-clock section, fed from the live stick count.

Pass 3Hardening

  • 375px: boulder recomputed to a smaller centred rock, readouts drop to two-up, nav collapses to wordmark + Index, verified no element crosses the viewport box.
  • Reduced-motion path pre-grows the crust and paints one static frame with no rAF; visibility changes pause and resume with a clamped delta so nothing jumps.
  • Debounced resize ignores mobile URL-bar jitter (<60px) to avoid pointless full rebuilds mid-growth.
  • Chanel rule: dropped an extra vignette layer that was muddying the boulder's lit face; kept the single raking light.