🎃 Spooky Time Machine: Resurrecting History with AI & Kiro
Submitted for Kiroween 2025 | Category: Costume Contest & Frankenstein
👻 The Awakening
The past is never dead. It isn't even past. But what if you could reach through the veil and touch it?
For Kiroween 2025, I didn't just want to build another history app—I wanted to resurrect the ghosts that textbooks buried. While others were carving pumpkins, I was stitching together a digital Frankenstein's monster: a time machine that doesn't just show you history, but lets you feel its cold breath on your neck.
Spooky Time Machine is what happens when you take the precision of D3.js, the dimensional magic of Three.js, and the creative chaos of Google Gemini and Hugging Face, then inject it with the spirit of Halloween. It's not just a web app; it's a séance with the past.
🌍 What We Built
Spooky Time Machine is a React-based application that allows users to:
- Spin the Globe of Doom: An interactive 3D globe (powered by D3.js and React Three Fiber) lets you select any location on Earth.
- Turn Back the Clock: Choose from historical eras—from the Ancient World to the Roaring 20s.
- Summon the Spirits (AI Generation):
- Visuals: We use Hugging Face's Stable Diffusion XL to generate unique, atmospheric images of your chosen location and time, drenched in a spooky Halloween aesthetic.
- Lore: Google Gemini 1.5 Flash crafts spine-chilling micro-stories and titles based on the location and era, ensuring no two journeys are alike.
- Fate's Wheel: A random event generator that whisks you away to historically haunted moments.
(Summoning a random historical event with Fate's Wheel)
(The haunting result after clicking "Generate Image" showing an AI-created atmospheric scene)
🎨 The "Costume" (UI/UX)
I didn't just want it to work; I wanted it to haunt. I poured my soul into the "Costume Contest" aspect of the hackathon:
Atmosphere: A "cracked stone" texture overlay that makes the interface feel like ancient, weathered tombstone. Drifting fog layers that never quite settle, and a deep, bruised-purple color palette that suggests twilight in a graveyard.
Lighting: Dynamic candlelight effects that cast dancing shadows across your screen, and Jack-o'-lantern glows that flicker and breathe with an almost lifelike rhythm. The light doesn't just illuminate—it moves.
Interaction: Custom spooky cursors that transform your mouse into a spectral hand, and subtle "glitch" effects that make the UI feel alive (and maybe possessed). Buttons don't just click—they respond with a shiver.
Accessibility: I believe terror should be accessible to all. Every spooky effect is paired with proper ARIA labels, keyboard navigation, and screen reader support. The fear is in the atmosphere, not the usability.
⚡ How Kiro Powered the Resurrection
Building a complex "Frankenstein" app like this in a short time would be a nightmare without the right tools. Kiro was our necromancer, helping us raise this project from the dead.
1. Vibe Coding for Atmosphere
I used Kiro's Vibe Coding to iterate rapidly on the "feel" of the app. Instead of manually tweaking CSS shadows for hours, I conversed with Kiro: "Make the fog feel more dense and rolling," or "Give the text a ghostly glow that pulses like a heartbeat." Kiro understood the vibe I was going for and generated the complex CSS animations and keyframes instantly. What would have taken hours of trial and error became a conversation.
Real Example: When I needed the candlelight effect to feel more authentic, I simply told Kiro: "Make the shadows dance more erratically, like real flame." Within seconds, I had a sophisticated animation using box-shadow with multiple layers and randomized keyframe timings that created that perfect, unsettling flicker.
2. Spec-Driven Development
To manage the complexity of combining 3D globes with AI services, I used Kiro's Specs. I defined the interface for my TextGeneratorService and ImageGeneratorService upfront. Kiro then helped scaffold the implementation, ensuring my "Frankenstein" parts fit together perfectly without loose stitches.
The Result: My AI services became plug-and-play components. When I decided to switch from one image generation model to another, the spec-driven architecture meant I only had to change the implementation, not the entire codebase. The stitches held.
3. Agent Hooks (The Invisible Hand)
I set up hooks to automatically lint my spooky code whenever I saved, keeping my codebase clean even as the deadline loomed. But more importantly, I used Kiro's agent capabilities to automatically generate alt text for my AI-generated images, ensuring my haunting visuals were accessible to screen readers. The agents worked like invisible spirits, maintaining code quality while I focused on the creative vision.
🚀 The MVP Development Process That Actually Works
After multiple attempts and iterations, I found a process that let me build this entire project in under 24 hours. Here's what actually works:
How to vibe code your MVP the right way in less than 24 hours:
Discuss product design and create a technical design document with Kiro
Take that technical design document and follow this process, step by step:
Use Kiro's Claude Haiku to one-shot a step
Use Opus 4.5 to double-check the work
Test it yourself in localhost
Move on to the next step
Finish all steps in the original technical design document, and you're done. Deploy it to Cloudflare or GitHub for Free!
This process cut through the noise and let me focus on building instead of getting lost in endless tool comparisons and setup headaches.
🛠️ The Tech Stack (Frankenstein's Parts)
- Frontend: React 19, TypeScript, Vite
- 3D & Maps: D3.js, React Three Fiber, TopoJSON
- AI Brains: Google Gemini 1.5 Flash (Text), Hugging Face Inference (Images)
- Styling: CSS Modules, Framer Motion (for the scares)
🔮 Future Nightmares (Roadmap)
- Audio Scares: Adding ambient soundscapes generated by AI.
- VR Mode: Step inside the generated image.
- Multiplayer Seances: Explore the haunted timeline with friends.
💀 Conclusion
Spooky Time Machine is more than just a tech demo; it's a tribute to the creativity that Halloween inspires. With Kiro handling the heavy lifting of code structure and boilerplate, I was free to focus on the magic—the fog, the glow, and the stories.
Happy Kiroween! May your code be bug-free and your commits be haunted. 🎃
Links:
Top comments (0)