# skimatt/solarsystem architecture

> Architecture diagram of the GitHub repository skimatt/solarsystem, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/skimatt/solarsystem
- Repository: https://github.com/skimatt/solarsystem

## Overview

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: [`src/components/sections/ExperienceContainer.tsx`](https://github.com/skimatt/solarsystem/blob/main/src/components/sections/ExperienceContainer.tsx) (Experience container), [`src/hooks/useSolarSystem.tsx`](https://github.com/skimatt/solarsystem/blob/main/src/hooks/useSolarSystem.tsx) (Exploration state), [`src/components/canvas/SolarSystem.tsx`](https://github.com/skimatt/solarsystem/blob/main/src/components/canvas/SolarSystem.tsx) (Solar system scene), [`src/components/sections/PlanetDetailView.tsx`](https://github.com/skimatt/solarsystem/blob/main/src/components/sections/PlanetDetailView.tsx) (Standalone detail view)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Visitor experience"]
  node_home["Homepage<br/>[page.tsx]"]
  node_welcome["Welcome screen<br/>[WelcomeScreen.tsx]"]
  node_experience_container["Experience container"]
  node_hero["Exhibition hero<br/>[Hero.tsx]"]
  node_navigation["Navigation<br/>[Navigation.tsx]"]
  node_controls["Experience controls<br/>[Controls.tsx]"]
  node_progress["Progress indicator"]
end

subgraph group_simulation["3D simulation"]
  node_canvas["Scene canvas"]
  node_system["Solar system scene<br/>[SolarSystem.tsx]"]
  node_celestial["Celestial bodies<br/>[Planet.tsx]"]
  node_sun["Sun rendering<br/>[Sun.tsx]"]
  node_camera["Orbital camera"]
  node_effects["Scene effects<br/>[PostProcessing.tsx]"]
end

subgraph group_exploration["Planet exploration"]
  node_detail_view["Dedicated planet route<br/>[page.tsx]"]
  node_single_canvas["Planet explorer"]
  node_detail_panel["Scientific detail panel"]
  node_detail_section["Standalone detail view"]
  node_planet_nav["Planet navigation"]
end

subgraph group_services["Shared experience services"]
  node_state["Exploration state<br/>[useSolarSystem.tsx]"]
  node_catalog["Planet data<br/>[planets.ts]"]
  node_translations["Bilingual text<br/>[translations.ts]"]
  node_audio["Ambient audio<br/>[useAudioAmbient.ts]"]
  node_textures["Procedural textures"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_home -->|"presents"| node_welcome
node_home -->|"enters"| node_experience_container
node_experience_container -->|"shows"| node_hero
node_experience_container -->|"hosts"| node_canvas
node_experience_container -->|"shows"| node_navigation
node_experience_container -->|"shows"| node_controls
node_experience_container -->|"shows"| node_progress
node_canvas -->|"renders"| node_system
node_system -->|"composes"| node_celestial
node_system -->|"renders"| node_sun
node_system -->|"uses"| node_camera
node_system -->|"applies"| node_effects
node_system -->|"reads state"| node_state
node_celestial -->|"reads body data"| node_catalog
node_celestial -->|"loads textures"| node_textures
node_navigation -->|"selects body"| node_state
node_controls -->|"updates settings"| node_state
node_camera -->|"reads focus"| node_state
node_state -->|"localizes body"| node_catalog
node_state -->|"reads strings"| node_translations
node_experience_container -->|"shows inspection"| node_detail_panel
node_detail_panel -->|"reads selection"| node_state
node_detail_panel -->|"reads profiles"| node_catalog
node_detail_view -->|"renders route"| node_detail_section
node_detail_section -->|"embeds explorer"| node_single_canvas
node_detail_section -->|"shows profile"| node_catalog
node_single_canvas -->|"loads textures"| node_textures
node_detail_section -->|"provides navigation"| node_planet_nav
node_experience_container -->|"controls sound"| node_audio
node_controls -->|"toggles playback"| node_audio

click node_home "https://github.com/skimatt/solarsystem/blob/main/src/app/page.tsx"
click node_welcome "https://github.com/skimatt/solarsystem/blob/main/src/components/sections/WelcomeScreen.tsx"
click node_experience_container "https://github.com/skimatt/solarsystem/blob/main/src/components/sections/ExperienceContainer.tsx"
click node_hero "https://github.com/skimatt/solarsystem/blob/main/src/components/sections/Hero.tsx"
click node_navigation "https://github.com/skimatt/solarsystem/blob/main/src/components/ui/Navigation.tsx"
click node_controls "https://github.com/skimatt/solarsystem/blob/main/src/components/ui/Controls.tsx"
click node_progress "https://github.com/skimatt/solarsystem/blob/main/src/components/ui/ProgressIndicator.tsx"
click node_canvas "https://github.com/skimatt/solarsystem/blob/main/src/components/canvas/SolarSystemCanvas.tsx"
click node_system "https://github.com/skimatt/solarsystem/blob/main/src/components/canvas/SolarSystem.tsx"
click node_celestial "https://github.com/skimatt/solarsystem/blob/main/src/components/canvas/Planet.tsx"
click node_sun "https://github.com/skimatt/solarsystem/blob/main/src/components/canvas/Sun.tsx"
click node_camera "https://github.com/skimatt/solarsystem/blob/main/src/components/camera/CameraController.tsx"
click node_effects "https://github.com/skimatt/solarsystem/blob/main/src/components/effects/PostProcessing.tsx"
click node_state "https://github.com/skimatt/solarsystem/blob/main/src/hooks/useSolarSystem.tsx"
click node_catalog "https://github.com/skimatt/solarsystem/blob/main/src/data/planets.ts"
click node_translations "https://github.com/skimatt/solarsystem/blob/main/src/lib/translations.ts"
click node_audio "https://github.com/skimatt/solarsystem/blob/main/src/hooks/useAudioAmbient.ts"
click node_detail_view "https://github.com/skimatt/solarsystem/blob/main/src/app/planets/%5Bslug%5D/page.tsx"
click node_single_canvas "https://github.com/skimatt/solarsystem/blob/main/src/components/canvas/SinglePlanetCanvas.tsx"
click node_detail_panel "https://github.com/skimatt/solarsystem/blob/main/src/components/ui/PlanetDetailPanel.tsx"
click node_detail_section "https://github.com/skimatt/solarsystem/blob/main/src/components/sections/PlanetDetailView.tsx"
click node_planet_nav "https://github.com/skimatt/solarsystem/blob/main/src/components/ui/PlanetNavigation.tsx"
click node_textures "https://github.com/skimatt/solarsystem/blob/main/src/lib/textures/proceduralTextures.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_welcome,node_experience_container,node_hero,node_navigation,node_controls,node_progress toneBlue
class node_canvas,node_system,node_celestial,node_sun,node_camera,node_effects toneAmber
class node_detail_view,node_single_canvas,node_detail_panel,node_detail_section,node_planet_nav toneMint
class node_state,node_catalog,node_translations,node_audio,node_textures toneRose
class node_visitor toneIndigo
```

## Components

### Visitor experience

- [Homepage](https://github.com/skimatt/solarsystem/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Welcome screen](https://github.com/skimatt/solarsystem/blob/main/src/components/sections/WelcomeScreen.tsx): `src/components/sections/WelcomeScreen.tsx`
- [Experience container](https://github.com/skimatt/solarsystem/blob/main/src/components/sections/ExperienceContainer.tsx): `src/components/sections/ExperienceContainer.tsx`
- [Exhibition hero](https://github.com/skimatt/solarsystem/blob/main/src/components/sections/Hero.tsx): `src/components/sections/Hero.tsx`
- [Navigation](https://github.com/skimatt/solarsystem/blob/main/src/components/ui/Navigation.tsx): `src/components/ui/Navigation.tsx`
- [Experience controls](https://github.com/skimatt/solarsystem/blob/main/src/components/ui/Controls.tsx): `src/components/ui/Controls.tsx`
- [Progress indicator](https://github.com/skimatt/solarsystem/blob/main/src/components/ui/ProgressIndicator.tsx): `src/components/ui/ProgressIndicator.tsx`

### 3D simulation

- [Scene canvas](https://github.com/skimatt/solarsystem/blob/main/src/components/canvas/SolarSystemCanvas.tsx): `src/components/canvas/SolarSystemCanvas.tsx`
- [Solar system scene](https://github.com/skimatt/solarsystem/blob/main/src/components/canvas/SolarSystem.tsx): `src/components/canvas/SolarSystem.tsx`
- [Celestial bodies](https://github.com/skimatt/solarsystem/blob/main/src/components/canvas/Planet.tsx): `src/components/canvas/Planet.tsx`
- [Sun rendering](https://github.com/skimatt/solarsystem/blob/main/src/components/canvas/Sun.tsx): `src/components/canvas/Sun.tsx`
- [Orbital camera](https://github.com/skimatt/solarsystem/blob/main/src/components/camera/CameraController.tsx): `src/components/camera/CameraController.tsx`
- [Scene effects](https://github.com/skimatt/solarsystem/blob/main/src/components/effects/PostProcessing.tsx): `src/components/effects/PostProcessing.tsx`

### Planet exploration

- [Dedicated planet route](https://github.com/skimatt/solarsystem/blob/main/src/app/planets/%5Bslug%5D/page.tsx): `src/app/planets/[slug]/page.tsx`
- [Planet explorer](https://github.com/skimatt/solarsystem/blob/main/src/components/canvas/SinglePlanetCanvas.tsx): `src/components/canvas/SinglePlanetCanvas.tsx`
- [Scientific detail panel](https://github.com/skimatt/solarsystem/blob/main/src/components/ui/PlanetDetailPanel.tsx): `src/components/ui/PlanetDetailPanel.tsx`
- [Standalone detail view](https://github.com/skimatt/solarsystem/blob/main/src/components/sections/PlanetDetailView.tsx): `src/components/sections/PlanetDetailView.tsx`
- [Planet navigation](https://github.com/skimatt/solarsystem/blob/main/src/components/ui/PlanetNavigation.tsx): `src/components/ui/PlanetNavigation.tsx`

### Shared experience services

- [Exploration state](https://github.com/skimatt/solarsystem/blob/main/src/hooks/useSolarSystem.tsx): `src/hooks/useSolarSystem.tsx`
- [Planet data](https://github.com/skimatt/solarsystem/blob/main/src/data/planets.ts): `src/data/planets.ts`
- [Bilingual text](https://github.com/skimatt/solarsystem/blob/main/src/lib/translations.ts): `src/lib/translations.ts`
- [Ambient audio](https://github.com/skimatt/solarsystem/blob/main/src/hooks/useAudioAmbient.ts): `src/hooks/useAudioAmbient.ts`
- [Procedural textures](https://github.com/skimatt/solarsystem/blob/main/src/lib/textures/proceduralTextures.ts): `src/lib/textures/proceduralTextures.ts`

### Other components

- **Visitor**

## Connections

- 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