Solar System

Interactive 3D solar system visualization built with React and TypeScript.

Live Demo: https://solar-system-one-pied.vercel.app/

Tech Stack

• React 18
• TypeScript 5.3
• Chakra UI 2.0
• Framer Motion 10.0
• Zustand 4.0
• Vite 5.0

Installation

git clone <repository-url>
cd SolarSystem
npm install
npm run dev

Build

npm run build
npm run preview

Features

• Real-time orbital mechanics simulation
• Interactive planet information panels
• Adjustable animation speed (1x-3x)
• Zoom controls
• Moon systems for applicable planets
• Asteroid belt visualization
• Responsive design

Project Structure

src/
├── components/
│   └── features/
│       ├── planet-info/     # Planet information panels
│       └── solar-system/    # Main visualization components
├── store/
│   └── planetStore.ts       # State management
└── theme.ts                  # UI theming

Configuration

Modify planet properties in planetStore.ts:

• Orbital parameters
• Physical characteristics
• Visual styling
• Scientific data

Controls

• Zoom: +/- buttons
• Speed: 1x/2x/3x toggle
• Play/Pause: Animation control
• Planet selection: Click celestial bodies

Contributing

1. Fork the repository
2. Create feature branch
3. Commit changes
4. Submit pull request