Mindful Breathing Visualizer
A Calming Breathing Companion for Mind & Body
A gentle breathing circle that moves with you at 6 breaths per minute with soft harmonic chimes, helping you pause, relax, and reset.
Architecture Highlights
- •Gentle rhythm timed to match natural calming heart rhythms (0.1 Hz frequency).
- •Smooth expanding and contracting SVG circle utilizing CSS cubic-bezier timing.
- •Soft musical tone cues via Web Audio API oscillators for eyes-closed meditation.
- •Runs entirely in client browser with zero tracking, zero cookies, and zero analytics.
Engineering Hurdles Solved
- •Achieving jitter-free 60 FPS animation synchrony across low-power mobile devices without draining battery.
- •Calibrating harmonic Web Audio envelope transitions (ADSR) to prevent acoustic click artifacts.
Try the Breathing Companion
Take a slow, deep breath and follow the circle as it expands and contracts. The soothing tones and animation run right on your phone or computer—nothing is saved or sent to any server:
Ready When You Are
5.5s Inhale · 5.5s Exhale (0.1 Hz Baroreflex Sensitivity)
Executive Overview
The Mindful Breathing Visualizer translates clinical respiratory science (specifically 0.1 Hz vagal nerve stimulation and respiratory sinus arrhythmia) into fluid geometric animations. Built as an open-source module, it integrates seamlessly into wellness portals, clinical waiting rooms, and meditation apps.
Commercial wellness apps have become increasingly coercive—bombarding vulnerable individuals with streak countdowns, paywalls, push notifications, and silent third-party behavioral trackers. This project proves that digital health tools can be built with deep mathematical craftsmanship, radical privacy, and sensory kindness.
Breathing at 6 breaths per minute (~0.1 Hz frequency) synchronizes respiratory sinus arrhythmia with arterial baroreflex oscillations. This resonance frequency aligns cardiac output with pulmonary circulation, stimulating the vagus nerve and switching the autonomic nervous system from sympathetic (“fight-or-flight”) to parasympathetic (“rest-and-digest”) dominance.
Key Architectural Breakthroughs
1. HRV Coherence & Baroreflex Sensitivity
Clinical literature demonstrates that slow-cadence autonomic breathing reduces salivary cortisol, lowers systolic blood pressure, and boosts Heart Rate Variability (HRV) coherence. The visualizer enforces an exact 10-second respiratory loop:
- Inhale (4.0s): Gentle expansion accompanied by a rising 432 Hz sine wave.
- Hold (1.0s): Brief pause stabilizing pulmonary gas exchange.
- Exhale (4.0s): Smooth contraction accompanied by a grounding 324 Hz sine chime.
- Rest (1.0s): Natural physiological refractory interval before the next cycle.
2. Sensory Inclusivity & Audio Navigation
Unlike commercial meditation apps that depend exclusively on visual cues, this visualizer includes synthesized Web Audio harmonic sine waves:
- 432 Hz Root and 324 Hz Fifth: Natural Pythagorean acoustics engineered to minimize acoustic cognitive load.
- ADR Envelope Smoothing: Linear ramp transitions (attack: 80ms, decay: 120ms) eliminate digital speaker clicks and abrupt volume spikes.
- Eyes-Closed Meditation: Users resting with their eyes closed or individuals with visual impairments can follow the entire cycle through acoustic resonance without glancing at a screen.
3. Radical Privacy (Zero Data Harvesting)
In adherence to the PhilGear Humane Engineering Charter:
- Requires zero user accounts or logins.
- Transmits zero analytics, pixels, or behavioral telemetry.
- Functions 100% offline once cached in browser memory.
- Contains zero coercive gamification, streaks, or manufactured urgency.
4. Embeddable Multi-Framework Architecture
The core visualizer is designed for universal portability. With zero external framework dependencies, the mathematical pacing engine can be dropped directly into React, Vue, Angular, Svelte, or native iOS/Android WebViews in fewer than 20 lines of code.
Explore More Systems
View full portfolio of AI architectures, creative technology, and open systems.