Breath 136.1

A web-based breath synchronisation experience that takes the breath series out of the room and makes it available anywhere.
My RoleSole Designer ScopeWeb-based Breath Synchronisation Experience MethodsSecondary Research, Creative Coding ToolsWeb Interaction – P5.js, Web Audio
AI-assisted Development – Claude, Gemini
ContextIndependent – Extended from MA:UX Brainscapes, MAY 2026
What is it like to breathe together, the way matching someone else’s breath eases you into sleep before you notice? The final phase of the Breath series, this web experience reads your breath and guides it into sync with a generated rhythm, using sound and visuals as feedback.

Take a Breath

From Room to Anywhere

This project is the third and final phase of the Brainscapes brief, which asks designers to make brain activity in response to aesthetic experience visible, tangible, or interactive. The group project Aware of Breath explored breath through vision and sound, but worked only inside a purpose-built space; the individual Breath Knead Kit guided 5-5 breathing through smell and touch, but remained a single-use object.

For the closing phase I wanted an experience available anytime and anywhere, so I built it in p5.js for rapid prototyping and web deployment.
Phase 1: Aware of Breath
Phase 2: Breath Knead Kit
Phase 3: Breath 136.1 - This Project

Tuning Two Bodies to One Rhythm

While sharing a hall of residence, I noticed something: a sleeping roommate’s loud breathing is disruptive at first, yet matching my own breath to that rhythm eventually sends me to sleep. Research on physiological entrainment, where the body locks onto a stable external rhythm, and on breath-brainwave coupling supports this.

I treated it as a shift from the introspective focus on one’s own breath in Aware of Breath toward a ‘Relational Entrainment’ that synchronises the body with an external rhythm, carrying over the 5-5 pattern validated in Breath Knead Kit as the guiding tempo so users settle their nervous system by breathing in unison with the screen.
Calming the body through breath is not only an inward act of attending to one’s own rhythm, but can also become a relational one, settled by syncing to a steady rhythm outside the self.  

Designing for Visible Resonance

On the web an audio-visual approach was unavoidable, so I leaned into visual density, drawing on the restrained language of computational design studios.

I split the screen into two layers: a field of layered waves that rises and settles with the guide’s breathing cycle, and two spheres above it representing the guide and the user. The guide sphere stays stable and evenly distributed to read as an external algorithm, while the user sphere fluctuates organically and rotates with breathing intensity, translating the contrast between external order and inner life into form.

Because the microphone reads the signal on the exhale, I let the user sphere expand on exhaling rather than following anatomical accuracy, judging that an immediate feedback loop better motivates entrainment. The background warms from cool lavender to cream as synchronisation strengthens.

Sound as Acoustic Friction

I needed an external guide sound to act as the benchmark for synchronisation. I set the fundamental to 136.1 Hz, the meditative OM frequency derived from translating the Earth’s rotation into a musical octave, which also gives the project its name.

I avoided discrete sounds like gongs or chimes, since the brain registers them as novel events that break entrainment, and instead built a ‘Procedural Soundscape’ entirely from mathematical signal manipulation with no external audio. When breathing is out of sync a faint acoustic beat appears; as it aligns the tones converge into a harmonious chord, while a low-pass-filtered pink noise tracks the user’s input to give a wind-like feedback close to the spectrum of human breath.

Learning by Building

Deploying to the web resolved the series’ environmental dependencies, freeing it from both the spatial reliance of Aware of Breath and the single-use nature of Breath Knead Kit. A headset and device microphone remain the ideal setup, but a web medium limits control over input and output, and richer rendering such as a Liquid Glass refraction or denser dot fields meant balancing the 2D limits of p5.js against lower-spec devices.

The same mechanism, synchronising breath to an external guide, could extend to other domains that depend on sustained practice, such as vocal and breath training for actors.

Credits
Interaction DesignDahoon Lee

Read More
Installation Aware of Breath My breath, my existence. Installation Museum of Memory: Pink Pink that brings your long-forgotten memories back to life.