Colophon · site 134 · Unseen
How PASSBAND
was made
PASSBAND lays the whole electromagnetic spectrum on a single tuning rail — nineteen powers of ten of light, from hundred-kilometre radio waves to gamma rays smaller than an atom. It is built for anyone who has met the spectrum as a rainbow poster and never grasped how little of it we can actually see. The page has one job: make that honest by drawing every band as dark, and letting only the visible sliver carry any colour at all.
Palette
The spectrum is an instrument, so the ground is instrument-black and the marks are a single cool grey. Colour is rationed: it appears only where light is genuinely visible, which is the entire argument of the piece.
Type
The rail — one signature
The whole spectrum is a single SVG laid on a logarithmic wavelength axis: x maps to log10(λ) from 105 m on the left to 10-14 m on the right — nineteen decades across the rail. A decade of wavelength is exactly a decade of frequency, so one set of tick positions labels both scales at once: frequency above the bar, wavelength below.
Each band is a rectangle filled in one of two near-identical darks — honestly invisible — separated by bright edge ticks and a name. The one exception is the visible band, 700 to 380 nm, filled with a userSpaceOnUse linear-gradient rainbow. On nineteen decades that band is roughly a quarter of one decade — about fourteen pixels, narrower than the cursor. The tuning cursor advects across the rail; a readout resolves wavelength → frequency → photon energy at its position and names the band and what passes through it.
No framework is used — the rail, the tuning loop, the eased chip jumps and the resting drift are plain SVG and a single requestAnimationFrame loop with a clamped delta, paused on document.hidden. At rest the cursor is parked in the microwave band and drifts slowly on a sine; touch it and the drift stops for good.
Iteration log
Split the palette into a bright rail/mark token (#C0C6D0) and a separate derived body-ink (#DBDEE6, ~13:1) so no small copy is set in the mark colour — the recurring contrast failure of earlier waves. Promoted label text off the faintest grey to Ink-2 to hold 4.5:1. Removed a dead showEvery variable left over from the decade-label declutter logic, and gave the readout a strict three-field rhythm (wavelength / frequency / photon energy) with tabular figures so tuning doesn't shift the layout.
Made colour the reward for reaching the visible sliver: the swatch and now the cursor itself take the true sRGB colour of the exact wavelength under it (a piecewise wavelength→RGB), so the one place colour appears is earned by tuning into a fourteen-pixel band. Synced the band chips to the live cursor so the control row lights the band you are actually in during the resting drift. Added a landmark layer — AM, Wi-Fi, the CMB peak, body heat, medical X-ray — decluttered by pixel spacing as a second-read detail.
Verified 375 px with a partial-overflow probe (zero offenders, scrollWidth == innerWidth); collapsed the readout to two columns and dropped the frequency column from the ledger on narrow screens. Confirmed the prefers-reduced-motion path parks the cursor in microwave (3.16 cm · 9.48 GHz) with a fully populated readout — a readable frame, never blank. Drove the tuning headless: 45 arrow-steps moved the band from Microwave to Gamma and the Visible chip lit the swatch to a real spectral green. Confirmed resize re-derives the gradient endpoints and the loop pauses when the tab is hidden. Zero console errors at every breakpoint.
The one thing
If PASSBAND works, a visitor leaves with a single correction to their mental picture: the rainbow is not most of the story, it is a hair's-width exception on a rail nineteen decades long. Everything else is there, everywhere, all the time — and drawn, honestly, as the darkness it is to us.