Building a Horror Game in 8 Hours with Kiro AI - My Kiroween Hackathon Journey

Source: Dev.to

Project Overview

For the Kiroween 2025 hackathon I built Layers of Static, a psychological horror experience presented as a vintage 1970s CRT television. An AI lives inside the TV, asking disturbing questions and issuing creepy dares. The challenge was the “Frankenstein” category – stitching together incompatible technologies into something unexpectedly powerful.

• Aesthetic: 1970s CRT (scanlines, phosphor glow, chromatic aberration)
• AI: Google Gemini for conversation
• Voice synthesis: ElevenLabs TTS with a little‑girl voice
• Audio: Web Audio API (music‑box loops, ducking, sound effects)

With Kiro AI I shipped the whole thing in 8 hours.

Kiro AI Development Environment

Kiro is an AI‑powered development partner that goes beyond simple code generation.

Think “GitHub Copilot meets project manager meets senior dev who never forgets context.”

Steering Documentation

I placed three markdown files in .kiro/steering/ so Kiro always knew the project’s vision, structure, and tech stack.

product.md – The Vision

## Design Philosophy
- Visual: CRT effects (scanlines, phosphor glow, chromatic aberration)
- Tone: Cryptic, poetic, disturbing – unsettling but not explicit
- Inspiration: Layers of Fear, Call of Duty: Black Ops terminal

structure.md – Where Code Lives

tech.md – Stack Constraints

• React 18 with TypeScript
• Vite for fast builds
• Tailwind CSS + custom CRT effects

These docs were auto‑injected into every Kiro conversation, eliminating repetitive “remember we’re building a horror game” prompts and saving ≈ 5 hours of context‑setting.

Custom MCP Servers

Example: On Day 1 I said, “We’re using ElevenLabs for TTS with a creepy little‑girl voice.” On Day 2, after closing and reopening the session, Kiro remembered automatically. This turned Kiro from a stateless autocomplete into a stateful development partner.

Specification Files

All core features were described in .kiro/specs/.

requirements.md – 9 EARS‑compliant Requirements (excerpt)

REQ‑2.1: WHEN the terminal is visible,
         the system SHALL display animated scanlines
         with 0.1 opacity and 2px spacing

design.md – Technical Blueprint (excerpt)

## Scanline Implementation
- CSS: repeating-linear-gradient
- Animation: vertical scroll at 10s duration
- Fallback: Static scanlines if animation disabled

tasks.md – 25 Atomic Tasks (excerpt)

• 2.2 Implement scanline effect
  • Create #scanlines overlay
  • Add vertical animation
  • Requirements: 2.1

When I said “execute task 2.2,” Kiro knew exactly what, how, where, and why to build the feature, resulting in zero missed requirements.

Implementation Highlights

Scanline Effect

Implemented via a CSS overlay using repeating-linear-gradient and a vertical scroll animation. The effect could be toggled off for low‑performance devices.

Audio Management System

Kiro generated a complete audio ducking system in utils/sound.ts:

// utils/sound.ts
const duck = () => {
  if (muted) return;
  ducking = true;
  const targetVolume = masterVolume * DUCK_VOLUME;
  const steps = 10;
  const interval = DUCK_DURATION / steps;
  let step = 0;

  duckInterval = setInterval(() => {
    step++;
    activeTracks.forEach(track => {
      const newVolume = track.volume -
        (track.volume - targetVolume) / (steps - step + 1);
      track.volume = Math.max(targetVolume, newVolume);
    });
    if (step >= steps) clearInterval(duckInterval);
  }, interval);
};

Features

• Smooth volume ramping (200 ms transitions)
• Coordination across 5+ audio sources
• Cancellation flags for interrupting speech
• Proper cleanup to prevent memory leaks

Implemented and debugged in seconds—something that would have taken hours manually.

CLI‑First Workflow

I spent ~90 % of development time in the terminal using kiro-cli:

# Add error handling to the TTS service
kiro "add error handling to TTS service"

# Make the glow effect more subtle
kiro "make the glow effect more subtle"

# List all TODO comments and filter urgent ones
kiro "list all TODO comments" | grep URGENT

Benefits

• Instant responses, no UI overhead
• Ability to pipe commands and script workflows
• Consistent context retention across sessions

The experience felt like pair programming with a senior dev who types at 1000 WPM and never forgets the project’s history.

Results and Metrics

The polished horror experience that would have taken weeks to build manually shipped in a single hackathon day.

Lessons Learned

• Steering docs upfront (≈ 30 min) save hours of repetitive context‑setting.
• Specs provide clarity and traceability for core systems.
• Vibe‑style prompts accelerate polish and creative iteration.
• MCP servers turn Kiro into a true development partner with persistent memory.
• Terminal‑first development can be faster and more flexible than GUI IDEs for power users.

Live Demo and Source Code

• Demo: https://layers-of-static.vercel.app
• Source: https://github.com/MasihMoafi/kiroween

Warning: Turn on your speakers, light the candles, and don’t play alone.

Call to Action

• Write steering docs first – a small upfront investment pays off big.
• Use specs for complex features – clarity beats speed for core systems.
• Embrace “vibe” code for rapid polish.
• Build or use MCP servers – persistent context is a super‑power.
• Try the CLI – terminal‑first development is surprisingly efficient.

What’s your experience with AI‑assisted development? Have you tried Kiro or similar tools? Drop your thoughts in the comments!

This project was built for the Kiroween 2025 hackathon. See other submissions at https://devpost.com/kiroween.