I’d been bouncing between AI-powered dev tools for a while, and when the Kiroween Hackathon dropped, I figured I’d give Kiro a shot. I’m usually a CLI-first kind of developer — the type who’d rather wrestle with Vim keybindings than trust another Electron app. So I went in expecting yet another VS Code fork with some Claude wrapper slapped on top. Turns out the Kiro team actually cooked this time. The generous AWS credits didn’t hurt either.

What I Built

I built Séance, an interactive web app that turns global folklore and dark history into something between a game and a conversation with the past. The concept was simple: make users feel like they’re actually communicating with something ancient — uncovering myths, strange rituals, and legitimately eerie legends through an interface that responds to their choices.

The experience starts with an interactive world map. Click a country, and you’re dropped into one of three thematic paths: People’s Tales (folklore and myths), Crown’s Secrets (political history), or Merchant’s Ledger (economic history). Each path unfolds through a realistic page-flipping book interface — the kind where you can actually see the pages curl and hear them turn.

Here’s where it gets interesting: every page presents a multiple-choice question about the lore. Get it right, and you progress deeper into the story. Get it wrong, and the book dramatically flips all the way back to the beginning while your ancestors judge you from beyond the grave. It’s educational, but with stakes.

The whole thing is wrapped in atmosphere: 3D smoke effects powered by Three.js drifting across the screen, ambient soundscapes with owl hoots and distant wolf howls, and a heartbeat that intensifies when you’re about to answer. Every page flip has its own sound effect. It’s the kind of immersive experience that makes you forget you’re technically learning about the Baba Yaga or the Transatlantic Slave Trade.

The Tech Stack

Built on Next.js 16 with React 19 and TypeScript, because apparently I enjoy living on the bleeding edge. The 3D smoke effects run on Three.js and react-three/fiber — turns out making ethereal fog drift convincingly across a webpage requires actual physics calculations. Who knew.

The page-flipping mechanics use react-pageflip, which does exactly what it says on the tin. The world map is react-simple-maps, styled with Tailwind CSS 4. Linting and formatting handled by Biome, because life’s too short for ESLint config files that span multiple monitors.

The question data is organized across three thematic files, each containing country-specific lore. Components are properly separated — presentation logic lives in components, business logic stays in utilities, and the global audio manager ensures sound effects don’t turn into a cacophony when users spam-click the page turner. (They will. Users always will.)

Why Kiro Actually Worked

Here’s where things got interesting from a development perspective. Kiro’s spec-driven workflow forced me to think through the entire architecture before writing a single line of code. I started by creating detailed requirements documents using the EARS pattern and INCOSE quality rules — which sounds incredibly boring but actually prevented the classic “oh god what was I building again” moment at 3 AM.

The specs acted like a clean, brutally organized to-do list. No scope creep. No “wouldn’t it be cool if...” detours that derail the entire project. Just: here’s what we’re building, here’s how it breaks down, here’s the order of operations.

Kiro’s task system chunked everything into manageable pieces. Each task built incrementally on the previous one, so I could actually see progress instead of drowning in half-finished features. The ability to mark tasks as optional (like comprehensive unit tests) meant I could focus on making the thing work before making it perfect. Controversial take: sometimes shipping beats perfection.

The Hook That Saved My Documentation

The hook system deserves its own section. I created a “Kiroween README Beautifier” hook that automatically polished the README whenever I modified it. This meant I could focus entirely on building features while the documentation improved organically in the background.

The hook added Halloween-themed badges, ASCII art, mermaid diagrams, proper formatting — all the stuff that makes a README look professional but takes a bunch of time to do manually. By the end of development, the README was polished and properly structured without stealing a single minute from actual coding time. It’s the kind of automation that makes you wonder why we ever did this stuff manually.

Steering Rules: Teaching the AI to Sit

Early in development, I noticed Kiro’s agent had a bit of an... enthusiasm problem. It would see something that could be improved and just... do it. Without asking. Like a helpful roommate who reorganizes your kitchen while you’re at work. Technically useful, but deeply unsettling.

So I created a code-policy steering rule that required explicit commands before any code modifications. No more surprise refactors. No more “I improved your function names and filed your taxes” when I was in the middle of debugging. .

The Challenges

Browser Autoplay Is a Lie

Browsers have this lovely policy where audio won’t autoplay without user interaction. Makes sense for preventing annoying ads. Less fun when you’re building an atmospheric experience that relies on ambient sound.

The problem: users would interact with the map page, navigate to the book, and suddenly all the carefully crafted audio wouldn’t play. The interaction context was lost in the transition.

The solution: leverage the existing mute/unmute button as the audio unlock mechanism. When users unmute on the home page, it unlocks audio globally for the entire session. Suddenly page-flip sounds work immediately when they reach the book interface. Crisis averted through creative reuse of existing UI elements.

Quiz Progression Is Deceptively Complex

The quiz system needed to handle questions distributed across book spreads with left and right pages. Users answer to progress, but wrong answers trigger a dramatic flip back to the beginning. This required coordinating FlipBook’s imperative API (which likes to be told exactly what to do) with React’s declarative state management (which prefers to describe what should exist).

Getting these two paradigms to play nicely took some careful choreography. Too fast, and the animations break. Too slow, and it feels laggy. Just right, and users don’t even notice the complexity hiding underneath.

Making Smoke Look Good Without Melting CPUs

3D particle effects are great until someone opens your app on a 2015 Thinkpad and the fans sound like a jet engine . The smoke needed to be atmospheric without being expensive.

This meant implementing WebGL detection with CSS fallbacks, optimizing particle counts, and ensuring the effects enhanced the experience rather than becoming the experience. The goal was immersion, not a tech demo.

What’s Actually Next

The current version covers 19 countries with three thematic paths each. Future expansion could add more countries, additional paths, and deeper question trees. Community contributions could help build a proper global folklore database — there’s no shortage of dark history to explore.

Enhanced interactivity is on the roadmap: achievement systems for completing all paths in a country, leaderboards for those who need external validation, social sharing for the “look what I learned” crowd. The book interface could support more complex question types — ordering events chronologically, matching terms to definitions, maybe even short-answer questions if I’m feeling brave.

Accessibility needs work. Basic keyboard navigation exists, screen readers are supported, but there’s room for high-contrast modes, adjustable text sizes, and more comprehensive keyboard shortcuts. The audio system could include visual indicators for users who prefer or require silent operation.

Performance optimization is the eternal struggle. Lazy loading question data per country, virtual scrolling for long question sets, more aggressive code splitting. The 3D effects could adapt dynamically based on device capabilities — richer experiences on powerful hardware, smooth performance on modest devices.

Tl;DR

Séance proved that educational content doesn’t have to feel like homework, and that AI-powered development tools can actually enhance developer control rather than replace it. Kiro handled the structure, logic, and automation better than anything else I’ve used. The spec-driven approach kept development focused, the hooks automated the tedious stuff, and the steering rules gave me complete control over when and how changes happened.

I’m sticking with Kiro for the next project. And yes, the Kiroween Hackathon was a perfect excuse to build something atmospheric while learning a new tool. Sometimes the best learning happens when you’re trying to make virtual smoke look convincing .