I started doing breathwork about 9 years ago and kept bouncing between apps that were either $15/month subscription walls or bloated with guided meditation content I didn't want.
I just needed a timer that paces my breathing visually and gamifies it with streaks.
So I built one. It's a single HTML file — no framework, no build step. You pick a breathing pattern, press start, and follow the ring. There are 9 patterns: Box Breathing, 4-7-8, Coherence, Physiological Sigh, and a few others. Each phase (inhale, hold, exhale) gets a distinct color on the ring so you know where you are even with your eyes mostly closed. Audio tones mark transitions if you want them.
Some technical choices I found interesting while building it:
Web Worker for timing — setTimeout drifts badly when the tab is backgrounded, so the actual tick runs in a worker thread
Web Audio API for the phase tones — needed an AudioContext keep-alive pattern on iOS Safari to prevent the system from suspending audio
CSS animations for the ring progress — originally tried canvas, but a single SVG stroke-dashoffset transition turned out smoother and simpler
The whole thing is ~90KB including all the CSS and JS inline
You can optionally sign in with email to save sessions and streaks. Auth and data go through Firebase — credentials never hit my server, and Firestore security rules scope each user to only their own docs.
It works offline as a PWA. No signup required to use it — just open the URL.
Happy to answer questions about the implementation or the breathing patterns themselves. Next steps, thinking about getting it into App and Play stores so I can sync with Apple Health.
I started doing breathwork about 9 years ago and kept bouncing between apps that were either $15/month subscription walls or bloated with guided meditation content I didn't want.
I just needed a timer that paces my breathing visually and gamifies it with streaks.
So I built one. It's a single HTML file — no framework, no build step. You pick a breathing pattern, press start, and follow the ring. There are 9 patterns: Box Breathing, 4-7-8, Coherence, Physiological Sigh, and a few others. Each phase (inhale, hold, exhale) gets a distinct color on the ring so you know where you are even with your eyes mostly closed. Audio tones mark transitions if you want them.
Some technical choices I found interesting while building it:
Web Worker for timing — setTimeout drifts badly when the tab is backgrounded, so the actual tick runs in a worker thread Web Audio API for the phase tones — needed an AudioContext keep-alive pattern on iOS Safari to prevent the system from suspending audio CSS animations for the ring progress — originally tried canvas, but a single SVG stroke-dashoffset transition turned out smoother and simpler The whole thing is ~90KB including all the CSS and JS inline
You can optionally sign in with email to save sessions and streaks. Auth and data go through Firebase — credentials never hit my server, and Firestore security rules scope each user to only their own docs.
It works offline as a PWA. No signup required to use it — just open the URL.
Happy to answer questions about the implementation or the breathing patterns themselves. Next steps, thinking about getting it into App and Play stores so I can sync with Apple Health.