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.

Submission history