🫁 Breathe: A Quiet Place to Breathe
Most breathing apps are loud. They want an account, they push subscriptions, they track every session, and they interrupt a quiet moment with ads. Breathe was built the other way around: open it, breathe, close it. Nothing leaves the device, and after the first visit the whole app works with the Wi-Fi off.
What it does
- Three guided techniques out of the box — Wim Hof, box breathing, and 4-7-8 — each with its own phase timing, cycle counts and set structure.
- A living scene rendered with PixiJS: a flat cyan sky, a sun that breathes with you, drifting cel-shaded clouds, a floral field, and a companion bunny that perks up on the inhale and settles on the exhale.
- Sets, holds and rounds with pause, restart and exit controls, plus a resume flow that restores an interrupted session.
- Optional ambient audio — synthesized phase chimes and a few licensed loops — unlocked on the first gesture and paused automatically when the tab is hidden.
- A weather widget for context when you step outside; it is the only network feature and it degrades gracefully offline.
Built to be added to, not rewritten
The interesting engineering is in what the app refuses to hard-code. A technique-driven engine walks any configuration of phases — inhale, exhale, hold, recovery — and emits typed events; the UI and the scene subscribe to them. Adding a new technique is a new config file and a registry entry, not a change to the engine. The scene follows the same rule: it is a pure renderer that maps a session snapshot to visual states, with a character interface so new companions are additive.
Performance is treated as a first-class feature rather than a fine-tuning pass. A device profile classifies hardware as low, mid or high and caps DPR, MSAA and effect budgets accordingly; an adaptive governor watches frame time and steps render resolution down when it has to. Idle scenes drop to 30fps so a phone left open on a table is not burning battery.
The rebrand that did not lose anyone's data
The product began life as Breath Badger. Renaming it to Breathe touched the storage namespace, so every existing user's settings, streaks of practice and preferences had to move with it. A small two-tier migrator folds the old breath-badger:* keys into breathe:* directly — newest-first, non-clobbering, and idempotent — so nobody silently lost their setup to a rename.
Tech stack
| Technology | Role |
|---|---|
| TypeScript | Strict, type-safe application code |
| Lit | Lightweight web-component UI shell |
| PixiJS | WebGL scene: shaders, particles and characters |
| Vite | Dev server and production build |
| vite-plugin-pwa | Installable, offline-first app shell |
The result
Breathe is live at breathe.t3apps.com as an installable PWA, with accessibility, best-practices and SEO scores of 100 in Lighthouse. It is the studio's own argument in miniature: a small app, a calm interface, and an architecture built to keep growing without growing heavy.