Build notes / classified aesthetic

How the listening post works

Concept

Station 36 is a shortwave numbers-station listening room built around the slow pleasure of finding a signal by hand. The page treats the browser as a bench receiver dragged out of a cold relay office: a bakelite cabinet dominates the first view, the waterfall keeps a phosphor record below it, and the cream paper log hints that one frequency was intentionally left out. Sound is gated behind the power switch, so the desk is quiet until the visitor chooses to energize it. Without sound, the same state still drives the dial, meter, call sign, station ribbon, paper cipher, and waterfall.

Palette & Type

The dominant field is bakelite brown-black #191210, pushed with warmer resin shadows and a black vignette so the room feels sealed. Dial amber #ffb54a identifies hardware and file labels; phosphor cyan #67fff0 appears only when the signal becomes intelligence; paper cream #efe1c2 gives the logbook a separate material temperature. Abril Fatface carries the mystery headline voice. Chivo Mono handles frequencies, controls, station names, and operational copy with tabular, filed rhythm.

Visual Techniques

The receiver is inline SVG in index.html. Gradients, a speaker-hole pattern, lamp states, and grouped vector parts create the cabinet, glass scale, meter, and knobs without image assets. buildDialTicks() in main.js draws the amber scale marks. pointerToSvgPoint() converts drag input into receiver coordinates, while setFrequency() rotates #dialGroup, updates the ARIA slider text, moves the meter needle, refreshes readouts, and positions the band-map marker.

The waterfall is the #waterfall canvas. drawWaterfall() scrolls the old trace downward and asks drawSpectralRow() for fresh band noise, station peaks, morse teeth, and the tuned carrier. nearestLockedStation() decides when a frequency resolves into a named intercept. revealHiddenStation() removes the redaction at 7.770 MHz and changes both the band plan and the cipher paper.

Discovery now has a second physical beat. Locking LANTERN KEY closes the developer relay and enables #exposureControl. Activating it calls developCarbonCopy(), which inverts the paper into a cyan darkroom field, uncovers the carbon impression, and sends one final morse acknowledgment when audio is already powered. The control remains a native button, so the reveal works equally by touch, pointer, or keyboard.

The sound layer is Web Audio in initAudio(): filtered noise for band hiss, a low oscillator for carrier hum, a whistle oscillator for heterodyne, and a gated morse oscillator in playMorse(). speakStation() uses browser speech synthesis only after power is on. Visibility changes suspend audio and stop the animation loop; reduced-motion visitors get a static spectral field instead of a continuous waterfall.

Reproduce This

Prompt an AI agent to build a static no-dependency site around one tactile instrument, not a landing page. Specify self-hosted fonts, a dominant material palette, an inline SVG machine with a real drag interaction, a canvas visualization tied to the same state, and a sound layer that starts only after an explicit power control. Ask for invented logs, redactions, a discoverable hidden state, careful reduced-motion behavior, phone/tablet/desktop screenshot audits, and a guide that names the exact files and functions used.