Build note · Generative Assets
FOOTFALL is a fictional late-night walk down one wet city block, staged entirely in layered SVG. The page has one job: to be dead still until you move, then move only as far as you walk it. Your cursor X is your position on the street — the layers slide, the sodium lamps bloom as you pass beneath them, your reflection walks the wet road, and a WebAudio footstep rhythm keeps pace with your speed. Stop, and the street holds its breath.
Wave 4 is written in the second person: the page is inert until you drive it. FOOTFALL takes that literally — you are the pedestrian. There is no autoplay, no scroll, no timeline. The only clock is your hand. Move left-to-right and you walk the block from the underpass to the iron bridge; the world you pass is a noir set of shuttered arcades, an all-night laundromat, a noodle house going cold, and a tram stop where the last car left at 00:48. Because nothing advances on its own, standing still is a real state: the walker plants both feet, the footsteps fall silent, and the block simply waits for you.
Four values, argued from a rain-wet street at night: the cold air, the sodium lamps, one neon holdout, and the slick of the road.
Every scrap of body copy runs on a warm off-white ink (#EDE3D2) with dimmer tiers for captions and readouts, all sitting on a top/bottom scrim gradient — so no small text ever leans on the bright sodium or neon and drops below 4.5:1 over the moving scene.
Bebas Neue is a tall, tightly-set condensed cap face — the exact vernacular of transit signage and neon, so it does the shopfront names, the tram board and the metre counter without a costume change. Source Serif 4, set in italic, carries the second-person narration in the readout — a quiet human voice against the hard signage, so the captions ("one dryer still turning at 2 a.m.") feel spoken rather than posted. The one act of typographic bravery is letting the distance readout run at display scale in sodium, so your progress down the block is the loudest thing on the page.
The trap in "footsteps that pace to your speed" is to run them on a metronome and scale its tempo — which drifts out of sync with the visible legs the instant you change pace. FOOTFALL instead accumulates the distance walked and fires a footfall every half-stride of road travelled. Speed falls out for free: sweep your cursor quickly and you cover ground fast, so the steps crowd together; ease off and they space out; stop, and no distance accrues, so the walker's legs freeze mid-plant and the audio goes silent. The same distance phase drives the leg swing, the body bob and the foot-splash ripple, so the sound you hear is welded to the step you see — one model, seen and heard at once. Every footfall also flicks the pace indicator and rings a live steps-per-minute readout, so the instrument is honest about what your hand is doing.
Driving the walk from the start exposed a real defect: the shopfronts were laid out in raw layer coordinates, so the first station — the underpass, where the opening line lives — sat at a negative walk position you could never reach, and the readout opened on the wrong location entirely. Re-centred every station so the six locations distribute evenly across the reachable walk, with the underpass sitting under you at rest, so the narration now reads in sequence. Lifted the "move to walk" invitation clear of the centre sign it was colliding with, warmed the wet-road sheen so the asphalt reads as rain-slicked rather than flat, and confirmed every caption runs on the off-white ink over a scrim — the sodium and neon accents fall short of 4.5:1 as small text.
Enriched the signature where it lands hardest: gave every lamp and sign its own reflection smear, and mirrored the walker himself into the wet road with a pace-driven shimmer — the "you" of the piece, watching yourself walk. Added two second-read details: a lit upper window above the noodle house with a still figure standing in it, and a Line 12 tram that glides through when you reach the tram stop. Driving that tram is what caught the pass's real bug — it had been parented to the road plane, so the parallax translated it clean off the screen and it was never actually seen; moved it onto its own un-parallaxed layer so it now crosses the frame right where "the next tram is only a rumour." Tuned the lamp bloom to a gaussian so light swells and fades as it comes overhead rather than snapping on.
Locked the reduced-motion path: no animation loop and no audio — the street simply follows your pointer, held quiet, with a note saying so. Guarded the audio graph against NaN (every gain and frequency is clamped and floored above zero) and the walk integrator against a non-finite position after a tab-switch. Verified at 375 / 768 / 1440 with the wordmark, nav and HUD fully inside the frame and no horizontal overflow; the colophon and tagline step aside on the smallest screens. Pulled one ornament back (Chanel rule): the distant skyline windows had been flickering between sodium and neon, so the pink stopped meaning anything — the far windows are now sodium only, and the neon is reserved for the handful of shop signs actually still lit.