Spooky Time Machine: Haunted History on a Globe

Spooky Time Machine is a Halloween-themed “haunted history” explorer that lets you click anywhere on a 3D globe and see eerie events from that location, brought to life with AI-generated images. It turns the world into a time portal: each click is a jump into a different place and moment in history.

The idea came from wanting something that feels like a cursed atlas crossed with a time machine. Instead of a flat list of facts, you get an immersive globe, atmospheric audio, and moody visuals that match Kiroween’s spooky vibe. The goal was to make history feel like ghost stories told through an interface, not a textbook.

I built the project as a React app using a 3D globe component (React Three Fiber / Globe.gl) for the main interaction. When the user clicks on a point on the globe, the app resolves that location, picks a relevant “haunted” or atmospheric historical event, and sends a structured prompt to an AI image model. The model returns a spooky, time-appropriate image that gets displayed in a panel next to the globe along with the event description and time period.

Kiro was used heavily to speed up development. I started with vibe coding sessions to scaffold the React components, event data models, and API wiring for image generation. Then I moved into spec-driven development: I defined clean TypeScript-style interfaces for things like Coordinates, TimeSelection, NotableEvent, and GeneratedImage, and captured these in Kiro specs so it could safely regenerate and refactor code without breaking types. Steering docs were used to keep the image prompts consistent: dark palette, subtle horror, no gore, no copyrighted characters, and a “haunted but tasteful” aesthetic.

What I learned is how powerful it is to treat Kiro as a spec-aware teammate instead of just a code autocomplete. By writing down correctness properties (for example, “coordinates must always stay in valid latitude/longitude ranges” or “the generate button is only enabled when both a time and location are selected”) and feeding them into Kiro, it helped me catch edge cases and keep the app logic aligned with the design. It also made it much faster to iterate on the prompt builder service, because I could change the prompt template in one place and regenerate the plumbing code around it.

The main challenges were balancing visuals and performance. A 3D globe with glow effects, fog layers, and animated UI can easily become sluggish, so I had to simplify some shaders and lean on CSS animations instead of heavy WebGL effects in a few places. Another challenge was getting the prompts right: too generic and the images look like stock fantasy art; too specific and they overfit to strange details. Using Kiro’s steering plus a dedicated prompt builder service helped converge on a template that feels atmospheric but still historically grounded.

Overall, Spooky Time Machine is an MVP, but it already captures the core experience: click on a place, jump in time, and see the world through a haunted, Kiroween-flavored lens. There is a clear path to extend it later with more events, a “grimoire” of saved locations, and richer timelines, but the current version focuses on delivering that first satisfying moment when the globe spins, the thunder rumbles, and a spooky scene fades into view.

Built With

• css
• globe.gl
• kiro
• node.js
• react
• typescript