A next-generation, immersive 3D solar system experience built with React and Three.js. This project transforms the traditional "learning about space" experience into a cinematic, interactive journey. Users traverse the solar system, visiting planets that are presented as "Holographic Chapters" containing real scientific data, simulated live feeds, and rich visual storytelling.
The application is designed around the concept of a "Digital Spacebook" or "Interactive Slide Deck":
- Intro Sequence: A majestic view of the entire solar system slowly rotating, inviting the user to "Explore Cosmos".
- Scroll Navigation: Instead of typical web scrolling, the user scrolls to "dive" into specific chapters.
- Planet Command Centers: Each planet (Earth, Mars, Jupiter, etc.) opens a full-screen holographic interface:
- Strategic Overview: Detailed descriptions ("The Cradle of Life", "The Red Planet").
- Data Analysis: Real-time stats showing Temperature, Gravity, Day Length, and Moon count.
- Live Feed Simulation: A "satellite link" window showing high-fidelity generated imagery of the planet's surface with scan-line effects and status overlays.
- Visualizers: Dynamic animated bars representing distance from the sun and planetary radius.
- Living Interface: The UI feels alive with breathing animations, scanning effects, and a vector astronaut exploring the data panels.
"Why build a standard website when you can build a universe?"
I created Explore Cosmos to challenge the conventional boundaries of web development and portfolio design. In a world of static grid layouts and standard scrolling pages, I wanted to demonstrate how Creative Engineering can transform data consumption into an emotional experience.
My goals for this project were three-fold:
- Bridging Art & Engineering: To prove that high-performance code (React/Three.js) and high-fidelity aesthetics (Cinematic Lighting/Motion Design) are not mutually exclusive.
- Reimagining Education: To show that learning about our solar system doesn't have to be reading a textbook—it can be a tactile, exploratory journey that sparks curiosity.
- Technical Showcase: To push the limits of what is possible in a browser, handling complex 3D orbital mechanics, post-processing effects, and reactive UI animations simultaneously without compromising performance.
This project stands as a testament to the idea that the web is a canvas for immersive storytelling, capable of transporting users from their screens to the edge of the known universe.
This project utilizes a modern, performance-oriented stack to deliver high-quality 3D graphics in the browser:
- React: The core UI framework, managing application state (
activeSection,hoveredTitle) and view transitions. - Vite: Lightning-fast build tool and dev server.
- Three.js: The underlying 3D graphics engine.
- React Three Fiber (R3F): A React renderer for Three.js, allowing declarative, component-based 3D scenes.
- Usage: Used for the entire background scene (
Canvas), managing the Sun, procedural planets, orbits, and stars.
- Usage: Used for the entire background scene (
- React Three Drei: Abstractions for R3F.
- Usage:
Stars,Sparkles,Environment,PerspectiveCamera.
- Usage:
- GSAP (GreenSock Animation Platform): The powerhouse for complex animations.
- Usage:
ScrollTriggeris used to map scroll positions to chapter indices, triggering the "Book Chapter" effect. Mouse movement effects for the custom cursor.
- Usage:
- Framer Motion:
- Usage: Handling high-fidelity UI entrance/exit animations (glass panels sliding in, text revealing, opacity fades).
- Maath:
- Usage: Smooth dampening functions for camera movement (
easing.damp3) to create cinematic transitions between camera angles.
- Usage: Smooth dampening functions for camera movement (
src/
├── assets/ # (in public/) Generated assets (planetary surface views, vector art)
├── components/ # React components
│ ├── Scene.jsx # The 3D "World". Handles:
│ │ # - OrbitingPlanet (Movement logic)
│ │ # - ProceduralPlanet (Visuals)
│ │ # - CameraController (Cinema-like pans)
│ └── ErrorBoundary.jsx # Protection against 3D rendering crashes
├── data/
│ └── sections.js # CENTRAL DATABASE: Contains all planet data, stats, facts, and image paths.
├── App.jsx # MAIN CONTROLLER:
│ │ # - GSAP ScrollTrigger setup
│ │ # - Canvas/3D Background rendering
│ │ # - HTML/UI Overlay rendering (The "Holographic" interface)
├── index.css # Global styles (Custom scrollbar, fonts, resets)
└── main.jsx # Entry point
- Before: Free-scrolling page or click-to-nav.
- After: Implemented a strict "Chapter" system using
ScrollTrigger. Scrolling now feels like turning pages in a futuristic book.
- Lighting: Added
EffectComposerwithBloomfor that sci-fi glow. - Motion:
- Slowed down solar system rotation for a sense of scale.
- Added a 22.5° axial tilt to the system for cinematic framing.
- Added "Scan" and "Pulse" CSS animations to UI elements.
- Data Injection: Updated
sections.jsto include hard science data (Gravity, Temp, Moons). - Asset Generation: Used generative AI to create:
- Photorealistic surface textures for Earth, Mars, Jupiter, Saturn, Neptune, Moon.
- Vector art for the UI (Astronaut explorer).
- Layout: Moved from a centered layout to a "Split Command Center" design.
- Left: Education/Info.
- Right: Visual/Telemetry.
- Custom Cursor: A custom glowing cursor that reacts to interactive elements.
- Fonts: Standardized on 'Inter' for clean, readable, dashboard-like typography.
-
Clone the repository:
git clone https://github.com/rishavgitid/explore-cosmos.git cd explore-cosmos -
Install dependencies:
npm install
-
Run locally:
npm run dev
-
Build:
npm run build
- 3D Code: Custom procedural generation via Three.js.
- Images: AI-generated photorealistic planet surfaces and vector icons.
- Fonts: Inter (Google Fonts).
Created by Rishav Kumar - 2026