DOLBEAR — field guide · how it was made

Palette

Four colours, argued from a warm summer night in long grass. The accent does one job and never becomes small text.

#20261A

Dusk field

A near-black olive, not a cold black — the ground reads as a warm night, and gives every other tone something living to sit on.

#E8B84A

Lamp amber

The only accent. Reserved for the chirp glow, the dial indicator, hairline rules and the giant numeral — never small body copy, which keeps its contrast honest.

#5C6E3A

Grass

Dry meadow green for the blades and for the one straggling caller that never quite joins the lock — a cooler body in a field of amber flashes.

#E4E0CE

Moth white

The ink token. Every heading and paragraph sits in this or its dimmer sibling (#AEB39A), both above 7:1 on the dusk field — the accent stays for marks only.

Type

Spectral · display 300 / body 400 / italic

72°F — a mild evening, 128 chirps a minute

A slightly-condensed transitional serif with real italics. It carries the field-guide-plate voice and, at weight 300, sets the live temperature numeral — the page's one deliberate act of typographic bravery, a number that changes as you turn the dial.

JetBrains Mono · 400 / 500 / 700 · tabular

N = 4 × (T − 50) + 40 · SER. Nº 0073

The instrument's engraved labels, model number, chirp counts and formula variables. Tabular figures keep the readouts from twitching sideways as they tick.

Techniques

Canvas 2D field

Procedural grass blades, glowing crickets and expanding chorus ripples — every mark drawn, no raster assets anywhere.

WebAudio · stridulation synthesis

No samples. Each chirp is a triangle oscillator swept a little, bandpass-filtered near 4 kHz, gated into a four-syllable pulse train by a gain envelope and panned to the caller's spot — built on demand through a highpass + compressor bus, only after a user gesture.

Kuramoto coupling

The drift-then-sync chorus is a real coupled-oscillator model — the same maths behind fireflies and pacemaker cells — not a scripted loop.

No libraries

Vanilla JS and CSS. The whole instrument, both pages, is self-contained: all styles and script inline, zero build step.

The signature: a field that counts itself into a thermometer

The field is forty coupled oscillators. Each caller carries a phase θ and a natural frequency set by Dolbear's law for the dialled temperature, ω = 2π·(4(T−50)+40)/60, plus a small individual timing bias. Every frame each phase is nudged by K·(1/N)·Σ sin(θⱼ−θᵢ) — computed in O(N) from the field's mean resultant vector, not O(N²) — which pulls the whole chorus toward one phase: it begins as a scatter and settles into pulsing waves. When a phase completes a cycle the caller chirps (a flash, and for the twelve voiced callers a synthesized chirp); when the mean phase crosses zero the whole field pulses and a ripple ring goes out. Turn the dial and ω rises for everyone, so the chorus visibly and audibly speeds up. Because the count is engineered to the law exactly — chirps in fifteen seconds equals T − 40 — you can count the pulses and read the temperature straight off the grass.

Iteration log

Pass 1 · Craft

Cut vague filler from the hero eyebrow ("est. field season") and the ambiguous "warm / cool" knob cap that didn't map to a rotary sweep — now "specimen N°73" and "set °F turn".
Audited contrast: confirmed amber (#E8B84A) is used only for the indicator, the display numeral, rules and the chirp glow; all labels and body sit in the moth-white ink tokens (≥7:1 on the field).
Held the type scale and section rhythm — 86px bands, tabular figures on every live readout so nothing jitters as it updates.

Pass 2 · Depth

Enriched the signature with a straggler: one caller with four times the timing bias and a quarter of the coupling, tinted grass-green, that never fully joins the lock — so the sync meter breathes just under 100% instead of pinning flat. A second-read detail.
Added a faint gas-lamp flicker to the amber field glow, and a chorus ripple that only reads strongly once the field is coupled — drift stays diffuse, sync pulses in waves.
Micro-interactions: the °F degree glows for 200ms on every dial change; the knob indicator brightens while you drag it.
Added an orchestrated entrance (eyebrow → title → lede → instrument), gated on document.fonts.ready with a 1.3s fallback and a synchronous head-script guard so nothing is ever left at opacity 0 if scripting fails; skipped entirely under reduced motion.

Pass 3 · Hardening

375px: verified nav, wordmark, panel, knob, formula and steps all sit inside the viewport box (no element runs past the right edge); the panel collapses to one column at 880px.
Reduced motion: no rAF loop — the field is drawn once as a settled frame, the wake button is disabled with a note, and the dial still updates the numeric chirp-rate readout (N15 = T − 40) and redraws the field on change. Verified the static field is non-blank and the readout tracks the dial.
Removed one excess ornament — an empty .knob-ticks ring that drew nothing (Chanel rule).
DPR capped at 2; debounced resize rebuilds the grass; the rAF loop pauses on document.hidden and clamps its delta on resume; added a phase-accumulator wrap so a long-open tab never loses float precision.