Celestia AI

Explore. Discover. Interact. Celestia turns the world into your 3D playground of knowledge. Step into an interactive 3D world where every place tells its story.

Comment

Inspiration

I wanted to reimagine how people explore the world digitally. Maps and videos often feel flat and disconnected, so I asked myself: what if discovery could feel alive? The idea of a holographic mascot that not only shows places but also narrates their stories inspired the creation of Celestia AI.

What it does

Celestia AI transforms a map into an interactive 3D world where exploration feels personal. By dropping a marker on any location, a holographic mascot appears, presenting:

  • Cinematic looping video snippets
  • Six engaging fact cards per location
  • Live voice narration

Instead of reading static text, users get a guided, immersive storytelling experience that makes culture, heritage, and history feel tangible.

How I built it

I built Celestia AI using a combination of frameworks and APIs:

  • React for the UI framework
  • Three.js/WebGL for rendering the 3D world and holographic effects
  • Speech Synthesis API for voice narration of the fact cards
  • Geolocation / Mapping APIs (OpenStreetMap + Nominatim) for handling location search and marker placement
  • PEXELS APIs for fetching and embedding short looping video snippets tied to locations
  • Custom synchronization logic to keep narration, fact cards, and video playback aligned in real time

Challenges I ran into

  • Balancing performance with video overlays and 3D rendering
  • Syncing narration with fact cards in real time
  • Designing a futuristic yet usable interface
  • Handling WebGL context loss during rendering

Accomplishments that I'm proud of

  • Creating a working holographic explorer that blends video, narration, and facts seamlessly
  • Designing a mascot system that feels engaging and interactive
  • Building an immersive map interface beyond just navigation

What I learned

  • How to combine 3D rendering, speech synthesis, and media synchronization into one flow
  • The importance of crafting not just features, but a storytelling experience
  • Handling advanced WebGL challenges to keep the interaction smooth

What's next for Celestia AI

  • Adding mascots with unique personalities and voices
  • Integrating real-time cultural event updates and local highlights
  • Bringing in AR/VR support for a truly holographic experience
  • Enhancing with adaptive background music that matches the mood of the narration

Built With

Share this project:

Updates