An AI Built a Station 36 — Shortwave Numbers Listening Post Website — Here’s the Design Trick That Makes It Work

Discover the Hidden World of Radio Signals with Station 36

Station 36 is an immersive web experience crafted entirely by AI, designed to evoke a vintage radio listening post. Its standout feature is an interactive, tactile control panel that simulates tuning into secret shortwave signals, inviting visitors to rediscover the slow joy of manual signal hunting — all within a browser.

Design Palette and Material Choices

The site employs a restrained color scheme rooted in vintage materials: deep bakelite brown-black (#191210) forms the dominant backdrop, complemented by warm amber (#ffb54a) for hardware accents, phosphor cyan (#67fff0) to denote active signals, and soft cream (#efe1c2) for logbook textures. This palette reinforces the authentic, classified aesthetic reminiscent of real radio equipment.

SVG Architecture and Interaction

The core visual elements are built with inline SVG embedded directly in the HTML, eliminating dependencies and ensuring crisp, scalable controls. The SVG constructs include the cabinet, dial, knobs, and meters, with detailed gradients, pattern fills, and grouped parts to mimic vintage hardware. The dial’s ticks are dynamically generated via JavaScript, enabling precise, tactile interactions. Dragging the dial updates the frequency, moves the meter needle, and scrolls the spectral waterfall, all synchronized through a shared state object managed by JavaScript functions like buildDialTicks() and pointerToSvgPoint().

Waterfall and Audio Integration

The visualization canvas displays a spectral waterfall, illustrating signal activity over time. It scrolls downward with each frame, overlaying spectral rows generated by drawSpectralRow() to simulate band noise, station peaks, and Morse code teeth. The audio layer uses Web Audio API to synthesize authentic sounds, including static hiss, carrier hum, heterodyne whistles, and Morse signals, all activated only when the user explicitly powers on the receiver via a dedicated button. This layered approach ensures the site remains static until interaction, preserving the suspense and realism.

undefined

The full build notes live in the room’s design guide.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 36 of 175, “numbers”):
STATION 36 — a shortwave numbers-station listening post. Aesthetic: cold-war bakelite radio room. Palette: bakelite brown-black #191210, dial amber #ffb54a, phosphor cyan spectrogram, paper log cream. Fonts: abril-fatface (mystery headlines), chivo-mono (frequencies/logs). SIGNATURE: a large SVG bakelite receiver with a DRAG-TO-TUNE dial — Web Audio synthesizes the ether live (band noise, heterodyne whistles, carrier hum); certain frequencies resolve into morse bursts and a synthesized number-voice cadence; a live canvas spectrogram waterfall scrolls beneath. Intercept log with redactions; one hidden frequency spells a message (easter egg, hinted in the log). Audio strictly behind a power switch; visual-only fallback. Unforgettable: finding the hidden station yourself.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/numbers/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

Experience the Vintage Listening Post Yourself

Visit the live demonstration to step into the world of secret signals — built entirely by AI to evoke the tactile intrigue of vintage radio listening. Explore the full gallery of 175 similar projects at the central hub and see how AI-crafted interfaces blend history with modern web craftsmanship.

Visit the live room → · Browse all 175 rooms

Previously in Wing II

• Room 26: KP-9 Station — Arctic Geomagnetic Observatory
• Room 31: La Bourse — October 1929 Stock Exchange
• Room 27: CALIBRE 27 — Haute Horlogerie Manufacture

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Powered by Thorsten Meyer AI