Field notes · how it was made

The Guide

Building a forty-million-year instant out of nothing but a canvas and layered light.

The concept

One fly, kept

AMBER is a fictional natural-history specimen page. Its single job is to make duration legible: a non-biting midge is caught mid-flight in fresh pine resin, slowly engulfed as the resin flows and hardens, then mineralised to fossil amber across forty million years compressed into roughly thirty seconds. The audience is anyone who has held a piece of amber and wondered how long the light has been bending around the thing inside it.

Palette

Four notes of gold

Every colour is argued from the material — warm, translucent, deepening. The bright end is reserved for lines, marks and refracted light; small text always uses a darker ink token, so body copy clears 4.5:1 over the animated gold.

Resin

#C98B2E

The living gold. Used only for rule marks and accents — never small text.

Deep amber

#6E3C12

Fossilised depth. Display headings and the wordmark.

Inclusion ink

#4A2A0E

The trapped fly, and the ink for small captions and labels.

Highlight

#F4D48A

Light through the resin — caustics, bubble rims, the meniscus edge.

Type

A specimen label, set with care

Cormorant Garamond carries the display voice — a warm, literary, high-contrast serif that belongs on a museum card. Its italic sets the tagline and pull-quotes. Spline Sans Mono is the instrument voice: eyebrows, the fossilisation clock, and the specimen table, with tabular numerals so the years counter doesn't jitter as it climbs. The scale is deliberate — a near-200px wordmark against 11px tracked-out mono labels, so the page reads as artefact and apparatus at once.

Technique

The signature, layer by layer

No images and no 3D engine — the specimen is drawn every frame on a single 2-D canvas as a stack of translucent layers. A radial amber body whose three colour stops lerp from fresh to fossil as the mineralisation value rises; descending "flow" sheets composited with lighter for the look of resin running like slow honey; trapped air bubbles with bright refraction rims. The midge is drawn once to an offscreen buffer, then the portion below a descending engulf front is tinted deeper using source-atop, so the fly is visibly half-swallowed — abdomen already in the dark gold, wings still in fresh resin. It is composited twice: a faint offset ghost for refraction, then sharp. A drifting specular gloss, a caustic light-bar with a faint chromatic-dispersion fringe, a milky emulsion film that forms around the sealed insect, and hairline crazing that fades in during mineralisation complete the read. The clock maps a single value T ∈ [0,1] to 0–40 Ma; the front descends linearly across the whole inclusion over T 0.05–0.75, so the engulfment is slow, and a bright "fresh drip" wash disguises the loop's reset.

Canvas 2DEvery layer — body, veils, bubbles, midge, caustics, crazing, vignette.
Offscreen bufferThe midge is rendered once, then tinted below the engulf front via source-atop.
Compositinglighter for flowing resin, refracted light, emulsion and the drip wash.
No librariesNo three.js, GSAP or matter-js — the concept needed none.
ResilienceDPR capped at 2, resize regenerates geometry, rAF pauses when hidden, reduced-motion renders a settled frame.

Iteration log

Three passes

Pass 1 — Craft

The section numbers were set in the bright resin gold as small text — roughly 1.9:1, a contrast failure. Moved them to deep-amber ink and gave each a leading resin rule mark, applying the ink/line split throughout. Restructured the page so the reading sections and footer sit on a solid amber-paper surface that occludes the fixed canvas — every paragraph now has a guaranteed ≥4.5:1 ground instead of floating over moving gold. Merged a stray duplicate <main> and tightened the hero type scale and spacing rhythm.

Pass 2 — Depth

Driving the timeline exposed a dead-feeling signature: the smoothstep put the fly in the fast middle of the front's descent, so it snapped from 0% to fully engulfed between T 0.36 and 0.43 — the engulfment you never saw. Replaced it with a linear front descent across the whole inclusion over T 0.05–0.75; the resting frame now sits at ~56% engulfed, mid-flow. Added two second-read details: a milky emulsion film (real amber "Verlumung") that grows around the sealed insect as it mineralises, and a faint chromatic-dispersion fringe on the refracted light bar. Repositioned the midge on portrait so it sits beside the wordmark and clears the body copy.

Pass 3 — Hardening

Verified 375px headlessly: no overflow, nav and wordmark within the viewport, the portrait midge no longer behind the lede. Confirmed prefers-reduced-motion renders a settled static frame at ~20 Ma (mid-hardening, fly partly engulfed) with the rAF loop never started, guarded by both CSS and a matchMedia check. Checked the DPR cap, resize geometry regeneration, and the visibility pause. Chanel rule: thinned the suspended plant fibres from eleven to seven and kept them out of the clear upper resin, where they had begun to read like scratches.

Back to the specimen, or the full Generative Assets collection.