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.