MindAura

MindAura turns stress science into two calm minutes a day. Check in, breathe with your heart rhythm on screen, and get guided CBT exercises and specialist support.

Comment

Inspiration

Students and athletes are told to "perform under pressure," but almost nobody teaches them how to come back down after it. The tools that exist tend to fall into two camps: clinical apps that feel like paperwork, or wellness apps full of streaks and confetti that add more noise. I wanted something in between: a calm, research-informed space that takes two minutes a day and actually feels like a breath of fresh air.

[Add one or two sentences here about a real moment you or someone you know felt this pressure. Judges remember personal stories.]

What it does

MindAura is a mental wellness web app for students, teachers, athletes, and anyone under pressure. It has two parts: a landing site and a working app.

  • Daily check-in: log your mood, energy, and what is shaping your day in a few taps.
  • Guided breathing: four patterns (resonance, paced, box, and 4-7-8) with an animated orb, optional guide tones, and a before and after tension rating.
  • CBT-informed exercises: seven guided, step-by-step practices, including a thought record, 5-4-3-2-1 grounding, a pre-performance reset, a body scan, and a focus sprint.
  • Journal and insights: a mood calendar, plus patterns computed from your own data, like how your mood compares on days you breathe versus days you don't.
  • Care: browse specialists and book a session (sample directory for the demo).
  • Role-based views: teachers see anonymous, class-level trends and can assign exercises. Admins control privacy settings, and every change is logged.
  • Ambient sound: a soft, ocean-like wash that swells and fades on a 10-second cycle, the same rhythm as the slow background glow, so the whole page quietly breathes with you.
  • Safety first: a "Get help now" button on every page links to 988 and the Crisis Text Line, and support resources open automatically if a note mentions self-harm.

How I built it

MindAura is plain HTML, CSS, and JavaScript with no framework and no build step, hosted on GitHub Pages and installable as a Progressive Web App.

Breathing engine. The orb runs on requestAnimationFrame. During an inhale, its size follows a cosine ease so the motion never jerks:

$$ s(t) = \tfrac{1}{2}\left(1 - \cos\left(\frac{\pi t}{T}\right)\right) $$

where \( T \) is the length of the phase. Resonance breathing uses about 5.5 breaths per minute, so each full breath lasts \( 60 / 5.5 \approx 10.9 \) seconds.

Ambient sound. The sound is generated live with the Web Audio API instead of a recording. I create brown noise with a simple filter on white noise \( w_n \):

$$ y_n = \frac{y_{n-1} + 0.02\,w_n}{1.02} $$

then pass it through a low-pass filter whose cutoff is swept by a 0.1 Hz oscillator. That sweep creates the slow wave-like swell every 10 seconds.

Data and privacy. Entries are saved locally in the browser, so nothing leaves the device in this version. Insights are calculated on the device from your own check-ins. Teacher views only ever show aggregates.

Design. A soft blue and lavender palette, light typography, slow easing curves, a 3D loading screen built entirely in CSS, and full support for reduced motion, keyboard navigation, dark mode, and WCAG AA contrast.

Tools. I used Claude as an AI pair programmer to help design, write, and debug the interface, then tested, customized, and deployed it myself.

Challenges I ran into

  • Making it calm instead of flashy. My first versions had bouncy, energetic animations that looked cool but felt stressful. I slowed every transition, lightened the type, and removed effects until the page felt like an exhale.
  • Privacy for students. Letting teachers help without exposing any individual student's feelings meant designing the class view around anonymous trends only, with a minimum group size.
  • Honest demos. Without a real wearable, I clearly label the heart rhythm as a demo signal and mark the sample data, testimonials, and specialists as samples instead of pretending they are real.
  • Turning a website into an app. Learning how manifests and service workers make a site installable and usable offline.

Accomplishments that I'm proud of

  • A fully working app, not a mockup: every button, exercise, chart, and booking actually works.
  • Safety features built in from the start, not added at the end.
  • A design that people describe as calming to use.

What I learned

  • How the Web Audio API can generate sound in real time from math.
  • How PWAs, manifests, and service workers work.
  • That in a wellness product, what you remove matters as much as what you add.
  • How to design for privacy when the users include students.

What's next for MindAura

  • Real heart-rate variability from wearables.
  • Secure accounts and cloud sync.
  • Review of the exercises and safety flow by licensed clinicians.
  • Piloting it with a real class and getting student feedback.

Built With

Share this project:

Updates

Submission history