How skimatt/solarsystem works
Solar System is a bilingual interactive 3D astronomy exhibition. Visitors enter through the homepage, pass the cinematic welcome, then explore the live Sun-and-planets simulation by selecting a body; shared state drives focus and inspection panels, while dedicated planet routes offer standalone 3D views and scientific profiles. The map also preserves the documented camera, localization, and ambient-audio capabilities. Source excerpts are partial, so some subsystem connections follow the README and project structure rather than sampled call sites.
Main entry points: ExperienceContainer.tsx Experience container · useSolarSystem.tsx Exploration state · SolarSystem.tsx Solar system scene · PlanetDetailView.tsx Standalone detail view
Components 24
Visitor experience
- Homepage
src/app/page.tsx - Welcome screen
src/components/sections/WelcomeScreen.tsx - Experience container
src/components/sections/ExperienceContainer.tsx - Exhibition hero
src/components/sections/Hero.tsx - Navigation
src/components/ui/Navigation.tsx - Experience controls
src/components/ui/Controls.tsx - Progress indicator
src/components/ui/ProgressIndicator.tsx
3D simulation
- Scene canvas
src/components/canvas/SolarSystemCanvas.tsx - Solar system scene
src/components/canvas/SolarSystem.tsx - Celestial bodies
src/components/canvas/Planet.tsx - Sun rendering
src/components/canvas/Sun.tsx - Orbital camera
src/components/camera/CameraController.tsx - Scene effects
src/components/effects/PostProcessing.tsx
Planet exploration
- Dedicated planet route
src/app/planets/[slug]/page.tsx - Planet explorer
src/components/canvas/SinglePlanetCanvas.tsx - Scientific detail panel
src/components/ui/PlanetDetailPanel.tsx - Standalone detail view
src/components/sections/PlanetDetailView.tsx - Planet navigation
src/components/ui/PlanetNavigation.tsx
Shared experience services
- Exploration state
src/hooks/useSolarSystem.tsx - Planet data
src/data/planets.ts - Bilingual text
src/lib/translations.ts - Ambient audio
src/hooks/useAudioAmbient.ts - Procedural textures
src/lib/textures/proceduralTextures.ts
Other components
- Visitor
Connections 31
- Visitor → Homepage: opens
- Homepage → Welcome screen: presents
- Homepage → Experience container: enters
- Experience container → Exhibition hero: shows
- Experience container → Scene canvas: hosts
- Experience container → Navigation: shows
- Experience container → Experience controls: shows
- Experience container → Progress indicator: shows
- Scene canvas → Solar system scene: renders
- Solar system scene → Celestial bodies: composes
- Solar system scene → Sun rendering: renders
- Solar system scene → Orbital camera: uses
- Solar system scene → Scene effects: applies
- Solar system scene → Exploration state: reads state
- Celestial bodies → Planet data: reads body data
- Celestial bodies → Procedural textures: loads textures
- Navigation → Exploration state: selects body
- Experience controls → Exploration state: updates settings
- Orbital camera → Exploration state: reads focus
- Exploration state → Planet data: localizes body
- Exploration state → Bilingual text: reads strings
- Experience container → Scientific detail panel: shows inspection
- Scientific detail panel → Exploration state: reads selection
- Scientific detail panel → Planet data: reads profiles
- Dedicated planet route → Standalone detail view: renders route
- Standalone detail view → Planet explorer: embeds explorer
- Standalone detail view → Planet data: shows profile
- Planet explorer → Procedural textures: loads textures
- Standalone detail view → Planet navigation: provides navigation
- Experience container → Ambient audio: controls sound
- Experience controls → Ambient audio: toggles playback