Personal Prototype · Interface Design · Web Audio API
Guided Self-Regulation Interface
An EMDR/ART-inspired interface prototype exploring guided sessions, real-time browser audio, and local session state. The focus of this case study is the interaction design and engineering.
I built this to explore how a guided interface can coordinate narration, visual movement, audio, and user input without becoming difficult to control. Session transitions, interruptions, and clear ways to pause or exit were central design problems.
Session state lives in the browser and disappears when the tab closes. The prototype does not need an account or a backend to store session responses.
The modes draw on EMDR, ART, and meditation exercises. This is an interface experiment, not a clinically validated treatment product.
Four modes
EMDR
Safe place, butterfly hug, container, resource installation. Each paired with bilateral eye movements.
ART
Select a stressful scene, process with fast bilateral movements, rescript it. Loops until distress drops below 2.
Meditation
Hypnotic induction, binaural tones deepening from theta to delta over 30 minutes, breathing sync, anchoring.
Lateral
Fully adjustable bilateral dot: speed, binaural frequency (0-40 Hz), pink noise, all live via sliders.
Guided meditation mode
Lateral mode with live controls
Engineering decisions
Real-time audio synthesis, no sound files
The entire soundscape (binaural beats, pink noise, isochronic pulses, sub-bass heartbeat, breath-cue chimes) is generated in-browser with the Web Audio API. No pre-recorded audio for the sound engine. ElevenLabs MP3s handle narration only, with Web Speech API as fallback.
Async narration chain with cancellation
Each narration cue returns a Promise that resolves when audio finishes. Sessions chain cues with async/await, guaranteeing each phrase completes before the next begins. Phase transitions cancel cleanly mid-chain without cutoffs or race conditions.
Distress-gated session flow
SUD (Subjective Units of Distress) scores gate entry, pace ART processing rounds, and trigger an adverse event protocol at 10. If distress spikes, the session exits immediately, runs a grounding exercise, and lands on a crisis resources page. No navigation away until the user is ready.
57 tests on safety-critical paths
The test suite covers session state transitions, audio timing, SUD gate thresholds, and the adverse event protocol. The paths that matter most are all tested: what happens when distress spikes mid-session, whether phase transitions cancel without cutoffs, and whether the crisis page renders and holds correctly.
Safety design
Consent gate before every session
Crisis resources on adverse event exit
Every session starts with a consent gate and a baseline SUD check. You can't enter a processing session if your starting distress is already high. During ART, the score is checked after each bilateral set.
If distress hits 10 at any point, the session exits immediately, runs a grounding exercise, and holds on the crisis resources page. There's no button to skip past it and no way to navigate away. If someone is in acute distress mid-session, the UI shouldn't be another problem they have to solve.