Inspiration
We've all seen dark mode implementations; they're everywhere. But they're usually just inverted colors, maybe some grays instead of whites. We asked ourselves: what if dark mode was actually dark? What if toggling that innocent sun/moon icon didn't just change your color scheme, but transported you into a completely different experience?
For the Kiroween Hackathon's Costume Contest category, we wanted to create a haunting user interface that wasn't just aesthetically spooky, but functionally terrifying. We took inspiration from escape rooms, horror games, and the uncanny feeling of browsing a website that seems... off. The result is SpookBnB: a vacation rental site that looks perfectly normal until you activate dark mode and discover you're trapped in a haunted cabin.
What it does
SpookBnB presents two completely different experiences in one application:
Light Mode: A polished, professional vacation rental landing page for a luxury mountain cabin. Beautiful imagery, welcoming copy, 5-star reviews, and a seamless booking experience. Everything you'd expect from a premium Airbnb listing.
Dark Mode: The cabin reveals its true nature. The screen goes completely black except for a flashlight effect that follows your cursor, revealing disturbing transformations of the content. Welcoming reviews become desperate pleas from trapped souls. Amenity descriptions turn into warnings. Hidden horror elements appear in the darkness: clickable icons that trigger jumpscares, cryptic messages scratched into the margins, and ghostly whispers.
But here's the twist: you can escape. Four puzzle fragments are hidden throughout the dark mode experience:
- Fragment I: Collect the letters L-I-G-H-T from marked reviews
- Fragment II: Count the hidden eyes watching you in the bathroom
- Fragment III: Decipher the glitching contract text in the reservation modal
- Fragment IV: Activate the escape portal when all fragments are complete
Complete all puzzles and you'll trigger a dramatic escape sequence that returns you to the safety of light mode, complete with celebration effects and a victory modal.
How we built it
The Kiro-Powered Development Process
We built SpookBnB using Kiro as our AI development partner, and it fundamentally changed how we approached the project. Here's our workflow:
1. Specs-Driven Development
We started by describing our vision to Kiro in natural language. Using Kiro's Specs feature, we generated three foundational documents:
requirements.md: 8 detailed requirements with acceptance criteriadesign.md: Architecture diagrams, component hierarchy, and data modelstasks.md: 11 phases with 50+ actionable tasks
This gave us a clear roadmap from day one. No more "where do I start?" paralysis.
2. Iterative Execution
We worked through tasks systematically, but not rigidly. When we hit a section that needed more creativity (like the Reviews section with hidden letters, or the CTA escape portal), we used vibe coding: having natural conversations with Kiro to iterate rapidly on ideas.
For example, the Hero section started as a simple dual-content component. Through iterations, we added:
- Progressive text corruption effects
- Exit button jumpscares
- System message panel with navigation clues
- Glitch text animations
Each iteration built on the previous one, with Kiro maintaining context throughout.
3. Living Documentation
As the project evolved, we kept our specs updated. When we added the Rooms section with the eye-counting puzzle, we updated the requirements and design docs. This meant Kiro always had current context; crucial when working on a project over multiple sessions.
4. Steering Files for Consistency
We created three steering files that Kiro automatically includes in context:
tech.md: Tech stack, libraries, and commandsstructure.md: Project structure and component conventionsproduct.md: Core concept and key features
These files ensured Kiro understood our architectural decisions and maintained consistency across all components.
5. Bilingual Workflow with Hooks
Here's something unique: we're Spanish speakers, so we naturally wrote prompts in Spanish. But we needed production-ready English code. Kiro handled this seamlessly, but we wanted extra insurance.
We created Kiro Hooks: automated actions that run on file save:
- Removes any Spanish comments that might slip through
- Strips console.log statements before commit
This let us work in our native language while ensuring professional, clean code output.
6. Debug Mode for Development
During development, testing the dark mode experience was challenging because the flashlight effect made it hard to see everything at once. We implemented a debug mode (accessible via ?debug=true URL parameter) that disables the flashlight overlay, allowing us to see all content simultaneously. This was invaluable for verifying puzzle placement, checking text alignment, and ensuring all horror elements were positioned correctly.
Tech Stack
- Next.js 15 with App Router and React 19
- Tailwind CSS 4 for styling with custom color palettes
- Framer Motion for all animations and transitions
- React Context for global state (Theme, Audio, Escape puzzles)
- Custom hooks for mouse tracking, sound effects, and persistence
Challenges we ran into
The Flashlight Effect: Creating a true "darkness" effect was harder than expected. CSS filters and overlays weren't enough; we needed the content to be genuinely invisible outside the flashlight radius. We solved this with CSS mask-image using radial gradients, creating a performant solution that works smoothly even with complex content underneath.
Fragment Completion State: Managing puzzle state across page sections was tricky. We needed the Reviews section to know when Fragment I was complete, the Features section to display progress, and the CTA section to show the escape portal only when ready. We solved this with a dedicated EscapeProvider context that persists state to localStorage.
Audio Autoplay Restrictions: Modern browsers block autoplay audio, which broke our ambient horror soundtrack. We implemented graceful fallbacks that attempt to play audio on first user interaction, with error handling that never breaks the experience.
Balancing Horror and Usability: We wanted the dark mode to be genuinely scary, but not so dark that users couldn't navigate. The flashlight radius needed to be large enough to be functional but small enough to maintain tension. We made it dynamic: expanding by 50px for each puzzle fragment completed, rewarding progress with better visibility.
Maintaining Context Across Sessions: Working on a complex project over multiple days meant Kiro needed to remember previous decisions. The combination of updated specs and steering files solved this; Kiro could pick up exactly where we left off, understanding why we made certain architectural choices.
Accomplishments that we're proud of
A Truly Dual Experience: We didn't just theme the same content differently; we created two complete experiences that share the same codebase. Every section has thoughtfully crafted light and dark variants that tell different stories.
Interactive Horror Elements: The clickable horror icons that trigger jumpscares, the hidden eyes puzzle, the glitching contract text: these aren't just visual effects, they're functional game mechanics that enhance the narrative.
Polished Animations: Every transition, every hover state, every mode toggle feels intentional and smooth. The dark mode transition effect alone went through multiple iterations to get that perfect "lights going out" feeling.
The Escape System: Building a complete escape room puzzle system that feels cohesive across different page sections was a significant achievement. Each fragment has its own mechanic, but they all contribute to a unified goal.
Kiro-Powered Workflow: We proved that AI-assisted development can be more than just code completion. With specs, steering, and hooks, we created a development environment where Kiro was a true collaborator, not just a tool.
What we learned
Specs Are Worth the Investment: Taking time upfront to generate requirements, design docs, and tasks paid off massively. We always knew what to build next and why.
Context Is Everything: The difference between Kiro with and without proper context is night and day. Steering files and updated specs meant Kiro understood our project deeply, making suggestions that actually fit our architecture.
Iteration Over Perfection: Our best features came from iterative conversations with Kiro, not from trying to specify everything perfectly upfront. The vibe coding approach let us explore ideas quickly.
Automation Saves Mental Energy: Those Kiro hooks that clean up comments and console.logs seem small, but they removed cognitive load. We could focus on creative problems instead of code hygiene.
Horror Design Is About Anticipation: The scariest moments in SpookBnB aren't the jumpscares; they're the moments before. The slow reveal of disturbing content, the realization that something is watching you, the growing sense that you need to escape.
What's next for SpookBnB
More Rooms, More Puzzles: We have six rooms but only one (the bathroom) has an interactive puzzle. Each room could have its own unique mechanic.
Procedural Horror: Randomize which horror elements appear and where, making each visit to dark mode slightly different and more replayable.
Multiplayer Escape: What if multiple users could collaborate to solve puzzles together? Real-time state synchronization could create a shared horror experience.
Difficulty Levels: Add an "easy mode" with more hints and a larger flashlight, and a "nightmare mode" with smaller radius, more jumpscares, and harder puzzles.
Mobile Optimization: While the flashlight works on touch devices, we could add mobile-specific horror mechanics like shake-to-reveal or tilt-to-explore.
Analytics Dashboard: Track which puzzles players solve, where they get stuck, and how long it takes to escape. Use this data to refine the difficulty curve.
More Kiro Integration: Document our entire development process as a case study for AI-assisted development. Create templates and patterns that others can use for their own dual-experience applications.
SpookBnB started as a question: "What if dark mode was actually dark?" With Kiro as our development partner, we turned that question into a fully-realized horror experience that's both terrifying and technically impressive. The real magic wasn't just in the code we wrote; it was in how we wrote it, using AI as a true collaborator in the creative process.
Built With
- framer
- nextjs
- tailwindcss
Log in or sign up for Devpost to join the conversation.