Inspiration
We wanted to build a Halloween experience where the UI itself becomes the horror, not just the characters. Instead of jump-scares or heavy effects, we explored how atmosphere, color, vibration, and particles could communicate danger and narrative. Folklore felt like the perfect playground—short rules, quick decisions, and strong visual identity. That vision became FOLKLORERUN: a compact, mobile-first folklore encounter where every screen feels alive.
What it does
FOLKLORERUN is a 9:16 mini-game featuring three folklore creatures, Baba Yaga, Banshee, and Aswang - each with their own:
- Distinct UI identity (neon runes, pixel echoes, ember fog).
- Three-level encounter with meaningful choices.
- Story bubbles that reveal lore in a simple, scroll-like flow.
- Haunted UI system where fog, glow, echoes, and vignette intensity shift with emotion and threat.
- Accessibility-first design, including reduced-motion mode, contrast checks, and visual alternatives for audio cues.
What makes it different: our UI doesn’t decorate the game - it drives it. Atmosphere acts as a signaling layer, nudging players toward decisions through color, animation, and subtle environmental changes.
How we built it
We designed FOLKLORERUN as a mobile-first web experience using clean animations, lightweight assets, and expressive visuals. All creature content- stories, personality, UI behavior, and choice paths - lives in structured data files so we could iterate quickly without rewriting code.
How Kiro helped
- Vibe coding: We described the emotional tone of each creature and Kiro helped us refine the UI language—rune glows, fog tiers, echo patterns.
- Spec-driven workflow: We wrote a clear spec and Kiro generated consistent content, task lists, and structural files based on it.
- Agent hooks: We automated repetitive tasks like regenerating content variations, accessibility checks, and file scaffolding.
- Testing support: Kiro helped us build strong acceptance criteria and reasoning around UI behavior, helping us catch issues early. Overall, Kiro became both a creative assistant and a technical system to keep the project stable and polished.
Challenges we ran into
- Making atmosphere functional: Designing a UI that communicates state (rather than just looking spooky) required repeated testing and refinement.
- Performance on phones: Balancing animations like glows, and particles with mobile performance meant constant optimization.
- Finding the right storytelling rhythm: Each creature needed short, punchy bubble text - but still meaningful, eerie, and readable.
- Keeping the experience accessible: We had to rework colors, motion, and contrast multiple times to ensure it remained usable for all players.
Accomplishments that we're proud of
- A fully playable demo with distinct encounters and working UI reactions.
- A spec-driven pipeline with organized requirements, coherent content, and polished flows.
- Accessibility baked in from the start, not added at the end.
- A Haunted UI system that genuinely feels atmospheric and functional.
- Smooth collaboration between creative storytelling and technical structure - amplified by Kiro’s capabilities.
What we learned
- Atmosphere becomes powerful when it is systematic, not random.
- Specs and creativity can work together - you can write rules without losing soul.
- Designers and AI tools can co-create effectively when the direction is clear and constraints are strong.
- A small game becomes much richer when every visual and animation has intent behind it.
What’s next for FOLKLORERUN
Short-term:
- Add multi-language folklore characters.
- Build a simple creator mode for users to design their own creature encounters.
- Add optional audio that syncs with the existing visual cues.
Long-term:
- Build a community pack of global folklore submissions.
- Explore adaptive difficulty based on UI reactions.
- Experiment with AR overlays or location-based folklore “encounters.”
TL;DR
FOLKLORERUN is our experiment in turning UI into storytelling. With Kiro’s help, we built a mobile-first folklore game where atmosphere is not decoration, it’s gameplay. It’s accessible, expressive, and handcrafted to bring Halloween folklore to life in a modern, hauntingly elegant way.
Built With
- html5
- javascript
- kiro
- tailwind-css
Log in or sign up for Devpost to join the conversation.