🌌 Solar System Simulator

An interactive 3D Solar System built with React + Three.js. Fully static — no backend, no database. Planets (and their moons!) orbit the Sun in real time; click/tap the Sun, any planet, or the asteroid belt to see a full detail panel.

Stack: React · Vite · Three.js (@react-three/fiber) · GSAP · Lenis (smooth scroll) · Tailwind CSS

---

✨ Features

• Real-time 3D orbital simulation — Sun, all 8 planets, their major moons, and a stylized asteroid belt with Ceres
• Click/tap any body (Sun, planet, moon's parent, or Ceres) → detailed info panel: distance, gravity, mass, atmosphere/composition breakdown (with % bars), moons list, and facts
• 🔍 Search bar — jump straight to any planet, moon, or the asteroid belt by name
• 🔊 Ambient space sound (fully synthesized in-browser with the Web Audio API — no external audio files), with a mute toggle
• Cinematic, CSS-driven intro animation that can never get stuck
• Pause/play + speed slider, orbit camera controls (drag to rotate, scroll to zoom)
• Smooth-scrolling info panel powered by Lenis
• Fully responsive, dark space UI with glassmorphism panels and a friendly Poppins typeface
• SEO meta tags, Open Graph/Twitter cards, favicon & web manifest included
• GitHub source link in the footer (edit src/config.js to point at your repo)

---

📁 Project Structure

solar-system-simulator/
└── frontend/
    ├── public/               # favicon, og-image, manifest
    ├── src/
    │   ├── components/       # Sun, Planet, Moon, AsteroidBelt, SolarSystem,
    │   │                     # InfoPanel, SearchBar, SoundManager, Footer, etc.
    │   ├── data/planetsData.js   # ALL data lives here — Sun, planets, moons, belt
    │   ├── config.js         # GITHUB_URL — point this at your repo
    │   ├── App.jsx
    |   |- index.css
    │   └── main.jsx
    |- index.html
    └── package.json
    
    

There is no backend/ folder and no database — every fact, stat, and moon is a plain JS object in src/data/planetsData.js. Want to add a planet, correct a number, or add another moon? Just edit that one file.

---

🚀 Getting Started

cd frontend
npm install
npm run dev

Open http://localhost:5173. That's it — no .env, no MongoDB, no second terminal for a backend.

Build for production:

npm run build   # outputs to frontend/dist
npm run preview # preview the production build locally

---

🌐 Deployment (Vercel, Netlify, or any static host)

1. Push the frontend/ folder to GitHub.
2. Import into Vercel (or Netlify) — root directory = frontend.
3. Framework preset: Vite. Build command: npm run build. Output dir: dist.
4. Deploy — no environment variables needed.

vercel.json is already included for correct SPA routing.

---

🧠 How it works (for learning)

• 3D scene: @react-three/fiber renders a Three.js <Canvas> declaratively. Each Planet tracks its own orbit angle in a useRef and updates its x/z position every frame in useFrame, using Math.cos/Math.sin — the same math behind any circular motion. Distances/sizes are scaled for visual appeal, not true astronomical scale.
• Moons: each planet's moons array (in planetsData.js) is rendered as small spheres orbiting inside that planet's own group, so they automatically follow the planet around the Sun.
• Asteroid belt: rendered with a single InstancedMesh (hundreds of rocks in one draw call) for performance, positioned between Mars and Jupiter. Ceres is rendered as a regular clickable "planet" object within the belt.
• Sound: SoundManager.jsx uses the raw Web Audio API to synthesize a low ambient drone + filtered noise "hiss" entirely in-browser — no MP3/WAV files, so there's nothing to license or host.
• Smooth scroll: the info panel uses Lenis to smooth out its internal scroll, instead of the browser's native (often janky) scroll.
• Intro animation: driven by plain CSS @keyframes with animation-fill-mode: forwards, guaranteeing it always finishes and the "Enter" button always becomes clickable — no dependency on JS timing.

---

📄 License

Built for educational purposes. Free to use and modify.