Building a Horror Meditation App in 4 Hours with Kiro: A Frankenstein Story

Kishor Ramani — Fri, 28 Nov 2025 23:43:41 +0000

How I stitched together wellness and horror into one app using AI-assisted development

The Challenge

When I saw the Kiroween hackathon's Frankenstein category - "Stitch together seemingly incompatible elements into something unexpectedly powerful" - one question immediately came to mind:

What if meditation... but make it scary?

Meditation apps are all about peace, calm, and serenity. Horror is about fear, tension, and chaos. They're complete opposites. Perfect for a Frankenstein chimera.

Thus, Meditate the Fear was born: a meditation app that starts peaceful but transforms into a horror challenge. Can you maintain mindfulness while being terrorized? Let's find out.

The Kiro Difference

I've used ChatGPT, Claude, and Copilot before. But Kiro is different. Here's why this project worked:

1. Steering Documents Changed Everything

In the first 5 minutes, I created three simple markdown files in .kiro/steering/:

product.md:

A mobile-first meditation app with a horror subversion twist. 
Starts peaceful, transforms into horror after 10 seconds.

tech.md:

- React 18+ with hooks
- Tailwind CSS
- Vite
- Mobile-first

structure.md:

/src/App.jsx - Main component
/public/sounds/ - Audio files
/public/images/ - Horror images

The magic? Kiro referenced these docs in every single response across 130+ messages. It never forgot:

We were building a horror meditation app
We were targeting Kiroween
We were using React + Tailwind
We were mobile-first

No other AI tool maintains context like this. With ChatGPT, I'd be re-explaining the concept every 10 messages.

2. Vibe Coding is Faster Than You Think

I didn't write a single line of code. Everything was conversational:

Me: "Add difficulty levels"

Kiro: Generates 4 difficulty modes (Peaceful, Normal, Nightmare, Hell Mode) with different horror timing intervals, updates UI with emoji icons, adds selection screen

Me: "Make it more Halloween themed"

Kiro: Redesigns entire UI with orange/purple/black colors, adds glowing effects, pumpkin emojis, backdrop blur

Me: "The horror sound is only 2 seconds but screen shows for 5 seconds"

Kiro: Adds audio looping during horror events, implements smooth fade-out when returning to calm

Each feature took 2-5 minutes. No debugging. No Stack Overflow. Just conversation.

The Build Process

Hour 1: Foundation

Goal: Basic meditation timer

Conversation:

Me: Build a mobile-first meditation app with React, Tailwind, 
    and a timer countdown.

Kiro: *scaffolds complete project*

Result: Working meditation timer with:

React 18 + Vite + Tailwind
Countdown timer
Start/pause buttons
Responsive mobile design

Hour 2: The Horror Twist

Goal: Add the Frankenstein element

Conversation:

Me: After 10 seconds, show scary images, play horror sounds, 
    and display threatening messages at random intervals.

Kiro: *implements dual audio system, horror events, image overlays*

Result:

6 meditation sounds (rain, birds, bells)
33 horror sounds (screams, whispers, static)
18 horror images
Random horror events every 5-15 seconds
Dual audio system (calm + horror)

The impressive part? Kiro generated a sophisticated audio management system:

// Meditation sound loops continuously
calmAudioRef.current.loop = true

// Horror sound loops during event, fades out after
const triggerHorrorEvent = () => {
  setHorrorMode(true)
  playHorrorSound() // loops

  setTimeout(() => {
    setHorrorMode(false)
    fadeOutHorrorSound() // smooth transition
  }, randomDelay)
}

This handles:

Two independent audio streams
Looping and volume control
Smooth transitions
Memory leak prevention
Pause/resume for both streams

All from natural conversation. No audio engineering degree required.

Hour 3: Gamification

Goal: Make it replayable

Conversation:

Me: Add difficulty levels, session stats, achievements, 
    and social sharing.

Kiro: *implements complete gamification system*

Result:

4 Difficulty Levels:
- 😌 Peaceful: Horror after 30s, every 15-30s
- 😰 Normal: Horror after 10s, every 5-15s
- 😱 Nightmare: Horror after 5s, every 3-8s
- 💀 Hell Mode: Horror after 3s, every 1-3s
Session Stats:
- Scares survived
- Fear score (0-10)
- Longest calm streak
- Pause count
Achievements:
- 🧘 Zen Master (no pauses)
- 👻 Fearless (15 min session)
- 💀 Hell Survivor (Hell Mode)
Share Feature:
- "I survived 5 minutes of horror meditation! 🎃"
- Native share API on mobile
- Clipboard fallback on desktop

Hour 4: Mobile + Polish

Goal: Native Android app

Conversation:

Me: Make this work on Android phones.

Kiro: *sets up Capacitor, configures network, builds APK*

Result:

Capacitor Android wrapper
Native APK build
Vite network configuration
Touch-optimized UI
Vibration on horror events
PWA capabilities

Then polish:

Fixed message text wrapping
Improved pause/resume behavior
Optimized audio synchronization
Added breathing guide
Halloween theme refinement

The Technical Challenges

Challenge 1: Audio Synchronization

Problem: Horror sounds were 1-2 seconds, but horror screen lasted 3-6 seconds. Result: silent horror screen.

Solution:

// Make horror sounds loop during event
currentHorrorAudioRef.current.loop = true

// Fade out when returning to calm
const fadeOutHorrorSound = () => {
  const fadeSteps = 10
  const fadeInterval = 50
  const volumeStep = currentVolume / fadeSteps

  setInterval(() => {
    volume -= volumeStep
    if (volume <= 0) stop()
  }, fadeInterval)
}

Kiro generated this after I said: "The horror sound ends too early."

Challenge 2: Pause Behavior

Problem: Pausing during horror returned to calm screen, losing the scary moment.

Solution:

const toggleTimer = () => {
  if (!isActive) {
    playRandomCalmSound()
  } else {
    // Stop audio but keep visual state frozen
    calmAudioRef.current.pause()
    currentHorrorAudioRef.current.pause()

    // Clear timeouts to freeze screen
    clearTimeout(horrorTimeoutRef.current)

    // Keep horrorMode and horrorImage unchanged
  }
  setIsActive(!isActive)
}

The screen now freezes exactly as it is when paused. Perfect.

Challenge 3: Mobile Network Access

Problem: Vite dev server only accessible on localhost, not from phone.

Solution:

// vite.config.js
export default defineConfig({
  server: {
    host: '0.0.0.0', // Listen on all interfaces
    port: 5173,
  },
})

Now accessible at http://192.168.1.100:5173 from any device on the network.

The Results

After 4 hours:

✅ Fully functional app
✅ 20+ features
✅ Native Android APK
✅ PWA-ready
✅ Professional Halloween UI
✅ Zero bugs
✅ Production-ready

Stats:

1,200+ lines of code (App.jsx)
15+ files created
130+ messages with Kiro
6 meditation sounds
33 horror sounds
18 horror images
4 difficulty levels
3 achievements

Time saved: 80-85% compared to manual coding

What Makes Kiro Special

1. Context Retention

Other AI tools forget context after 10-20 messages. Kiro's steering documents maintain context across 100+ messages.

Example:

Message 5: "This is a horror meditation app"
Message 95: "Add a feature"
Kiro: Adds feature with horror theme, Halloween colors, mobile optimization

No reminder needed. It just knows.

2. Multi-File Coordination

When I said "Change the app name to Meditate the Fear," Kiro updated:

package.json
capacitor.config.json
index.html
App.jsx (multiple locations)
Built and synced to Android

All in one response. No manual file hunting.

3. Build System Management

Kiro automatically:

Ran npm run build
Synced with Capacitor
Configured Android
Fixed build errors

I never touched the terminal manually.

4. Design Sense

I said "Make it Halloween themed." Kiro:

Changed to orange/purple/black palette
Added glowing shadows
Implemented backdrop blur
Added pumpkin emojis
Created gradient backgrounds

It has aesthetic judgment, not just code generation.

The Frankenstein Success

Why this is a perfect Frankenstein chimera:

Incompatible Elements:
- Meditation: Peace, calm, wellness
- Horror: Fear, terror, chaos
Stitched Together:
- Same app, same session
- Seamless transitions
- Dual audio system
- Unified UI that transforms
Unexpectedly Powerful:
- Creates psychological challenge
- Tests mindfulness under pressure
- Gamifies meditation
- Makes wellness engaging

It's not just a meditation app with horror. It's not just a horror game with meditation. It's a true chimera - something new that couldn't exist without both parts.

Lessons Learned

About Kiro

Set up steering docs early - First 5 messages, save 40% time later
Trust Kiro's suggestions - Often better than your initial idea
Speak naturally - No need for formal specs or technical jargon
Iterate quickly - Each feature takes minutes, not hours

About Development

Mobile-first from day one - Test on real devices early
Audio is complex - Proper ref management prevents memory leaks
User experience matters - Small details make huge difference
Halloween theme works - Orange/purple/black is professional

About Horror Design

Subversion is powerful - Starting peaceful makes horror impactful
Random timing is key - Unpredictability creates tension
Short bursts work - 3-6 seconds is perfect
Multiple senses matter - Visual + audio + haptic = immersive

The Code

GitHub: github.com/kishorramani/meditate-the-fear

Try it: meditate-the-fear.vercel.app

Tech Stack:

React 18
Vite
Tailwind CSS
Capacitor
Web Audio API
Kiro AI

What's Next

Short-term:

Google Play Store release
More meditation sounds
Expanded horror library
Custom timer durations

Medium-term:

Multiplayer mode
Custom horror uploads
Biometric feedback
Daily challenges
Leaderboards

Long-term:

VR support
AI-generated horror
Therapy integration
International languages

Try It Yourself

Want to build something with Kiro?

My advice:

Start with steering docs - 3 files: product.md, tech.md, structure.md
Build iteratively - Core → features → polish
Speak naturally - Like talking to a developer
Trust the process - Kiro often surprises you

The future of development isn't writing code. It's having conversations about what you want to build.

Conclusion

I built a production-ready app with 20+ features in 4 hours. Not a prototype. Not a demo. A real app that:

Installs on Android phones
Has professional UI/UX
Tracks stats and achievements
Shares to social media
Works offline
Has zero bugs

All through conversation with Kiro.

This is the Frankenstein story: Stitching together AI and human creativity to build something unexpectedly powerful.

The question isn't "Can AI replace developers?"

The question is "What can developers build when AI handles the implementation?"

The answer: A lot more, a lot faster.

Built for Kiroween 2025 🎃

Category: Frankenstein

Time: 4 hours

Lines of Code Written Manually: 0

Lines of Code Generated by Kiro: 1,200+

Result: Production-ready horror meditation app

Want to try Meditate the Fear? Visit meditate-the-fear.vercel.app or download the Android APK from GitHub.

Built with Kiro AI - kiro.dev

Tags: #kiro #ai #react #halloween #meditation #horror #frankenstein #kiroween #webdev #mobile #android #tailwindcss #vite

Discussion Questions:

Have you used AI-assisted development? How does it compare to traditional coding?
What's the most complex feature you've built with AI help?
Would you meditate through horror? What's your fear score prediction?
What other "incompatible elements" could make interesting Frankenstein apps?

Drop your thoughts in the comments! 👇

Forem: Kishor Ramani

Building a Horror Meditation App in 4 Hours with Kiro: A Frankenstein Story

The Challenge

The Kiro Difference

1. Steering Documents Changed Everything

2. Vibe Coding is Faster Than You Think

The Build Process

Hour 1: Foundation

Hour 2: The Horror Twist

Hour 3: Gamification

Hour 4: Mobile + Polish

The Technical Challenges

Challenge 1: Audio Synchronization

Challenge 2: Pause Behavior

Challenge 3: Mobile Network Access

The Results

What Makes Kiro Special

1. Context Retention

2. Multi-File Coordination

3. Build System Management

4. Design Sense

The Frankenstein Success

Lessons Learned

About Kiro

About Development

About Horror Design

The Code

What's Next

Try It Yourself

Conclusion