CHP—17 / FIELD GUIDE Return to station

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

01 / EMITPointer, space or automatic source
02 / CUTDestination-out dual annuli
03 / RETURNGreen, amber and rose arcs
04 / REMEMBERBounded phosphor field

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

CAVE BLACK
#020504
SONAR RETURN
#B8FF7A
WING MEMBRANE
#B27077
DETECTOR AMBER
#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.

Build a cave-black acoustic survey read through echolocation. Use a fixed Canvas mask with destination-out wavefronts triggered by tap and space; let reached areas retain faint phosphor memory. Add a three-ping triangulation chamber that resolves an unseen flight path, draw distinct spectrograms and anatomy in code, make a heterodyne slider update a live scope, and stop every animation when hidden. Use no external or generated assets.