Headspace

Headspace – See your mental load in real time. Track cognitive bandwidth, get guided interventions when you’re overwhelmed, and use your brain more sustainably.

Comment

Inspiration

Burnout and cognitive overload are common, but there’s no simple way to see when your mental load is rising. We wanted a tool that visualizes cognitive bandwidth like heart rate, so people can recognize stress earlier and take action rather than pushing through.

What it does

Headspace visualizes your cognitive load in real time. Users can:

  • Track bandwidth – Live sessions show a breathing orb that reflects mental load (optimal, moderate, strained, critical)
  • Get interventions – Suggested actions like box breathing, microbreaks, and task swaps when load is high
  • See patterns – Weekly reports with charts, patterns, and insights
  • Use Cognitive Weather – A “Clear / Cloudy / Stormy” view of your mental state
  • Plan the day – Smart Day Planner with focus blocks and suggested breaks
  • Support teams – Group Mode for stand-ups, deep work, and lectures
  • Stay safe – Emergency dials and nearby hospital search

How we built it

  • Frontend: React 18, TypeScript, Vite, Tailwind CSS v4, Motion (Framer Motion), shadcn/ui Maps: Google Maps & Places APIs for hospital search
  • Design: Mobile-first layout with gradients, glassmorphism, and bento-style cards
  • Data: Mock/simulated bandwidth for prototype; ready to plug in real sensors or wearables

Challenges we ran into

  • Visual feedback for mental load – Designing a calm, state-driven orb and animations so high load feels noticeable without causing more stress
  • Simulating bandwidth – Building believable mock data so the flow feels real without backend integration
  • Mobile layout – Getting bento grids and scrolling to feel smooth and usable on small screens

Accomplishments that we're proud of

  • A breathing orb that changes speed and intensity by cognitive load
  • Cognitive Weather and Smart Day Planner for awareness and planning
  • Group Mode with scenarios (stand-up, deep work, lecture) for team use
  • Emergency support – crisis numbers plus hospital search
  • A polished UI with gradients, staggered animations, and responsive layout

What we learned

  • Mental load can be represented through motion and color in a way that feels intuitive
  • UX for cognitive tools should be low-friction and avoid adding more cognitive load
  • Bento layouts and gentle animations work well for dashboards and monitoring

What's next for Headspace

  • Hardware integration – Connect to wearables, heart-rate variability, or EEG for real bandwidth signals
  • AI suggestions – Context-aware intervention suggestions
  • Long-term analytics – Trends, streaks, and personalized insights
  • Team and workplace features – Team dashboards, meeting load detection, and org-level patterns

Built With

Share this project:

Updates