IMPLEMENTATION NOTES / WING VII
READ THEDARK
Station Chiroptera makes echolocation the page’s literal render engine. This nocturne is built entirely from HTML, CSS, SVG and Canvas—no generated imagery, photographs or remote requests.
The concept
Most interfaces assume uninterrupted vision. This one begins beneath a cave veil and asks for a pulse. Space or tap launches a wavefront that reveals only what it crosses, then subsides. Each source leaves phosphorescent memory, turning reading into spatial recall.
The fictional station uses real acoustic distinctions. Steep frequency-modulated sweeps favor fine range resolution in clutter; constant-frequency plateaus reveal Doppler shifts; shallow quasi-constant calls carry farther through open air. Species and records are invented, but the listening principles are grounded.
Echo render
THE MASK
In main.js, emit(x, y) stores a source, start time, farthest viewport corner and five reflected bearings. draw() lays down cave black, switches to destination-out, and calls cutAnnulus() twice. The leading and secondary bands expand for 4.7 seconds with a decelerating radius, briefly exposing the semantic HTML below.
RETURN & MEMORY
#echoTrace paints a live green edge, a dashed amber delay and short rose or green reflector arcs. Each click also adds one low-alpha memory pool; the array caps at 22 and the device-pixel ratio at 1.5. Animation frames stop when no pulse or auto mode needs them, and stop immediately on document.hidden. Reduced motion removes both canvases and leaves a still, readable document.
TRIANGULATED FLIGHT
The return chamber is a second instrument. pingArray() activates posts A, B and C; drawArrayFrame() intersects their time-of-flight circles into a six-point flight corridor. Its bounded frame shares global echo and audio permissions, pauses when hidden, and becomes a static plot under reduced motion.
OPTIONAL SOUND
HEAR defaults off. Once activated, soundClick() synthesizes a Web Audio chirp and delayed return; its context suspends when hidden.
Body as instrument
Canvas routines draw three genuinely different spectrogram families with deterministic grain. CSS scan lines provide the moving playhead. The terminal buzz positions each “tik” on an exponential curve, so spacing visibly compresses toward capture; buzzpop then sends a quick return through the sequence.
The bat wing is inline SVG. Four data-digit paths form the elongated fingers beneath a rose membrane. The II–V controls call selectDigit(), strengthening one path and rewriting its anatomical note. The heterodyne console’s tune() compares the chosen band with three peaks, updates beat frequency and lock state, and redraws the scope.
Palette & type
#020504
#B8FF7A
#B27077
#FFBD5C
Zilla Slab carries display text: its bracketed serifs feel literary and instrument-like at once. JetBrains Mono handles coordinates, records, spectra and controls. Green belongs to active returns, amber to measurement, rose to living tissue, and pale mineral white to prose. Both families are self-hosted.
Atmosphere comes from code: layered radial fields, repeating cave contours, an encoded SVG noise filter, translucent instrument borders and Canvas light. The no-generated-assets constraint is deliberate—the darkness is not a backdrop but a responsive material.
Reproduce this
Ask an AI coding agent for a semantic field report whose visibility is controlled by echolocation. Require pointer and keyboard origins, expanding reveal annuli, persistent low-alpha memory, visibility-aware animation, a fully exposed reduced-motion state, self-hosted typography and code-drawn scientific material.