A real-time 3D orbital visualization platform for tracking satellites, space debris, and rocket launches on an interactive globe. Built with React, CesiumJS, and TypeScript.
- 10,000+ active satellites propagated in real-time using SGP4 via satellite.js
- TLE data sourced from CelesTrak with multi-layer caching and fallback
- Filter by constellation: Starlink, OneWeb, GPS, GLONASS, Galileo, ISS, and more
- Click any satellite for live orbital parameters (altitude, velocity, lat/lon, inclination)
- Four tracked debris fields: Cosmos-1408, Fengyun-1C, Iridium-33, Cosmos-2251
- Parallelized fetch with dedicated Web Worker for off-thread SGP4 propagation
- Separate visual layer with per-field color coding
- Upcoming launches from The Space Devs API with countdown timers
- 3D launch pad markers with mission details and provider info
- Cached locally to avoid rate limits (1-hour TTL)
- Select any location on the globe to see which satellites can observe it right now
- Real-time pass detection with "danger level" classification (green → yellow → red)
- Auto-initializes to your location via IP geolocation
- 3D magnetic field line visualization rendered as Cesium polylines
- Live solar wind data (speed, density, Bz) from NOAA DSCOVR/ACE at L1
- Real-time aurora probability overlay from the NOAA OVATION model
- Kp geomagnetic storm index with visual alerts
- First-visit orchestrated camera animation: zoom out → enable layers sequentially → fly to user location
- Subsequent visits skip directly to the interactive dashboard
| Layer | Technology |
|---|---|
| Framework | React 19 |
| Language | TypeScript 5.9 |
| 3D Engine | CesiumJS 1.139 |
| Orbital Math | satellite.js (SGP4/SDP4) |
| Build Tool | Vite 8 |
| Icons | Lucide React |
| Propagation | Web Worker (off-main-thread) |
src/
├── main.tsx # Entry point
├── App.tsx # Root layout
├── types.ts # Shared TypeScript types
├── index.css # Global styles (utility classes)
├── components/
│ ├── CesiumGlobe.tsx # Main orchestrator — layers, cinematic, UI
│ └── panels/
│ ├── CommandSidebar.tsx # Primary control panel (filters, toggles, stats)
│ ├── SearchBar.tsx # Satellite search with fuzzy filtering
│ ├── SatellitePanel.tsx # Selected satellite detail overlay
│ ├── EyesAbovePanel.tsx # Surveillance awareness panel
│ ├── LaunchPanel.tsx # Launch detail overlay
│ └── TimeBar.tsx # Playback speed controls
├── hooks/
│ ├── useCesiumViewer.ts # Viewer initialization & config
│ ├── useSatelliteLayer.ts # Active satellite data & rendering
│ ├── useDebrisLayer.ts # Debris data & rendering
│ ├── useLaunchLayer.ts # Launch markers & data
│ ├── useMagnetosphere.ts # Field lines, aurora, solar wind
│ ├── useSpySystem.ts # Eyes Above pass detection
│ ├── useObjectSelection.ts # Click-to-select interaction
│ ├── useCameraTracking.ts # Satellite camera follow mode
│ └── useTimeControls.ts # Clock speed management
├── services/
│ ├── satelliteService.ts # CelesTrak TLE fetch, parse, cache
│ └── launchService.ts # Space Devs API fetch & cache
└── workers/
└── propagation.worker.ts # Off-thread SGP4 propagation
| Source | Data | Auth |
|---|---|---|
| CelesTrak | Satellite & debris TLEs | None |
| The Space Devs | Launch schedule | None (dev API) |
| NOAA SWPC | Solar wind, Kp index, aurora | None |
| ipapi.co | IP geolocation | None |
| Nominatim | Geocoding (search) | None |
- Node.js 18+
- npm 9+
# Install dependencies
npm install
# Start development server
npm run dev
# Open in browser
# http://localhost:5173npm run build
npm run previewnpm run lint- Production bundle: ~277 KB JS (89 KB gzip) + 11.5 KB CSS
- Web Worker: SGP4 propagation runs off the main thread
- Caching: TLE data (24h), debris (24h), launches (1h) in
localStorage - Parallelized fetches: Debris groups fetched concurrently via
Promise.allSettled - Optimized rendering: Cesium
PointPrimitiveCollectionfor thousands of satellites at 30 fps
MIT
Enjoy!