MATINS — How it was made

MATINS is a procedural dawn chorus. Four birds — blackbird, robin, wren and song thrush — are synthesised note-by-note in WebAudio, with no recordings anywhere, while a canvas sky lightens from pre-dawn to full morning across sixty seconds. The birds join in the real order of a dawn chorus: the largest-eyed voice first, in the dark, and the hedge fills in as the horizon reddens.

01Palette

Four colours drawn straight from the concept: the cold navy of the hour before light, the amber of first sun, the dark green of a hedge in silhouette, and the pale grey of ground mist. Text never sits on the bright amber; body copy uses a dedicated near-white ink so every label clears 4.5:1 over the dark fields, and the amber is reserved for rules, marks and the rising sun.

Pre-dawn

#1A2230

The base navy of the sky before nautical dawn. Grounds the whole page and the reading sections below the fold.

First light

#E8B87A

The warm horizon and the rising sun. Used for lines, the wordmark accent and marks — never small body text.

Leaf

#5C7A4A

The hedge. Lit form of it flags the wren's voice; darkened, it draws the treeline the sun rises behind.

Mist

#D8DEE0

Ground fog above the treeline, and the pale robin marker. Softens the join between sky and land.

02Type

Spectral · display & voice

Matins

a dawn chorus

Spectral is a screen-first serif with real bite in its italic. The wordmark splits mid-word — upright Mat, italic amber ins — so the name itself seems to lift into song. It carries every heading, the bird names and the field notes.

Outfit · interface

Civil dawn

Outfit is a quiet geometric sans that stays out of the way. It sets the eyebrows, the clock, the phase labels and the score specs in wide tracking, giving the birdsong copy room to breathe against it.

03Technique

WebAudio synthesis, no files. Each note is an oscillator with a fast exponential pitch glide, a second oscillator frequency-modulating it for timbre, a vibrato LFO, and a short percussive amplitude envelope. Consonants and rattles are bursts of white noise through a swept band-pass.
Canvas 2D sky. One <canvas> renders interpolated sky, horizon glow, twinkling stars, a rising sun, a mist band and two procedural treeline ridges with conifers — all keyed off a single dawn-progress value.
Shared clock. Sixty seconds of progress drive everything at once: sky colours, star fade, sun height, which birds have woken, the phase label and the progress bar.
Signal chain. Every voice runs through a compressor and a synthesised convolution reverb (an exponential-decay noise impulse) so the chorus sits in open air, over a barely-there filtered-noise wind bed.

The signature: a chorus that assembles itself

A lookahead scheduler ticks every 25 ms and asks each bird whether the light has reached its wake-threshold. The blackbird opens at two per-cent light; the robin joins at seventeen, the wren at thirty-three, the song thrush at fifty. Each awake bird generates a fresh phrase — the blackbird's unhurried fluted descent, the robin's wandering silver run, the wren's twenty-four-note trill over a noise rattle, the thrush's motif said twice or three times — then schedules its next after a gap that shrinks as dawn grows, so the hedge thickens on its own. Nothing is a loop: every phrase picks its pitches live, and each note also drops a spark of light into the sky at the exact stereo position it was panned to.

04Build log

Pass 1 · Craft

Spacing, scale, contrast, copy

Fatal audio bug caught by re-reading, not by the probe. The blackbird's main phrase computed a note duration but never passed it, so every envelope time resolved to NaN and threw hundreds of exponentialRampToValueAtTime errors — the hero still looked fine. Fixed the call and added a finite-value guard at the top of the note synth so no future phrase can throw.
Contrast discipline. Kept amber (#E8B87A) for the wordmark accent, rules and the sun only; gave all body and label text a dedicated near-white ink so the voice cards, phase labels and score copy clear 4.5:1 over the dark and over the animated sky (behind a top-and-bottom scrim veil).
Type scale. Set a deliberate ramp — 12px tracked eyebrows through a clamped 58–168px wordmark — and split the wordmark mid-word for the one moment of typographic bravery.

Pass 2 · Depth

Second read, motion, micro-interaction

Sky-to-sound link. Tied every note onset to a spark of light placed at its stereo pan position — a detail you only notice on a second listen, and now called out in the field notes ("watch the left tree while the blackbird sings").
A rare answer. Once the light is fully up, roughly one dawn in six, a distant two-note call answers from far off-pan under heavier reverb — an easter egg for anyone who stays to the end.
Micro-interaction. Hovering a still-sleeping voice card previews that bird's colour as a faint underline; the equaliser marks were rebalanced so a woken voice reads clearly instead of like stray punctuation.

Pass 3 · Hardening

375px, reduced motion, resilience

Reduced motion. With prefers-reduced-motion the page paints a single settled dawn frame — warm horizon, sun cresting the treeline, stars stilled — never blank, and audio stays silent until the visitor presses Wake the birds. Verified with a non-blank canvas probe (491 distinct colours) and zero errors.
Mobile. Confirmed at 375px that the wordmark, nav and all four voice cards sit fully inside the viewport box — not just that the page didn't scroll sideways.
Resilience. DPR capped at 2, canvas re-sizes to its container, the rAF loop and audio context both pause on tab-hide and resume with a clamped delta so nothing lurches, and a CSS dawn gradient sits behind the canvas as a no-JS fallback. Future sparks scheduled ahead of time no longer draw a negative-radius arc.