The stage is
the interface.
The Foley Stage is built as a room you enter, not a portfolio page you scan. Charcoal acoustic panels, an oak workbench, numbered hardware, amber meters, cue red, and take green establish a prop-cluttered soundstage after hours. The visitor moves from the control booth into a working exercise, then through paperwork, oral history, a prop archive, and finally room tone.
Specific fiction makes the room credible: Morrow Pictures, Stage B, recordist Elsie Voss, and a 1986 noir called The Last Receipt. Props have repair notes and screen credits. The exercise allows imperfect timing because that is the point: a sound can miss the frame yet fit the actor. Participation, documentation, and atmosphere all tell the same story.
One clock.
Every illusion.
perform()playSound()markCue()captured[]The 20-second shared clock lives in main.js. currentTime() drives the SMPTE-style timecode, red playhead, cue coach, and CSS scene delay. updateFrame() keeps the walking silhouette, door, glass, and feedback rig on the same frame. drawRain() renders a capped canvas field using dimensions cached by ResizeObserver, so the animation does not read layout on every frame.
The featured gravel cue is six targets, not one generous click. markFootstep() finds the nearest unclaimed heel, converts error to 24 fps, and lights the matching lamp. setRehearsal() punches a 4.3-second practice loop; completing all six calls printWalk(), which exposes the paper timing slip with each heel’s frame offset. Holding gravel repeats every 540 milliseconds—the actor’s gait—while filtered noise, oscillators, gain envelopes, stereo panning, and compression synthesize every prop.
Material, then
meaning.
has a sound.
PROCEDURE / IBM PLEX MONOF4-17 00:00:02:14
GRAVEL / SIX HEELS
TAKE: FRAME LOCK
Bricolage Grotesque supplies broad, tool-like display forms with theatrical scale; IBM Plex Mono handles timecode, tape labels, cue sheets, controls, and microcopy. Warm cream stays off pure white. Amber means attention, red means recording or error, and green is reserved for a take that has actually landed.
Reproduce
the approach.
Build a self-contained HTML/CSS/JavaScript experience around a tactile profession. Make the central metaphor a working interaction driven by one shared timeline. Synthesize sound or procedural visuals without remote assets. Support touch, keyboard, reduced motion, hidden-tab pausing, clear focus, and responsive layouts at phone, tablet, and desktop widths.
Lock a material palette and two role-specific typefaces before coding. Require every pictured object to be built from CSS, SVG, or canvas. Then ask for working documents, practitioner voices, material histories, and an emotionally quiet ending. Most importantly: make the visitor practice the craft, give precise feedback, and let a near miss reveal something human.