Fresh Air - Breathing Visualizer

Fresh Air is a multi-modal breathing guidance tool that uses visual rhythms and ambient sound to help users practice and maintain various breathing patterns for different contexts like focus, relaxation, and stress relief.

The Challenge Fresh Air Addresses

In our fast-paced lives, stress responses and the demands of daily routines often lead to suboptimal breathing patterns. Instead of calm, diaphragmatic breaths, many of us unconsciously adopt shallow, rapid, or irregular breathing. This not only diminishes oxygen intake but also exacerbates feelings of anxiety, reduces focus, and negatively impacts overall well-being. Prolonged periods of such unhealthy breathing can disrupt the body's natural rhythms, contributing to a cycle of stress and decreased performance.

Fresh Air is designed to counteract this. It leverages the principle of entrainment, using synchronized visual and auditory cues to gently guide your breath back into healthy, intentional rhythms. Whether you need an active guide for focused breathing exercises or a passive assistant to subtly remind you throughout your day, Fresh Air helps you cultivate mindful breathing, enhancing your calm, focus, and overall vitality.

Features

• Multiple Visual Modes: Choose from Orb, Wave, Particles, Geometric, and various WebGL-based shader effects (Plasma, Ripple, Tunnel, Fractal) to guide your breath visually.
• Dynamic Sound Design: Enhance your breathing practice with Sine Wave, Triangle Wave, Binaural Beat, Harmonic Series, or Nature Sounds, all synchronized to your breath.
• Diverse Breathing Patterns: Practice pre-set patterns like Regular Breathing, Box Breathing, 4-7-8 Calm, Stress Relief, Energy Boost, ADHD Focus, and Grief Support. The tool adapts to these patterns for precise guidance.
• Peripheral Mode: Subtle visual indicators at the screen edges for ambient awareness, perfect for maintaining focus without direct gaze.
• Minimal Mode: A distraction-free interface showing only the breath text and a discrete exit button.
• Pomodoro Timer Integration: Utilize an integrated Pomodoro timer to structure work and break sessions alongside your breathing practice.
• Real-time Feedback: See your current breath phase, session time, and breath count.

How to Use

1. Download/Clone: Get the project files.
2. Open index.html: Simply open the index.html file in any modern web browser.
3. Start Breathing: Click "Start" to begin a session. Use the controls to change visual modes, sound modes, and breathing patterns.

Technologies Used

• HTML5
• CSS3
• JavaScript (ES6+)
• WebGL (for advanced shader effects)
• Web Audio API

Project Structure

• index.html: The main application file containing the UI, styling, and JavaScript logic.
• DESIGN.md: A detailed design document outlining the core concepts, features, technical considerations, and user experience flow.

Enjoy a moment of fresh air!