# houmahani/codrops-depth-gallery architecture

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

- Interactive diagram: https://gitdiagram.com/houmahani/codrops-depth-gallery
- Repository: https://github.com/houmahani/codrops-depth-gallery

## Overview

Atmospheric Depth Gallery is a browser-based Three.js experience: visitors scroll through image planes, while depth and scroll velocity drive palette transitions and motion. The runtime entry point initializes the engine, which preloads gallery textures and coordinates scrolling and the experience. The experience composes the gallery, color labels, shader background, and animated trail. The README documents the depth-scrolling, per-image palette concept; sampled source shows the main orchestration and several component calls. Some engine and effect update details are excerpted only partially, so uncertain connections are omitted.

Main entry points: [`src/Experience/index.js`](https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/index.js) (Experience), [`src/Experience/Engine.js`](https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Engine.js) (Engine), [`src/Experience/Gallery.js`](https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Gallery.js) (Gallery Planes), [`src/Experience/Background/index.js`](https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Background/index.js) (Shader Background)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime Coordination"]
  node_entry["App Entry<br/>[main.js]"]
  node_engine["Engine<br/>[Engine.js]"]
  node_experience["Experience<br/>[index.js]"]
  node_debug["Debug Controls<br/>[Debug.js]"]
end

subgraph group_gallery["Depth Gallery"]
  node_scroll["Scroll Input<br/>[Scroll.js]"]
  node_gallery_core["Gallery Planes<br/>[Gallery.js]"]
  node_gallery_data["Gallery Palette Data<br/>[galleryData.js]"]
end

subgraph group_effects["Atmospheric Effects"]
  node_background["Shader Background<br/>[index.js]"]
  node_vertex["Vertex Shader<br/>[vertex.glsl]"]
  node_fragment["Fragment Shader<br/>[fragment.glsl]"]
  node_trail_controller["Trail Controller<br/>[TrailController.js]"]
  node_trail["Trail Geometry<br/>[Trail.js]"]
  node_particles["Trail Particles"]
end

subgraph group_interface["Color Interface"]
  node_label["Color Labels<br/>[Label.js]"]
end

node_visitor(("Visitor"))

node_visitor -.->|"opens gallery"| node_entry
node_entry -->|"creates"| node_engine
node_engine -->|"initializes"| node_experience
node_engine -->|"preloads textures"| node_gallery_core
node_engine -->|"creates"| node_scroll
node_experience -->|"initializes and updates"| node_gallery_core
node_experience -->|"initializes and updates"| node_label
node_experience -->|"initializes and updates"| node_background
node_experience -->|"initializes and updates"| node_trail_controller
node_experience -->|"creates"| node_debug
node_gallery_core -->|"loads plane data"| node_gallery_data
node_label -->|"reads plane colors"| node_gallery_core
node_background -->|"uses shader"| node_vertex
node_background -->|"uses shader"| node_fragment
node_trail_controller -->|"adds trail points"| node_trail
node_trail_controller -->|"updates particles"| node_particles

click node_entry "https://github.com/houmahani/codrops-depth-gallery/blob/main/src/main.js"
click node_engine "https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Engine.js"
click node_experience "https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/index.js"
click node_debug "https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Debug.js"
click node_scroll "https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Scroll.js"
click node_gallery_core "https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Gallery.js"
click node_gallery_data "https://github.com/houmahani/codrops-depth-gallery/blob/main/src/data/galleryData.js"
click node_label "https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Label.js"
click node_background "https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Background/index.js"
click node_vertex "https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Background/shaders/vertex.glsl"
click node_fragment "https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Background/shaders/fragment.glsl"
click node_trail_controller "https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/TrailController.js"
click node_trail "https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Trail.js"
click node_particles "https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/TrailHeadParticles.js"

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_entry,node_engine,node_experience,node_debug toneBlue
class node_scroll,node_gallery_core,node_gallery_data toneAmber
class node_background,node_vertex,node_fragment,node_trail_controller,node_trail,node_particles toneMint
class node_label toneRose
class node_visitor toneIndigo
```

## Components

### Runtime Coordination

- [App Entry](https://github.com/houmahani/codrops-depth-gallery/blob/main/src/main.js): `src/main.js`
- [Engine](https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Engine.js): `src/Experience/Engine.js`
- [Experience](https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/index.js): `src/Experience/index.js`
- [Debug Controls](https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Debug.js): `src/Experience/Debug.js`

### Depth Gallery

- [Scroll Input](https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Scroll.js): `src/Experience/Scroll.js`
- [Gallery Planes](https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Gallery.js): `src/Experience/Gallery.js`
- [Gallery Palette Data](https://github.com/houmahani/codrops-depth-gallery/blob/main/src/data/galleryData.js): `src/data/galleryData.js`

### Atmospheric Effects

- [Shader Background](https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Background/index.js): `src/Experience/Background/index.js`
- [Vertex Shader](https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Background/shaders/vertex.glsl): `src/Experience/Background/shaders/vertex.glsl`
- [Fragment Shader](https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Background/shaders/fragment.glsl): `src/Experience/Background/shaders/fragment.glsl`
- [Trail Controller](https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/TrailController.js): `src/Experience/TrailController.js`
- [Trail Geometry](https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Trail.js): `src/Experience/Trail.js`
- [Trail Particles](https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/TrailHeadParticles.js): `src/Experience/TrailHeadParticles.js`

### Color Interface

- [Color Labels](https://github.com/houmahani/codrops-depth-gallery/blob/main/src/Experience/Label.js): `src/Experience/Label.js`

### Other components

- **Visitor**

## Connections

- Visitor → App Entry: opens gallery
- App Entry → Engine: creates (evidence: `src/main.js`)
- Engine → Experience: initializes (evidence: `src/Experience/Engine.js`)
- Engine → Gallery Planes: preloads textures (evidence: `src/Experience/Engine.js`)
- Engine → Scroll Input: creates (evidence: `src/Experience/Engine.js`)
- Experience → Gallery Planes: initializes and updates (evidence: `src/Experience/index.js`)
- Experience → Color Labels: initializes and updates (evidence: `src/Experience/index.js`)
- Experience → Shader Background: initializes and updates (evidence: `src/Experience/index.js`)
- Experience → Trail Controller: initializes and updates (evidence: `src/Experience/index.js`)
- Experience → Debug Controls: creates (evidence: `src/Experience/index.js`)
- Gallery Planes → Gallery Palette Data: loads plane data (evidence: `src/Experience/Gallery.js`)
- Color Labels → Gallery Planes: reads plane colors (evidence: `src/Experience/Label.js`)
- Shader Background → Vertex Shader: uses shader (evidence: `src/Experience/Background/index.js`)
- Shader Background → Fragment Shader: uses shader (evidence: `src/Experience/Background/index.js`)
- Trail Controller → Trail Geometry: adds trail points (evidence: `src/Experience/TrailController.js`)
- Trail Controller → Trail Particles: updates particles (evidence: `src/Experience/TrailController.js`)