How itwas made

Longwave is a fictional late-night radio station. The brief was a trap: every obvious move for a radio site is a cliche. A dark hero with a neon audio-waveform canvas. A podcast-directory grid of show cards. A now-playing player bolted to the corner.

So we inverted all of it. Radio is invisible: there is nothing to look at, only something to hear. The one idea here is that the type IS the broadcast. The word is the only image, and it behaves like the sound it carries.

The whole site runs on a single typeface, Anybody Variable, with a width axis from 50 to 150 and a weight axis from 100 to 900. Every headline is split into per-letter spans. A small requestAnimationFrame loop walks a sine wave along the letters and writes font-variation-settings, so the word breathes in width and weight like a live signal.

It is velocity-reactive: the loop tracks how fast you scroll and feeds that into the amplitude, so a quick flick stretches and thickens the signal before it decays back to rest. Updates are capped at around 40fps, each letter is layout-contained, and off-screen headlines pause, to keep the reflow of font-variation-settings honest.

No colour is spent on hierarchy. Big or small, bold or thin, wide or narrow, that is the whole type system.

Each show is its own frequency at /shows. Tuning between them uses the native View Transitions API through Astro. The station ident in the corner, the LW mark and the pulsing ON AIR lamp, is a persistent anchor: it is kept across every navigation so the lamp never restarts.

Each show title on the home page shares a transition-name with its show headline, so clicking a frequency morphs that title up into the full headline, and going back reverses it.

The deliberate anti-cliche is the colour. A late-night station begs for black and neon. Instead this is a light, printed, concrete-poetry palette: warm paper, deep ultramarine ink, and one hot coral used only as the signal. It reads like a risograph flyer for a pirate broadcast, not a streaming dashboard.

Coral is an accent, never body text. Where coral carries words it drops to a deeper coral for AA contrast against the paper.

Split headlines expose the full word as an aria-label with the letters hidden from screen readers, so nothing is read out one character at a time. There is a skip link, a single h1 per page, logical headings and visible focus states.

Reduced-motion is a designed second experience, not a kill switch: the kinetic type settles onto a fixed, fully legible instance, the broadcast band stops scrolling and becomes a plain horizontal list, and View Transitions fall back to ordinary navigation.