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! 👇
Top comments (0)