Skip to content

FL45h-09/online-space

Repository files navigation

🪐 SPACE ONLINE 🌠

Typing SVG


🌌 Overview

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)


🧪 Tech Stack

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

⚙️ Setup & Scripts

# 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)

About

Resources

Code of conduct

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published