Solaris - The Guiding Star

Explore the celestial wonders of our solar system through immersive visuals and captivating narration, from the scorching surface of Mercury to the icy realms of Neptune.

Comment

Inspiration

Myinspiration for Solaris came from a fascination with how immersive visualization can make learning about space and data systems both intuitive and poetic. I wanted to create an experience that blends art and engineering — a cosmic interface where users can explore, listen, and interact with planetary systems as if they were alive. The project draws from modern interface design, three.js-based rendering, and a desire to make astronomy feel tactile and emotional.

What it does

Solaris is an interactive, AI-guided 3D solar system simulation built on React Three Fiber and PostProcessing effects. It lets users:

  • Explore a realistic, orbiting model of the Solar System with motion, lighting, and depth.
  • Hear narrated, AI-generated guided tours for each planet.
  • Experience a dynamic interface with twinkling star backgrounds, smooth camera transitions, and interactive sound design.
  • Switch between an overview screen (“Cosmic Dashboard”) and a full 3D orbital simulation.
  • Access curated descriptions, facts, and stories for each planet — powered by structured data and text-to-speech narration. Solaris also comes with a chatbot designed to answer questions about the planet's moons, durface, atmosphere, etc!

How I built it

I built Solaris using:

  • React + TypeScript for component-driven structure and interactivity.
  • @react-three/fiber, three.js, and @react-three/drei for 3D rendering.
  • Canvas and WebGL shaders for procedural planet gradients, lighting, and noise texturing.
  • Howler.js for spatialized audio and ambient sound design.
  • Framer Motion for fluid UI transitions.
  • AI narration powered by pre-generated voiceover clips (and future TTS integration).
  • JSON-based entity data for modular, easily expandable planetary metadata.
  • Postprocessing (Bloom, Vignette) for a cinematic glow and realistic tone mapping. I started with a functional React UI, then progressively layered 3D realism, interactivity, and guided narration.

Challenges I ran into

One of the biggest challenges I faced was achieving realism and responsiveness simultaneously. Balancing real-time orbital motion with smooth performance in the browser required optimizing my Three.js scene and carefully managing state between React and React Three Fiber. Integrating the AI-guided narration also posed difficulties — ensuring that the generated voiceovers aligned with user interactions and transitions demanded asynchronous control and clean state resets. I also encountered dependency conflicts when integrating postprocessing effects such as bloom and vignette; these required precise version pinning between React 18 and Fiber 8. Additionally, crafting procedural textures that looked natural without relying on heavy image assets pushed us to experiment with canvas-based gradient generation. Every hurdle, though challenging, forced us to engineer smarter, cleaner solutions that made Solaris more elegant and stable.

Accomplishments that I'm proud of

I'm incredibly proud of transforming a simple React interface into a living, breathing 3D solar experience. The procedural planet rendering alone — built entirely through code rather than texture maps — was a major visual milestone. I also successfully implemented realistic lighting, ambient motion, and camera flight paths that make exploration feel cinematic. Beyond visuals, Solaris integrates an intelligent narration system that personalizes how users learn about each planet, and I created a consistent design language across both 2D and 3D views. The twinkling starfield, glowing sun, and orbiting planets together evoke the sense of wonder I set out to achieve. Most importantly, I'm proud that every line of code contributes to both aesthetic beauty and educational purpose.

What I learned

Throughout the development of Solaris, I gained a deeper understanding of how creative technologies like WebGL, procedural graphics, and motion design can merge with AI-driven storytelling to create meaningful experiences. I learned the nuances of scene rendering pipelines in React Three Fiber and how to apply postprocessing effects like bloom and vignette to enhance realism without overwhelming performance. I also learned valuable lessons about state synchronization between React components and Three.js objects, along with the importance of keeping my architecture modular for future expansion. More broadly, the project reminded me that interdisciplinary collaboration — bridging design, AI, and visualization — is key to building systems that both inform and inspire.

What's next for Solaris

My next step is to make Solaris even more dynamic and immersive. I plan to add true orbital mechanics so that planets move realistically around the sun over time, along with axial rotation and atmospheric effects. I also want to integrate real-world astronomical data from NASA APIs, allowing users to explore up-to-date information about planets, moons, and even exoplanets. AI will play a larger role, generating adaptive narrations that evolve based on the user’s curiosity and learning pace. Longer term, I envision Solaris as an educational VR/AR experience where users can step inside the Solar System, touch the stars, and learn through exploration. The future of Solaris lies in bridging science, imagination, and technology into one unified journey through the cosmos.

Share this project:

Updates