Station 36 — Shortwave Numbers Listening Post — SVG Interaction
Room 36 of 175: “Station 36 — Shortwave Numbers Listening Post” — visit the live site.

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.

Live view of Station 36 — Shortwave Numbers Listening Post
The room as it renders live — open it in your browser.

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.

Aviation AIR/FM/AM/CB/SW/VHF Full Band Portable Shortwave Radio Receiver - Handheld Airband With Built-in 700mAh Battery, LCD Display, Headphone (Gold)

Aviation AIR/FM/AM/CB/SW/VHF Full Band Portable Shortwave Radio Receiver – Handheld Airband With Built-in 700mAh Battery, LCD Display, Headphone (Gold)

  • Intuitive and Easy to Operate: User-friendly design with enhanced antenna
  • Multiple Search Modes: Manual, automatic, full auto, and store modes
  • Clear LCD Display: Backlit screen shows frequency, battery, and sensitivity

As an affiliate, we earn on qualifying purchases.

As an affiliate, we earn on qualifying purchases.

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

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


RTL-SDR Blog V4 R828D RTL2832U 1PPM TCXO HF Bias Tee SMA Software Defined Radio with Dipole Antenna Kit

RTL-SDR Blog V4 R828D RTL2832U 1PPM TCXO HF Bias Tee SMA Software Defined Radio with Dipole Antenna Kit

  • Includes RTL-SDR and Dipole Antenna: Complete SDR and antenna kit
  • High-Quality R828D Tuner: Enhanced tuning performance
  • Built-in HF Upconverter: Wide frequency coverage

As an affiliate, we earn on qualifying purchases.

As an affiliate, we earn on qualifying purchases.

SI4732 ATS-25 max-Decoder Full-Band Radio Receiver, Built-in Morse Code and Digital Communication decoder Support CW RTTY FT4 FT8 LSB SW(4.17 Version )

SI4732 ATS-25 max-Decoder Full-Band Radio Receiver, Built-in Morse Code and Digital Communication decoder Support CW RTTY FT4 FT8 LSB SW(4.17 Version )

  • Enhanced Mode Support: Adds DIGI, CWR, SYNC modes
  • Built-in WIFI: No extra app needed for WiFi connection
  • Full Band Coverage: Supports FM, LW, MW, SW, SSB frequencies

As an affiliate, we earn on qualifying purchases.

As an affiliate, we earn on qualifying purchases.

ClearClick Retro AM/FM Radio with Bluetooth - Classic Wooden Vintage Retro Style Speaker

ClearClick Retro AM/FM Radio with Bluetooth – Classic Wooden Vintage Retro Style Speaker

  • Bluetooth-Enabled AM/FM Radio: Retro vintage style with Bluetooth
  • Handmade Wooden Exterior: Beautiful, durable wooden design
  • Easy Tuning & Volume Control: Simple controls with backlit tuning

As an affiliate, we earn on qualifying purchases.

As an affiliate, we earn on qualifying purchases.

You May Also Like

Every Retailer Is Now a Data Company — Thanks to AI

Unlock how AI transforms retailers into data-driven powerhouses, shaping the future of shopping—discover what’s next for your business.

Understanding Anthropic’s $965B Series H: The Compute Revolution

Discover why Anthropic’s $965B valuation isn’t just a milestone—it’s a massive investment in compute capacity, chips, and infrastructure shaping AI’s future.

AI Is Reinventing Online Shopping — Starting With the Storefront Itself

Discover how AI is transforming online storefronts to create smarter, more personalized shopping experiences that will change the way you browse forever.

The Highest-Paying AI Careers Are Redefining Tech Salaries in 2025.

The highest-paying AI careers in 2025 are transforming tech salaries, but what factors are driving this unprecedented growth and opportunity?