The set was built to prove one thing.

What we were handed

The brief

Every site in this collection begins as an art-directed brief — a fictional place with a year, a palette, a named type pairing and exactly one signature technique to execute deeply. Radio Merdeka received this:

One technique, executed deeply

The band is computed, not recorded

The whole dial is a single mixing problem. For any frequency, the set finds the nearest station and computes a signal strength — 1 when you are dead on it, falling to 0 as you drift a few kilohertz away. That one number cross-fades the station's synthesized voice against a bed of filtered white noise. Lock a station and its voice fills the room; drift, and the noise rises to take its place. Nothing is looped. The hiss you hear was generated the moment you asked for it.

Each station's "voice" is a scheduled pattern of oscillator notes — time pips, a plucked kroncong, a telegraph key still spelling merdeka, bronze gamelan, a night service that keeps announcer's hours. Every note runs through the same tiny envelope helper:

// one oscillator note, scheduled into the active station's bus
function tone(t,dur,f,type,peak,a,mod){
  var o=ctx.createOscillator(); o.type=type; o.frequency.value=f;
  var g=ctx.createGain();
  g.gain.setValueAtTime(0.0001,t);
  g.gain.linearRampToValueAtTime(peak, t+(a||0.008));
  g.gain.exponentialRampToValueAtTime(0.0001, t+dur);
  o.connect(g); g.connect(stationBus);
  // …optional FM modulator for the gamelan bells…
  o.start(t); o.stop(t+dur+0.06);
}

// the whole dial in two lines — strength cross-fades voice against static
staticGain.gain.setTargetAtTime((1-curStrength)*0.085+0.004, now, 0.08);
stationBus.gain.setTargetAtTime(active ? curStrength*0.55 : 0, now, 0.05);

The audio context is never created until your first tune gesture — turning the knob, dragging the glass, an arrow key. Until then the oscilloscope runs on a purely visual version of the same maths, so the instrument is alive and understandable in complete silence. That is the audio law, kept honestly.

The loop is the level

Three critique passes

The first draft is never why these pages look the way they do. Each pass shoots the real page on desktop and mobile, reads the screenshots like a hostile art director, fixes everything, and ends with one deliberate upgrade.

Ship gate

What it costs

• One self-contained index.html — all CSS and JS inline, zero CDN, no build step.
• No external images — the cabinet, dial, knobs, oscilloscope and static are all procedural.
• Zero console errors on the final harness run, at 390px and 1440px.
• Full keyboard operability, visible focus, AA-contrast text, and a complete page under prefers-reduced-motion.
• Page weight printed on the radio's own footer — the number is the proof.

The method that seeded this collection is the open FABLE 25 project — a design constitution, art-directed briefs, and a screenshot critique loop. We rebuilt the discipline in our own voice; the craft here is real, the brand is fiction.