Features

• Visual breathing guide — an expanding and contracting circle leads your breath
• Three breathing modes to suit your needs (see below)
• Real-time feedback — phase name, countdown timer, session duration, cycle counter
• Dark theme with warm orange accent — easy on the eyes
• Fully responsive — works on desktop, tablet, and phone
• Zero dependencies — one HTML file, all CSS and JS inline
• GitHub Pages ready — just drop index.html into a repo

Breathing Techniques

4-7-8 — Relaxing Breath

Also known as the relaxing breath. The extended exhale activates the parasympathetic nervous system, promoting calm and helping with stress, anxiety, and sleep.

4-4-4 — Box Breathing

Used by Navy SEALs, first responders, and meditators. Each phase is equal length, creating a "square" pattern. Excellent for centering focus and managing acute stress.

4-2-4 — Energizing Breath

A shorter hold keeps energy up while the longer inhale and exhale maintain rhythm. Great for a quick reset when you need focus without winding down.

Breathing Cycle Flow

flowchart LR
    I["Inhale<br/>4s"] --> H1["Hold<br/>2 – 7s"]
    H1 --> E["Exhale<br/>4 – 8s"]
    E --> H2["Hold<br/>0 – 4s"]
    H2 --> I

One full cycle comprises inhale → hold → exhale → (optional) hold, with durations varying by mode. The circle expands during inhale, stays expanded during the first hold, contracts during exhale, and stays contracted during the second hold (box breathing only).

Usage

1. Open index.html in any modern browser
2. Select a breathing mode (4-7-8, 4-4-4, or 4-2-4)
3. Press Start
4. Follow the circle: watch it expand as you breathe in, hold as you pause, and contract as you breathe out

File Structure

breathe/
├── index.html      # Single-file app (all markup, style, and logic)
├── README.md       # This file
└── LICENSE         # MIT

Deploy on GitHub Pages

1. Fork or copy this repo
2. Push index.html to a repository named breathe
3. Go to Settings → Pages and select main branch as source
4. Your app will be live at https://<username>.github.io/breathe/

License

MIT — use it freely, modify it, share it. See LICENSE for details.