Space Online is a modular, 3D-first web experience where we simulate interactive cosmic objects — black holes, nebulas, and whatever else space throws at us.
Originally a black hole sim, this project is growing into a web-based cosmic universe, with real-time effects, spatial animations, and wild visual storytelling.
🔭 Live Demo
🚀 View Demo (custom domain soon)
Package | Purpose |
---|---|
next@15 |
App framework (Turbopack) |
react@19 |
Frontend UI engine |
three |
3D rendering core |
@react-three/fiber |
React wrapper for Three.js |
@react-three/drei |
Helpers for cameras, lighting etc |
@react-three/postprocessing |
Effects like Bloom, Noise |
gsap |
Timeline animation controller |
# 1. Clone the repo
git clone https://github.com/FL45h-09/space-online.git
# 2. Enter the directory
cd space-online
# 3. Install dependencies
npm install
# 4. Start dev server
npm run dev
## 👥 Contributing
We 💜 open-source collabs. Just follow some cosmic rules:
### ✅ Do
Fork → Feature branch → PR
Run npm run lint before pushing
Keep PRs atomic and descriptive
Stick to the vibe: performance + visuals = 🔥
### ❌ Don't
No direct main commits
Don’t push broken features
Don’t go rogue with new dependencies
## 🚀 What are we planning Next(Fetures)?
Here are some ideas you can build:
### 🎯 Beginner Level
- 📸 Add camera orbit + zoom controls
- 📱 Improve mobile responsiveness
- 🌈 Animate background gradient transitions
- 🌌 Add starfield with particles
- 🔭 Create multiple black hole styles (Kerr, Schwarzschild, etc.)
### ⚙️ Intermediate Level
- 🎧 Audio-reactive visuals with Web Audio API
- 🌠 Shooting stars / comet trails using shaders
- 🎛 Add GUI controls for FX ( via leva or dat.gui )
- 🌙 Add light/dark mode switch for UI elements
- 🪐 Modularize components with better state separation
### 🧠 Advanced / Galaxy Brain
- 🔮 Use shaders ( GLSL ) for trippy distortion FX
- 🛰 Connect with a NASA or SpaceX API for real-time data
- 🧲 Add physics-based object interaction ( using cannon-es )
- 🚀 Build a level-based space exploration game mode
- 🧬 WebXR integration: make it VR-compatible 👀
- 🕳 Add a black hole lensing effect ( gravitational distortion )
Also we can have the Navigation on the top and have the sperate
## 🔗 Few Links:
📜 For code style and review flow. We’ve set up contribution files to keep things organized:
- 📃 [Contributing Guidelines](CONTRIBUTING.md)
- 🐛 [Bug Report Template](.github/ISSUE_TEMPLATE/bug_report.md)
- 🌟 [Feature Request Template](.github/ISSUE_TEMPLATE/feature_request.md)
- ✅ [Pull Request Template](.github/PULL_REQUEST_TEMPLATE.md)
- 🧠 [Code of Conduct](.github/CODE_OF_CONDUCT.md)