Dear Dead Diary

Your thoughts summon the dead.

Comment

Inspiration

I wanted to create something spooky, personal, and interactive — a diary that feels alive. Instead of a typical jumpscare-style Halloween project, I wanted something that evolves, remembers the user, and builds a quiet, eerie connection over time.

The idea of a diary that watches, whispers, and reacts felt perfect for Kiroween.

What it does

Dear Dead Diary is an interactive spooky diary that feels alive. Users can open a beautifully eerie diary cover, choose their bookmark, flip through rounded decorative pages, write entries, place stickers, and save their thoughts. The diary remembers past visits, whispers atmospheric lines, triggers random spooky events, and reveals hidden pages like the Hall of Echoes. It’s a personal journaling experience wrapped in a soft Halloween vibe, designed to evolve every time the user returns.

How we built it

I built the entire project using HTML, CSS, and JavaScript, keeping it lightweight and fully custom. Kiro played a major role throughout development: Vibe Coding: helped generate layouts, animations, and interactive elements. Specs: structured the event logic, memory system, and page flow. Agent Hooks: created modular functions like onDiaryOpen(), onPageFlip(), and onEntrySaved(). Steering Docs: defined the tone of whispers and spooky messages.

Challenges we ran into

Designing spooky pages that felt decorative but not overwhelming Synchronizing page-flip animations with sound Handling sticker placement and saving coordinates Making the bookmark update as pages flip Ensuring smooth transitions between multiple pages Keeping the diary immersive while still lightweight

Accomplishments that we're proud of

Creating a polished, multi-page storytelling experience Making the diary feel alive with whispers, animations, and evolving content Allowing users to customize bookmarks and create their own stickers Building everything without frameworks, using only HTML/CSS/JS Using Kiro’s tools (Specs, Hooks, Steering) to guide structure and atmosphere Crafting a spooky environment that is cozy, personal, and fun to revisit

What we learned

How to use Kiro as a creative coding partner rather than just a generator How Specs, Hooks, and Steering help organize ideas and keep tone consistent How to manage multi-page state with localStorage How to blend sound, visuals, and motion to create mood How to design an interface that feels alive and responsive How small animations and subtle audio can transform a simple UI into an experience

What's next for Dear Dead Diary

Adding more pages and storylines that unlock over time Introducing dynamic weather-based ambience (via MCP/API) Allowing users to export their diary as a PDF Adding a “Haunted Sticker Shop” with unlockable stickers Daily or weekly spooky prompts generated with Kiro Multiplayer “shared pages” where users anonymously leave whispers for others

Built With

Share this project:

Updates