https://github.com/starknightt/solar-system
This project is a visually stunning representation of the solar system, built using React.js. It features accurate time-scaled orbits of planets, a dynamic starfield background, and smooth CSS animations. Explore how planets orbit the sun and customize the speed of revolutions to your liking. Inspired by the beauty of space and a love for creative.
https://github.com/starknightt/solar-system
css-animations css3 github planets reactjs solar-system website
Last synced: 29 days ago
JSON representation
This project is a visually stunning representation of the solar system, built using React.js. It features accurate time-scaled orbits of planets, a dynamic starfield background, and smooth CSS animations. Explore how planets orbit the sun and customize the speed of revolutions to your liking. Inspired by the beauty of space and a love for creative.
- Host: GitHub
- URL: https://github.com/starknightt/solar-system
- Owner: StarKnightt
- Created: 2024-09-09T05:51:30.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-02T15:24:41.000Z (12 months ago)
- Last Synced: 2025-09-19T15:24:23.962Z (about 1 month ago)
- Topics: css-animations, css3, github, planets, reactjs, solar-system, website
- Language: CSS
- Homepage: https://solarrsystem.vercel.app/
- Size: 4.16 MB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Solar System
A simple yet captivating Solar System animation built with React.js. This project represents a true time-scaled version of the solar system, where every object revolves relative to an Earth year.
🌍 **Live Demo:** [Solar System](https://solarrsystem.vercel.app/)
## Features
- **Time-scaled animation**: Each planet's revolution is scaled to real Earth years (1 year = 30 seconds).
- **Dynamic starfield**: A randomized starfield using Font Awesome icons for a beautiful cosmic background.
- **CSS animations**: Smooth and fluid planet orbits and star twinkles using keyframe animations.
- **Inspiration**: A creative twist inspired by [Malik Dellidj](https://codepen.io/kowlor/) on CodePen.
## How to Use
1. Clone the repository:
```bash
git clone https://github.com/your-username/solarsystem.git
```
2. Install the dependencies:
```bash
npm install
```
3. Start the project:
```bash
npm start
```
4. The project will run locally at `http://localhost:3000`.
## Customization
You can adjust the speed of planet revolutions by changing the `--year-in-second` variable in the `SolarSystem.css` file:
```css
:root {
--year-in-second: 30s; /* 1 Earth year = 30 sec */
}
```
Feel free to play around with this value to speed up or slow down the revolutions.
# Screenshot
![solar-system]()
## Give it a ⭐
If you liked this project, don't forget to give it a star to this repo.
## Social Links
- [Github](https://github.com/StarKnightt)
- [CodePen](https://codepen.io/StarKnightt)
- [Twitter/X](https://x.com/Star_Knight12)
- [AllSocialMedia](https://bento.me/prasenjitnayak)