Bubble Breathing is an immersive, app-like web application designed for guided rhythmic breathing exercises and breath-hold training. It helps you maintain focus and control your pace through a clean, full-screen interface with real-time animations, audio feedback, session tracking, and gamification—without installation required.
-
Personalized Breathing Experience
- Visual Guidance: A dynamic hexagon synchronizes its scale with your breathing rhythm in real time.
- Audio Cues: Synthesized tones and haptic vibration to guide each phase without looking at the screen.
- Custom Cycles: Adjustable rounds, breaths per round, and audio volume via intuitive sliders.
- Variable Pace: Slow, Standard, Fast, and Custom speed modes—the custom mode lets you set the exact cycle time (1.0s–8.0s) with dynamically calculated inhale/exhale ratios.
-
Intelligent Session Management
- Automated Timers: Tracks breathing, retention (breath-hold), and recovery phases automatically.
- Recovery Phases: Guided inhale → hold → exhale recovery sequence between rounds.
- Dynamic Control: Skip any phase at any time.
- Session Summary: Review retention times per round, total time, and averages at the end.
-
📊 Statistics & Gamification
- Stats Dashboard: Premium glassmorphism panel showing current streak, best streak, total sessions, and average retention time.
- Session History: Scrollable list of your last 10 sessions with color-coded performance indicators (⚡ ≥60s, 🌬️ ≥30s, ⏱️ <30s).
- Persistent Tracking: All data saved to localStorage — your progress follows you across sessions.
-
Premium User Experience
- PWA Ready: Install it on your home screen for an offline, app-like experience.
- Dark & Light Themes: Toggle between themes with a single tap; preference is persisted.
- Persistence: All settings (speed, rounds, breaths, volume, language, theme) are automatically saved.
- Multilingual Support: Available in 7 languages: English, Spanish, French, Italian, German, Portuguese, and Simplified Chinese.
- Edge-to-Edge Design: Fully responsive layout optimized for mobile viewports with glassmorphism aesthetics.
Install Bubble Breathing as a Web App (PWA) for the best experience:
- Open the live demo in your browser (Chrome/Android, Safari/iOS).
- Tap the Menu (⋮) or Share (⎙) button.
- Select "Add to Home Screen" or "Install App".
Note: The app is designed to stay responsive even at high zoom levels, as shown in the demonstration below.
The project has been fully rebuilt from vanilla JavaScript to a modern React architecture (V2.0) while retaining its original UI/UX feel.
| Technology | Purpose |
|---|---|
| React 18 | Component-based UI with Context API for state management |
| TypeScript | Strict type checking and robust logic |
| Vite | High-performance bundler and dev server |
| vite-plugin-pwa | Service Worker generation and Web App Manifest |
| Web Audio API | Synthesized audio cues (no external sound files) |
| CSS3 | Glassmorphism, Flexbox, clamp(), dynamic viewport units (dvh, vmin) |
| GitHub Actions | Automated CI/CD pipeline for GitHub Pages deployment |
This project is licensed under the Apache 2.0 License. See LICENSE for details.
HydroCycle is the perfect companion to Bubble Breathing — a guided contrast therapy timer for hot/cold shower training and cold exposure. Built with the same design philosophy (glassmorphism, real-time animations, Web Audio cues, PWA, multilingual), it helps you build resilience through deliberate temperature contrast exposure.
| Bubble Breathing | HydroCycle |
|---|---|
| 🫁 Rhythmic breathing & breath-hold training | 🚿 Hot/cold contrast therapy & cold exposure |
| 🟢 Hexagon scales with breath phases | 🔵 Hexagon changes color (orange→cyan) with temperature |
| 🔊 Inhale/exhale audio cues | 🔔 Transition sirens & countdown beeps |
| 🏆 Retention time streaks | 🥶 Cold exposure streaks |
| ⚡ Performance: ≥60s retention | 🥇 Performance: ≥180s cold exposure |
🧊 Try them together: Use Bubble Breathing to calm your mind before a cold shower, then launch HydroCycle to time your exposure!