Guided Breathing with WebGL: A 6-2-6 Interactive Experience
Mental health and focus are paramount in today’s fast-paced digital world. Following the success of our brainwave entrainment applications, we decided to tackle another facet of well-being: conscious breathing.
We are excited to unveil our latest Coni WASM application: the WebGL Breathing App, a visual and auditory experience built from scratch to guide you through a calming 6-2-6 breathing exercise (6 seconds inhale, 2 seconds hold, 6 seconds exhale).
Creating a Living UI
Unlike traditional breathing timers that simply show a growing circle, we wanted to build something that feels alive. We designed an interactive menu where you can set your Mood—choosing from Calm (Cyan), Warm (Orange), or Focus (Purple).
When you begin the exercise, the background ambient noise and procedurally generated chimes start to play. These sounds are driven exclusively by the Web Audio API, seamlessly scheduled by native Coni functions. By keeping the logic isolated from standard JS runtime hiccups, the audio remains perfectly consistent and jitter-free.
The Power of the GPU
Under the hood, the application generates a cluster of 30,000 geometric particles natively calculated and cached in WebAssembly. We pass these points to a WebGL shader alongside your selected mood color and a continuous u_breath_factor.
As you breathe in, the sphere expands, its radius scaling dynamically while its vertices gently undulate via trigonometric sine and cosine manipulations applied directly in the vertex shader. The color intensity swells, mimicking an expansion of energy.
When you exhale, the sphere contracts into a tight core.
;; We calculate the phase completely in WASM
(defn update-phase [t phase-text]
(let [cycle-time (fmod t 14000.0)
inhale-time 6000.0
hold-time 2000.0
exhale-time 6000.0]
(if (< cycle-time inhale-time)
;; ... math logic to ease the expansion smoothly
By offloading the visual transformations to the GPU and maintaining strict state alignment natively in WASM, we’ve achieved a silken 60fps experience that feels organic rather than robotic.
Try it Now
We have deployed the new application to our WASM apps environment. You can access it directly here:
Take a minute for yourself today. Select your mood, listen to the ambient chimes, and simply breathe.