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

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 on CodePen.

How to Use

1. Clone the repository:

   git clone https://github.com/your-username/solarsystem.git
   

2. Install the dependencies:

   npm install
   

3. Start the project:

   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:

: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

Give it a

If you liked this project, don't forget to give it a star to this repo.

Social Links

• Github
• CodePen
• Twitter/X
• AllSocialMedia