LAMPYRID
↩ The meadow  ·  Index
Field notes · how it was made

Growing a
synchrony meadow.

LAMPYRID is a fictional naturalist's study: three hundred fireflies rendered as coupled Kuramoto phase oscillators on a single canvas, drifting out of step and then entraining into one breathing pulse — with a faint synthesized chirp on every flash. Its one job is to let you watch order arrive with no one in charge.

01 Palette

Argued from a June meadow at midnight: near-black earth and grass, and two temperatures of living light — a cool bioluminescent green and the warm gold of its halo. The greens carry the glows and the marks; body text is given its own soft, desaturated ink so small labels clear 4.5:1 over the dark field.

Meadow night
#10160F
The ground state. Warm-shifted black so the grass reads as earth, not ink.
Grass shadow
#1E2A18
Silhouetted blades along the horizon — dark enough that the lights own the frame.
Firefly
#C6F06A
The flash. Reserved for glow cores, rules and marks — never small body text.
Warm glow
#F2E4A8
The halo around each pulse; the gold that additive blending bleeds into white.

Text inks. Headings #E7ECDA, body #C4CDB2 (~7:1), muted labels #93A17F (~4.9:1). The bright firefly green is held back for lines and glows only — the recurring contrast trap from earlier waves.

02 Type

Cormorant
Display · italic 500/600
A high-contrast Garalde with long, romantic extenders — the naturalist's hand. Carries the hero, the big live coherence numeral, and every pull-quote.
Karla
Text · 300–600
A grotesque with a warm, slightly quirky rhythm. Handles body copy, the eyebrows and the console labels without competing with the serif.

The typographic bravery is the coherence readout: a 60px Cormorant numeral that is the live order parameter, its glow swelling as the meadow locks in — a number that breathes.

03 Techniques

One HTML canvas, no libraries. The signature is a genuine simulation, not a scripted loop.

The Kuramoto mean field

Each firefly holds a phase θ and a natural frequency ω (Gaussian-spread around a ~1.6-second period). The naïve all-to-all coupling is O(N²); instead each frame computes the complex order parameter once —

r e = 1⁄N Σ eiθⱼ

— giving coherence r and mean phase ψ in O(N). Every oscillator then integrates dθ = ω + K·r·sin(ψ − θ) plus a little phase noise, which is mathematically the full coupling at a fraction of the cost. K is the Night air slider; a live eased ramp lifts it from below the critical coupling to above it over the first ~18 seconds, so a cold start genuinely drifts, then tips through a phase transition into one pulse. Scatter re-randomises the phases and the field heals again.

Rendering the light

Brightness is ((1+cos θ)/2)⁹ — a brief, sharp flash per cycle. Two pre-rendered radial sprites (warm halo, green-white core) are blitted with lighter compositing so overlapping glows bloom to white; the frame fades toward the sky gradient rather than clearing, so each light leaves a soft afterglow trail. When coherence is high the whole meadow gains a faint synchronous breath.

The chirp

WebAudio, off by default and gesture-gated: the AudioContext is only created when you press Sound. Each flash rollover fires a ~110ms triangle blip through a lowpass, faintly detuned by the firefly's own frequency, globally rate-limited and kept quiet. Incoherent, it patters like light rain; synchronised, it pulses as one soft chorus.

Discipline

DPR capped at 2, sized to container, debounced resize, delta clamped, and the rAF loop paused on document.hidden. Under prefers-reduced-motion the loop never starts: the field is integrated to a partial lock synchronously and a single lit frame is drawn, with no audio.

04 The three passes

Pass 1 · Craft

Pass 2 · Depth

Pass 3 · Hardening

Designed & built by Sapience Analytics — part of the Generative Assets collection.
The meadow ↗  ·  Index