🌙 Breathe

A calm, focused 4-7-8 breathing experience in your browser. ✨

Inhale 4s · Hold 7s · Exhale 8s
Designed for quick nervous-system reset and a smoother return to focus. 🫁

✨ Highlights

• Guided 4-7-8 breathing cycle with smooth phase transitions
• Animated orb visual that expands, holds, and contracts with each phase
• Subtle starfield background for a calm atmosphere
• Built-in round counter to track breathing cycles
• Helpful info modal explaining the science behind each step
• Responsive layout for desktop and mobile
• Accessibility touches: keyboard escape handling, live instruction updates, reduced-motion support

🚀 Run Locally

No build step needed.

1. Clone or download this repository.
2. Open index.html in your browser.

Optional local server:

python3 -m http.server 8000

Then visit http://localhost:8000.

🧭 How To Use

1. Press Start.
2. Follow the instruction text: Breathe in → Hold → Breathe out.
3. Watch the counter increase after each full round.
4. Press Reset anytime to stop and return to zero.
5. Tap the info icon for a quick science breakdown. 🧠

🛠 Tech Stack

• HTML5
• CSS3 (animations, gradients, responsive design)
• Vanilla JavaScript (state machine + timing logic)

📁 Project Structure

.
├── index.html
├── styles.css
├── script.js
└── demo.gif

💡 Why 4-7-8?

The 4-7-8 pattern is commonly used to reduce stress and help regulate breathing rhythm. This app turns that method into a focused, minimal ritual you can use in under a minute. 🌿

---

Made with calm intent for moments that need a reset. 🤍