The flooded Carreg slate pit, ninety metres of black water, rendered so it is only visible in the half-second after you click. This is how the dark was built to answer you.
SONAR is a Wave 4 “second person” site: the page is inert — total black, silent — until you drive it. Each click emits an expanding wavefront (a WebAudio ping and a canvas ring) that briefly lights whatever geometry it crosses — a cavern wall, a listing barge, a chain, a blind fish, a station placard — then everything fades back to black. You navigate and read by echo alone; the space between pings is a memory game. The single job of the page: make you feel that your click is the only source of light and sound in the pit.
Argued from the subject: a sonar scope is phosphor on black. The screen gives almost nothing back on its own; the bright colour is reserved for marks and lines (the wavefront, lit edges), while text carries a dedicated dimmer ink so nothing thin ever floats at low contrast.
Everything is drawn on a single 2D canvas. The scene is not pixels but features: cavern walls and the barge are arrays of short line segments; portholes and chain links are circles; fish and marine snow are parametric; the six stations are placards. Each feature carries its own illum and seen value.
A click pushes a ping — an origin, a birth time, a pitch. Every frame, each feature computes its brightness from all live pings:
r = speed · t
shell = exp( −((d − r) / width)² )
energy = exp( −t / τ )
illum = shell · energy · (1 / (1 + d/att))
Because the wavefront radius r grows with time, a feature lights the instant the shell passes through it and darkens as the shell moves on — reveal, then fade, with distant geometry answering later and dimmer, as real sound would. A seen value decays on a ~1.4 s half-life to leave a faint phosphor trail. The visible ring is the same maths drawn literally: a stroked circle at radius r, brightest at its leading edge.
The audio is one sine oscillator with a guarded envelope (attack to 0.85, a short body, a long exponential tail — never ramping to zero, so no NaN), pitched lower for deeper pings, fed through a low-passed feedback DelayNode that returns two or three softening echoes: the “return.” An AnalyserNode taps the master bus so the returns can be measured even where they can’t be heard.
Reading stays possible. The whole world fades to black by design, but the last station you ping near is focused — held at a readable brightness with an amber bracket for a few seconds so you can actually read it — and once found, a station keeps a faint logged ghost. With reduced motion the pit is drawn fully lit and still; with no JavaScript a typeset transcript of every station is shown. The dark is a choice, never a dead end.
Tuned wavefront speed and shell width against the viewport diagonal so a ping crosses the screen in a readable ~2 s at any size. Split a single accent into a strict line/ink pair — bright #54E0C0 for the wavefront and lit edges, calmer #8FC8D2 for all body copy — after the first pass revealed thin teal text dropping under 4.5:1. Set tabular numerals on the depth and heading counters to stop them jittering, and pulled the station text boxes inward with a clamp so nothing could overrun the walls.
Enriched the signature: a low-passed feedback-delay echo tail (the “return”) instead of a single dry blip; an origin flash and a trailing return-ring behind each wavefront; a barge that rings edge-by-edge as the shell sweeps her hull. Added the focused station read-window and the amber bracket as the micro-interaction, and the “logged ghost” persistence as the second-read detail — revisit and the pit faintly remembers where you have already been.
375 px pass: dropped the “▲ ACTIVE” tick and tightened wordmark tracking on narrow screens; verified the HUD, colophon and links all sit inside the viewport. Confirmed the reduced-motion static render shows every station legibly, DPR is capped at 2 with a debounced resize re-layout, and the rAF loop stops itself once the pit has faded (and on document.hidden) so a still page costs nothing. Removed a redundant second glow pass on lit segments — one wide-plus-thin stroke reads richer than three.