Generative Assets · Build notes · Nº 9
A playable 1949 night switchboard. You are Marion Voss on the cords until one o'clock; when a lamp lights you patch caller to caller and see the shift's small stories through — a doctor, an elopement, a chimney fire. Every ring, click and murmur is synthesized live; every visual is drawn in SVG. No recordings, no pictures.
Nine out of ten "vintage telephone" pages are a photograph and a caption. The bet here was that a switchboard is not a picture — it is an instrument, and its whole meaning lives in the physical act of joining two people with a length of fabric-covered cord. So the single job of the page is that verb: patch. Drag a plug into a flashing jack, carry its twin across the board to the number they asked for, listen for the circuit to close, then take the cords down and file the ticket. The narrative — eight interleaved calls across one night — is the reward for operating the machine correctly, not decoration around it.
Audience: anyone who likes a small, complete, hand-made thing. It should feel less like a website and more like a fifteen-minute shift.
Argued entirely from the object: a walnut cabinet under a single desk lamp, brass hardware, red cord silk, and the amber glow of a calling lamp. Nothing here is a "brand colour" — it is the physics of a dim 1949 exchange room.
Caslon is the right period voice: an English foundry face a 1949 telephone company would have set its letterhead in. The Display cut carries the masthead at 140px; the Text cut, in italic, does the operator's murmured stage-directions. It gives the page its dignity — this is a public utility, not a toy.
Everything mechanical is monospaced: jack numbers, the shift clock, the headset feed, the ticket log. The tabular grid reads as stamped brass plates and typewritten dockets, and holds the numbers in rigid columns the way a real board would. The tension between engraved Caslon and stencilled Plex Mono is the visual system.
The whole board is one hand-built inline SVG. Each patch cord is three stacked paths — a dark shadow, the red silk, and a dashed highlight for the fabric weave — redrawn every frame as a single quadratic Bézier from the shelf seat to the plug head. The control point hangs below the chord by a "pulley-weighted" slack term, so the cord pays out just enough rope and droops most at mid-reach, like real weighted patch cord. A tiny spring integrator gives each plug lateral sway and a rotation that lags the drag, so the plugs swing as you carry them. Pointer events drive drag-to-patch; the same jacks answer to tap and to keyboard, so the instrument is fully operable without a mouse.
The entire room is Web Audio. A 50/100 Hz mains hum and filtered valve-hiss sit under everything at a whisper. Ring cadence and ringback are two-tone oscillator bursts on a repeating schedule; the plug "chock" is band-passed noise plus a pitched thump; a live call is two band-pass "voices" trading random syllables to sound like muffled talk down the line. Nothing is recorded — it is oscillators and noise buffers doing an impression of 1949.
The headset column types each line character-by-character with a blinking caret, sequenced by a small async state machine (incoming → answered → connecting → talking → clearing → filing). It carries the dialogue and the operator's instructions, and quietly narrates wrong jacks — a crossed line gets an in-character complaint and a mark against your night.
One requestAnimationFrame loop, woken only while something moves and parked the instant the board is still; it exits entirely when the tab is hidden and the audio context suspends with it. Reduced-motion settles the cords, stills the lamps and the caret, and shortens every tween. No canvas, no WebGL, no libraries — SVG, Web Audio and about forty kilobytes of hand-written JavaScript.
Found: the "Come on duty" overlay copy sat directly over the jack name-plates behind it, so the invitation and the labels tangled into an unreadable knot at the centre of the board.
Changed: gave the overlay's inner text its own soft radial scrim and roomier padding, so the invitation lifts cleanly off the board without hiding it. Re-read type scale, hairline rules and contrast across the page — all held.
Found: once a call connected, the cords just sat there — the most important moment, two strangers joined, had no visible payoff, and there was no reward for hovering the shelf.
Changed: enriched the signature — while a call is live, an amber "current" now drifts along the connected cords' weave via an animated dash offset, then clears the instant the cords come down. Added a quiet brass hover-glow on seated plugs so the shelf feels pickable. Both gated for reduced-motion.
Found: at 375px the board pushed the page ~400px wide — a single-column grid track and a nowrap section tag refused to shrink below their content and leaked horizontal scroll.
Changed: switched the mobile deck track to minmax(0,1fr) so the board scrolls inside its own frame, and let the section tags wrap; page is now clean to 375. Applied the Chanel rule and removed a faint CRT-scanline overlay — an anachronism the SVG's wood grain already outclassed. Verified focus states, the reduced-motion path, and rAF/audio pausing on tab-hide.