The Breathing Box is a web-based relaxation tool designed to guide users through rhythmic breathing exercises. It utilizes the HTML5 Canvas API to render a visual cue—a expanding and contracting square—synchronized with text instructions ("Breathe in", "Breathe out"). The application is contained within a single HTML file for ease of deployment and portability.

• Visual Guidance: A soft blue square animates using a sinusoidal wave pattern to mimic natural breathing rhythms.
• Synchronized Text: Text cues update dynamically based on the animation phase (expansion vs. contraction).
• Adjustable Speed: Users can modify the breathing cycle duration (ranging from 2 seconds to 8 seconds) in real-time using a range slider.
• High-DPI Support: The canvas implementation accounts for device pixel ratio, ensuring sharp rendering on high-resolution displays (Retina, etc.).
• Responsive Design: The widget adjusts to the container width while maintaining its aspect ratio.

The project is built using standard web technologies without build steps or complex dependencies:

• HTML5 Canvas: Handles the rendering of the square, shadow effects, and text.
• JavaScript (ES6): Manages the animation loop (requestAnimationFrame), state logic, and event listeners.
• CSS / Tailwind: Utility classes (loaded via CDN) handle the layout, typography, and UI component styling.

• animate(timestamp): The main loop that calculates the elapsed time and determines the current size of the box based on a cosine wave.
• resizeCanvas(): Adjusts the canvas internal resolution and display size to match the parent container and device pixel density.
• draw(factor, text): Renders the frame, clearing the previous state and drawing the rounded rectangle and text overlay.

1. Download the index.html file.
2. Open the file in any modern web browser (Chrome, Firefox, Safari, Edge).
3. Use the slider at the bottom of the widget to adjust the breathing speed.

OR

1. Use the GitHub Pages instance

To modify the default behavior, edit the configuration constants within the <script> block:
// Example Configuration
const BASE_COLOR = '#93C5FD'; // Change the box color
const TEXT_COLOR = '#1E3A8A'; // Change the text color
let cycleDuration = 4000; // Default starting duration (ms)

• Tailwind CSS: Imported via CDN for styling. No local installation is required.

Generated by Google Gemini 3 Pro