AuraCalm

• 

  Home Page

• 

  Live Working with stress level detetction score out of 100

✨ Inspiration

Stress is often invisible until it overwhelms us. In today’s fast-paced world, mental health support tools are either too passive or too late. We wanted to create something proactive and real-time, a companion that listens to your voice and knows when to intervene with calmness. That’s how AuraCalm was born.

🎯 What it does

AuraCalm detects vocal stress in real time using your microphone. When stress levels spike, it automatically:

• 🎵 Plays a soothing soundscape
  
• 📳 Triggers gentle haptic vibrations on mobile
  
• 🌈 Displays calming visuals and messages
  

🛠️ How we built it

• ⚡ Next.js 14 with the App Router for a modern, scalable foundation
  
• 🎨 Tailwind CSS + Framer Motion for a calming, responsive, and animated UI
  
• 🎤 Web Audio API to analyze microphone input and compute stress levels
  
• 📳 Navigator Vibration API for subtle haptic feedback on supported devices
  
• 🔄 Custom logic for intervention sequencing, with soundscape playback from /public
  

🚧 Challenges we ran into

• Designing a simple yet effective stress detection algorithm for a live demo
  
• Handling browser microphone permissions and smooth fallback if denied
  
• Syncing multiple feedback channels (audio, haptics, visuals) without overwhelming the user
  
• Creating a UI that feels soothing and not clinical, balancing design with functionality
  

🏆 Accomplishments that we're proud of

• Built a functional MVP in a short timeframe that works reliably across devices
  
• Achieved a seamless integration of sound, visuals, and haptics for a calming experience
  
• Created an elegant, demo-ready UI that feels like a product, not just a prototype
  

📚 What we learned

• How to leverage the Web Audio API for real-time analysis
  
• The importance of multi-sensory design when tackling stress and mental health
  
• How small design details (animations, gradients, wording) make a big emotional difference
  

🚀 What's next for AuraCalm

• Add smarter stress detection (pitch analysis, ML models) for more accuracy
  
• Personalize interventions based on user preferences (e.g., nature sounds vs. music)
  
• Extend to wearable devices for more continuous monitoring
  
• Build a mobile-first app for everyday real-world use
  

Built With

• api
• audio
• css
• css3
• framer
• html5
• motion
• navigator
• next.js
• node.js
• tailwind
• typescript
• vercel
• vibration
• web