Calm Breathing Hub

Main page
Breathing page
Helplines page

Inspiration

Mental health struggles often happen in silence, when no one is awake to help. I wanted to build something that could be there at that exact moment: a calm, gentle website that guides someone through a panic attack with breathing techniques and connects them to real emergency psychological support. The inspiration came from a simple truth: panic attacks peak within minutes, and what helps most in that window is controlled breathing. So the site had to be fast, simple, and soothing.

What it does

Calm Breathing Hub is a mental health support website with three core features: Breathing techniques — interactive, animated guides for panic attacks, including box breathing (4-4-4-4), 4-7-8 breathing, and deep belly breathing. An expanding and contracting circle shows exactly when to inhale, hold, and exhale, with a Start/Stop control for each exercise. Emergency helplines — a list of psychological support phone numbers with country labels and clickable tel: links, so users can call with one tap. Calming design — a soft light-green palette with white text, rounded corners, and generous spacing, built to de-escalate rather than overwhelm. The site also includes a gentle disclaimer that it is not a substitute for professional help.

How we built it

Tech stack: React with TypeScript for the UI and state management lucide-react for lightweight, consistent icons (Play, Pause, RotateCcw, Wind); CSS for the light-green calming palette, white text, and the breathing animation; Vite as the dev environment and build tool. Breathing data model: Each technique is described declaratively, so adding a new one is just a matter of adding an object: ts const exercises: Exercise[] = [ { id: 'box', name: 'Box breathing', phases: [ { label: 'Breathe in', seconds: 4, style: 'inhale' }, { label: 'Hold gently', seconds: 4, style: 'hold' }, { label: 'Breathe out', seconds: 4, style: 'exhale' }, { label: 'Rest', seconds: 4, style: 'hold' }, ], }, ]; State and timing: The component tracks running, hasStarted, phaseIndex, and seconds. A single setInterval decrements the countdown once per second, and when it hits zero the phase advances. A separate effect resets the phase and countdown whenever the user switches exercises, so there is no leftover state from a previous rhythm. Animation: The expanding circle is a single div whose CSS animation duration is set inline to match the current phase. That means the visual and the timer can never drift apart — both are derived from the same phase.seconds value. Accessibility: The phase label and countdown use aria-live="polite" so screen readers announce each change, the exercise picker uses role="group" with aria-pressed, and every interactive element is a real .

Challenges we ran into

Keeping animation and timer in sync. Early versions animated the circle with its own independent CSS loop, which slowly drifted away from the countdown. The fix was to drive the animation duration directly from the current phase, so both come from the same source of truth. State resets between exercises. Switching technique mid-session left the old countdown running. We added an effect keyed on the selected exercise to reset phaseIndex, seconds, and hasStarted cleanly. Balancing simplicity vs. usefulness. Too many options cause decision paralysis during a panic attack. We narrowed it down to three core techniques, each with a short description and one line of guidance. Color contrast. White text on light green can fail accessibility standards. We adjusted the green shade until it met WCAG AA contrast requirements. Emotional responsibility. Writing copy that is warm but not dismissive, and clearly stating that the site is not a replacement for professional care.

Accomplishments that we're proud of

A fully working, animated breathing guide that stays in sync across every phase and every cycle. Three genuinely useful techniques with distinct rhythms, all driven from one small data structure. A UI that feels calming rather than clinical — soft palette, plenty of whitespace, and no aggressive alerts. Accessible by design: live regions for the phase and countdown, real buttons, and clear labels. One-tap emergency calling through tel: links.

What we learned

 Breathing science matters. Box breathing and 4-7-8 work by activating the parasympathetic nervous system. The extended exhale lowers heart rate, which is why patterns with a longer exhale calm the body faster.  Declarative data beats imperative code. Describing each exercise as an array of phases made the component small and made adding new techniques trivial.  Animation and state should share one source of truth. Deriving animationDuration from phase.seconds eliminated an entire class of bugs.  Accessibility and tone are part of the product. How color, language, and pacing feel to someone in distress matters as much as the logic.  Mobile-first thinking is essential when the user might be in crisis on their phone.

What's next for Calm Breathing Hub

Add more guided techniques, such as grounding exercises (5-4-3-2-1) and body scan meditation.
Let users set a custom cycle count and auto-stop after a chosen number of rounds.
Expand helplines to more countries and regions, with localization.
Add optional calming audio and haptic feedback on mobile.
Introduce a dark mode for night-time use, when panic attacks often occur.
Add multi-language support so the site can reach more people in their native language.
Explore a lightweight offline mode (PWA) so the site works even without a connection.