Meditate the Fear

Face your fears through meditation - Stay calm while random scares attack. Wellness + Terror = Perfect Frankenstein. 🎃👻

Comment

Inspiration

The inspiration came from the Frankenstein category challenge: "Stitch together seemingly incompatible elements." What could be more incompatible than meditation (peace, calm, wellness) and horror (fear, terror, chaos)?

I wanted to create something that would make people question: "Can you maintain mindfulness while being scared?" This psychological twist on wellness apps felt perfect for Halloween and the Kiroween hackathon theme.

The idea: Start with a beautiful, calming meditation app that users trust, then subvert their expectations by transforming it into a horror experience. It's meditation as a challenge - can you stay zen while facing your fears?

What it does

Meditate the Fear is a mobile-first meditation app that starts peaceful but becomes a horror challenge:

The Journey:

  1. Choose Duration - Select 1-15 minutes of meditation
  2. Select Difficulty - Pick from Peaceful, Normal, Nightmare, or Hell Mode
  3. Choose Sound - Select from 6 calming meditation sounds (rain, birds, bells, etc.)
  4. Begin Meditation - Start with peaceful breathing guide and calm music
  5. Face Your Fears - After 10 seconds, random horror events trigger:
    • Scary images appear full-screen
    • Disturbing sounds play
    • Threatening messages flash
    • Phone vibrates
  6. Complete Session - View detailed stats, fear score, and achievements
  7. Share Results - Post your survival story to social media

The Twist: Users must maintain their meditation practice while the app randomly terrorizes them. It's a test of mindfulness under pressure - true meditation mastery.

Key Features:

  • 4 difficulty levels with different horror frequencies
  • 6 meditation sounds + 33 horror sounds
  • 18 horror images that appear randomly
  • Real-time breathing guide during calm moments
  • Session stats: scares survived, fear score (0-10), longest calm streak
  • Achievements: Zen Master, Fearless, Hell Survivor
  • Social sharing with custom messages
  • Native Android app + PWA
  • Phone vibration on horror events

How we built it

Built entirely with Kiro AI through conversational development over 130+ messages.

Tech Stack:

  • Frontend: React 18, Vite, Tailwind CSS
  • Mobile: Capacitor for native Android
  • Audio: Web Audio API for dual sound system
  • Deployment: Vercel (web), APK (Android)

Development Process:

  1. Initial Setup (30 min) - Kiro scaffolded React + Vite + Tailwind with basic timer
  2. Horror Subversion (1 hour) - Added dual audio system, horror events, image overlays
  3. Feature Expansion (1.5 hours) - Implemented difficulty levels, stats tracking, achievements, breathing guide
  4. Mobile Optimization (45 min) - Capacitor setup, Android build, responsive design
  5. Halloween Theme (30 min) - Orange/purple/black color scheme, glowing effects, pumpkin emojis
  6. Polish & Bug Fixes (45 min) - Fixed audio looping, pause behavior, message wrapping

Kiro Features Used:

  • Vibe Coding - Natural conversation to build features
  • Steering Documents - 3 docs (product.md, tech.md, structure.md) maintained context
  • Iterative Development - Rapid feature addition and refinement

Most Complex Code Generated: The dual audio system that manages:

  • Continuous looping meditation sounds
  • Random horror sounds that loop during events
  • Smooth volume transitions and fade-outs
  • Proper cleanup to prevent memory leaks
  • Pause/resume handling for both audio streams

All generated through conversation with Kiro!

Challenges we ran into

  1. Audio Synchronization

    • Problem: Horror sounds (1-2 sec) ended before horror screen (3-6 sec), creating silent moments
    • Solution: Made horror sounds loop during events, fade out when returning to calm

  2. Pause/Resume Behavior

    • Problem: Pausing during horror would return to calm screen, losing the scary moment
    • Solution: Implemented timeout tracking to freeze screen state when paused

  3. Message Text Wrapping

    • Problem: Long messages wrapped to multiple lines, changing card height
    • Solution: Fixed height container + shortened messages + line-clamp CSS

  4. Mobile Network Access

    • Problem: Vite dev server not accessible from Android phone
    • Solution: Configured Vite to listen on 0.0.0.0 instead of localhost

  5. Horror Message Timing

    • Problem: Calm messages sometimes showed during horror screen
    • Solution: Set horror message immediately when event triggers, clear timeouts properly

  6. Image Loading on Mobile

    • Problem: Horror images used absolute paths, failed on mobile network
    • Solution: Changed to relative paths (./images/) that work on any device

Accomplishments that we're proud of

  1. Perfect Frankenstein Chimera - Successfully stitched together two completely opposite experiences (wellness + horror) into something unexpectedly powerful

  2. Production-Ready in 4 Hours - Built a fully functional, bug-free app with 20+ features using Kiro

  3. Native Android App - Not just a web app - real APK that installs on phones

  4. Sophisticated Audio System - Dual audio streams with looping, fading, and volume control

  5. Professional UI/UX - Halloween-themed design with glowing effects, smooth animations, responsive layout

  6. Complete Gamification - Stats tracking, fear score calculation, achievements, social sharing

  7. Mobile-First Design - Works perfectly on all Android screen sizes with touch optimization

  8. Zero Bugs in Final Version - Thoroughly tested and polished

  9. Comprehensive Documentation - README, Kiro usage guide, submission checklist

  10. Psychological Innovation - Created a unique "meditation under pressure" experience that's genuinely challenging

What we learned

About Kiro:

  • Steering documents are game-changers - Set them up early and Kiro maintains perfect context across 100+ messages
  • Vibe coding enables rapid iteration - Natural conversation is faster than writing specs
  • Trust Kiro's suggestions - Often proposes better solutions than initially planned
  • Context retention is incredible - Never forgot we were building for Kiroween or the Frankenstein category

About Development:

  • Mobile-first from day one - Testing on actual devices early prevents late surprises
  • Audio is complex - Managing multiple audio streams requires careful ref management
  • User experience matters - Small details like message wrapping and pause behavior make huge difference
  • Halloween theme works - Orange/purple/black with glowing effects creates professional look

About Horror Design:

  • Subversion is powerful - Starting peaceful makes the horror more impactful
  • Random timing is key - Unpredictability creates genuine tension
  • Short horror bursts work - 3-6 seconds is perfect - long enough to scare, short enough to maintain meditation
  • Multiple senses matter - Visual + audio + haptic creates immersive experience

What's next for Meditate the Fear

Short-term (Post-Hackathon):

  • Deploy to Google Play Store
  • Add more meditation sounds (ocean, fire, wind)
  • Expand horror image library (50+ images)
  • Add custom timer durations
  • Implement dark/light mode toggle

Medium-term:

  • Multiplayer Mode - Meditate with friends, see who survives longest
  • Custom Horror Uploads - Let users add their own scary images
  • Biometric Feedback - Track heart rate during horror events
  • Daily Challenges - New difficulty combinations each day
  • Leaderboards - Global rankings by fear score

Long-term:

  • XR Support - Immersive 360° horror meditation
  • AI-Generated Horror - Dynamic scary content based on user fears
  • Therapy Integration - Work with psychologists for exposure therapy
  • More Languages - Expand to international markets
  • Smart Watch Support - Vibration and heart rate on wearables

Monetization:

  • Free tier: 1-5 minute sessions
  • Premium: Unlimited time, exclusive sounds, custom horror
  • One-time purchase: $4.99 (no subscriptions)

Built With

Share this project:

Updates

posted an update —

This hackathon was more than just building an app—it was a personal transformation. I entered as a mobile developer curious about React. I'm leaving as a full-stack developer who can confidently build web and mobile applications.

Meditate the Fear represents my journey: starting in unfamiliar territory (React), facing challenges (learning curve), and emerging stronger (complete app). Just like the app asks users to meditate through fear, I coded through uncertainty.

And I couldn't have done it without "Kiro IDE".

Credits All credit goes to Kiro IDE for making this journey possible.

Log in or sign up for Devpost to join the conversation.