FOLKLORERUN — how Kiro turned a spooky idea into a haunting, playable web experience 👻

Umaadevi — Thu, 04 Dec 2025 20:07:10 +0000

Imagine you’re quietly walking through a misty forest at midnight. The air is cold, the wind is soft, and suddenly… a tiny glowing orb floats in front of you. It flickers, spins, and transforms into a card - a card showing a creature from ancient myths and dark folklore. You tap it, and instantly you're transported into their realm, their personality, their powers, and even their softer side.

That’s exactly what our app does.
It doesn’t just show monsters, it makes you feel like you’re stepping into their story. Each creature carries its own art style inspired by dramatic anime lighting and detailed backgrounds, so every level feels like a moment from a supernatural animated film. You experience their lore, their vibe, their emotional world… and a little interactive journey with buttons, UI glows, and animations shaping how you explore them.

Nothing in the app is random - every glow, every hint of fog, every bubble of dialogue belongs to their atmosphere.

We didn’t just write about them.
We built an experience that lets you feel them.

Now that you’ve stepped in, here’s what makes the design exciting:

Quick Project Snapshot

Category: Costume Contest - a UI-first spooky game rooted in atmosphere
Platform: Purely 9:16 responsive mobile web
Creatures:
- Baba Yaga - neon-purple fire & runic magic
- Banshee - pale-blue pixel echo & frost
- Aswang - ember-red dread & shifting shadows
Built With Help From Kiro: Content writing, UI patterns, JSON configs, animation hooks, test scaffolds
Testing: Property-based tests, flow validation, accessibility support, state-driven UI rules
Core Idea: The UI changes based on the creature you choose and the emotional state of the scene.

How We Built It

Working with Kiro wasn’t like typing into a machine. It felt like having a co-designer, someone who could brainstorm the vibe with us, help craft creature lore, draft dialogues, and then instantly translate those ideas into clean UI logic.

We went from:
“What if the intro looks spooky?”
to
“Here is a scene-by-scene sequence where a video intro plays, the creature materializes, the environment shifts colors, fire reacts to their mood, and the story unfolds in stylized dialogue bubbles.”

It was iterative.
It was creative.
And honestly, it was fun.

The biggest leap came when we decided the UI shouldn’t just look haunted , it should behave haunted.

App (root state management)
├── IntroAnimation (video intro with skip)
├── CreatureSelection (three creature cards with fire effects)
├── CharacterReveal (entrance + close-up animations)
├── StoryBubbles (4-5 sequential bubbles with creature styling)
├── GameplayScreen
│   ├── HeroScene (background, particles, visual effects)
│   ├── AmbientEffects (fire overlays, fog, creature-specific particles)
│   ├── DecisionPanel (choice buttons with creature styling)
│   ├── Inventory (creature-specific mechanics UI)
│   └── SoundCueVisual (visual feedback for audio events)
├── EndCard (victory/defeat with dramatic animations)
├── ReducedMotionToggle (accessibility control)
└── BackButton (navigation helper)

So the background responds.
Spooky, yes - but always functional. The atmosphere guides the player.

Each creature is treated like a full character: their intro, their lore, their movement, their bubble style, their fire color, their animations, their victory and defeat sequence - everything handcrafted to match their identity.

The Haunted UI

Before diving in, here’s the magic broken down cleanly and simply.

1) Creature Personalities Expressed Through UI

Every folklore creature transforms the entire screen into their signature environment.

Baba Yaga: neon violet runes, floating candles, glassy purple buttons
Banshee: icy scanlines, soft pixel waves, frost-glow UI
Aswang: ember drift, darkened edges, trembling red light

Nothing is reused; each creature receives its own UX language.

2) Atmosphere as Warning System

No gauges. No meters.
The world itself tells you how close you are to danger:

fog thickens
fire intensifies
vignette closes in
particles behave unpredictably

Atmosphere becomes a mechanic.

3) Micro-Actions That Feel Alive

Every tap comes to life:

pulses
glow rings
rune flickers
ice cracks
ember bursts

Even in silence, the game feels responsive.

4) Storytelling Through Cinematic Moments

Rather than long paragraphs, each character reveals themselves through 4–5 stylized bubbles, each animated with personality:

Baba Yaga: rounded neon-purple
Banshee: pixel rectangles
Aswang: fog-edged dark shapes

It feels like reading a mini interactive comic.

5) Final Moments That Leave a Mark

When you win:

enemies dissolve upward in their fire color
the screen brightens
“Defeated!” rises like a victory charm

When you lose:

the creature lunges in a dynamic zoom
shadows swallow the screen
“You Died” appears — bold, but never gory

Spooky, not disturbing.

How Kiro Helped Behind the Scenes

It didn’t feel like prompt → answer.
It felt like a duo building something real.

1) Using Kiro’s Vibe Coding to Guide the Entire Build

We treated Kiro like a teammate.
Every time we explored ideas, we shaped the conversation into checkpoints - creature theme, UI feel, mechanics.
Kiro responded with fully formed interfaces, animation ideas, and logic flows.
One of the most magical moments was when Kiro produced the full haunted UI system - fog tiers, parallax layers, particle themes, victory/defeat cinematics - from a single structured chat.

2) How Kiro’s Agent Hooks Automated Half Our Workflow

Hooks triggered tasks whenever the spec changed — regenerating tests, updating configs, generating accessibility variants, even recalculating particle density for low-power devices.
The background workflow handled everything.
We stayed focused on creativity while Kiro managed the execution.

3) How Spec-Driven Development Made the Game Actually Buildable

Our formal spec: 19 requirements, 100+ acceptance criteria.
Kiro followed it like a contract.
Every task in tasks.md mapped to a requirement, and every test traced back to one.
It felt like engineering mode - predictable, traceable, clean.

4) Steering Docs That Kept Kiro Perfectly Aligned

We crafted steering notes like:
“strict mobile-first,”
“retain creature identity,”
“WCAG AA always,”
“cinematic but not heavy.”

These worked like Kiro’s compass.
Whenever anything drifted, a tiny steering update snapped the responses back into place.
This approach saved hours of rewrites.

5) MCP Extensions That Made the Project Feel Unlimited

With MCP, we expanded Kiro beyond basic codegen - asset management, text contrast validation, particle performance simulation, and auto-generated property tests.
Tasks like fog optimization or reduced-motion modes became effortless because MCP handled heavy lifting.

What We Learned

A full haunted UI doesn’t need heavy assets - perfect images, CSS, timing, particles, and color psychology can do the magic.
Story-driven interfaces feel believable when every element shares the same emotion.
Tools like Kiro shine not as idea machines but as creative partners when you control the vibe, structure, and constraints.

Try it out: https://umaadevi-p.github.io/Folklorerun-game/

Final Thoughts

Why mythological creatures?
Because every culture has stories that survive centuries - they deserve a modern, interactive format.

Is it a game or an educational app?
It sits comfortably between both.

Will there be more creatures?
Absolutely — this is only Volume One.

FOLKLORERUN became more than a Halloween special.
Kiro wasn’t just generating lines or UI mockups - it became a collaborative engine capable of producing content variants, wiring configurations, scaffolding tests, and giving us runnable front-end patterns.

The real win was speed and polish.
We moved from idea → spec → playable MVP far faster than expected, without sacrificing accessibility, performance, or atmosphere.

In the end, it became a little world with its own rules, moods, animations, and personalities, and a UI that truly feels alive.

Forem: Umaadevi