The Karbala Manifold

Inspiration

I wanted to explore how history can be understood beyond just reading or memorizing it. The story of Karbala has a strong connection to geography, resource-management, and decision-making, and I thought it would be interesting to turn that into something interactive instead of static. I also believe it is very relevant today, especially when thinking about issues like resource scarcity and how pressure can shape human decisions, especially in times of war.

What it does

The Karbala Manifold is an interactive map that lets users explore key locations and phases of the event. It uses AI to explain strategy, meaning, and modern relevance, and also includes “what if” scenarios where users can see how changing conditions like water access or distance could affect outcomes.

How we built it

I built this as a solo project using React and a 3D scene for the map. I used a Voronoi-based layout to represent spatial influence and distance between locations. Gemini API was used for generating analysis.

Challenges we ran into

One of the biggest challenges was managing API limits while using Gemini for real-time responses. I also had to debug a lot of UI issues with rendering, positioning, and layering in the 3D scene. Making everything feel smooth and connected (map + AI + narration) took a lot of iteration. Also, I wanted to use ElevenLabs for the voiceover, but the free trial wasn't working because it was detecting unusually high activity from my IP address. So even though the code worked and I could integrate ElevenLabs into my project, I wasn't able to.

Accomplishments that we're proud of

I’m proud of turning a historical event into something interactive and meaningful instead of just informational. The combination of geometry, AI, and storytelling came together really well. Plus the fact that I managed to build the entire project on my own from scratch.

What we learned

I learned how to connect frontend interaction with AI systems in a more thoughtful way. I also got better at designing UI/UX for clarity and immersion, and learned how spatial models like Voronoi diagrams can actually represent real-world concepts like control and access.

What's next for The Karbala Manifold

I want to expand the “what if” system so users can create their own scenarios, and also improve the visual side by making the spatial regions more dynamic. I’d also like to connect the historical model more directly to modern case studies like resource scarcity and crisis response. I want to add the cities 'Kufa' and 'Shaam' into the map, since they highly influenced the event as well, and go into more detail about every character in the story since we have a lot to learn from each of them.

Built With

• css
• express.js
• google-gemini-api
• html/css
• javascript
• node.js
• react
• three.js-(react-three-fiber)
• vite