# yildizdikme/3d-threejs-spiral-gallery architecture

> Architecture diagram of the GitHub repository yildizdikme/3d-threejs-spiral-gallery, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/yildizdikme/3d-threejs-spiral-gallery
- Repository: https://github.com/yildizdikme/3d-threejs-spiral-gallery

## Overview

This is a browser-based 3D spiral image-gallery hero, not a data-processing service. The main workflow combines scroll and pointer input with a WebGL spiral, while separate scroll-triggered reveals animate text below the hero. The graph separates those interaction stages from rendering internals; multiple components share src/script.js because the implementation is concentrated there. Relationship evidence is limited to the excerpts and README, so unsampled initialization details are not expanded.

Main entry points: [`src/script.js`](https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js) (Smooth Scroll), [`src/shaders.js`](https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/shaders.js) (Tile Shaders)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interaction["Scroll and Interaction"]
  node_smooth_scroll["Smooth Scroll<br/>[script.js]"]
  node_scroll_state["Scroll State<br/>[script.js]"]
  node_pointer_parallax["Pointer Parallax<br/>[script.js]"]
end

subgraph group_gallery["3D Gallery"]
  node_texture_loading["Image Textures<br/>[script.js]"]
  node_curved_geometry["Curved Tiles<br/>[script.js]"]
  node_spiral_assembly["Spiral Assembly<br/>[script.js]"]
  node_tile_shaders["Tile Shaders<br/>[shaders.js]"]
  node_webgl_rendering["WebGL Rendering<br/>[script.js]"]
  node_gallery_motion["Gallery Motion<br/>[script.js]"]
end

subgraph group_presentation["Page Presentation"]
  node_reveal_animations["Scroll Reveals<br/>[script.js]"]
  node_responsive_layout["Responsive Layout<br/>[script.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"scrolls"| node_smooth_scroll
node_visitor -->|"moves pointer"| node_pointer_parallax
node_smooth_scroll -->|"updates state"| node_scroll_state
node_smooth_scroll -->|"updates triggers"| node_reveal_animations
node_scroll_state -->|"drives spin"| node_gallery_motion
node_pointer_parallax -->|"tilts spiral"| node_gallery_motion
node_texture_loading -.->|"supplies images"| node_spiral_assembly
node_curved_geometry -->|"builds tiles"| node_spiral_assembly
node_spiral_assembly -->|"uses shader code"| node_tile_shaders
node_gallery_motion -->|"renders frame"| node_webgl_rendering
node_responsive_layout -.->|"resizes canvas"| node_webgl_rendering

click node_smooth_scroll "https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js"
click node_scroll_state "https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js"
click node_pointer_parallax "https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js"
click node_reveal_animations "https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js"
click node_texture_loading "https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js"
click node_curved_geometry "https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js"
click node_spiral_assembly "https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js"
click node_tile_shaders "https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/shaders.js"
click node_webgl_rendering "https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js"
click node_gallery_motion "https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js"
click node_responsive_layout "https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.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_smooth_scroll,node_scroll_state,node_pointer_parallax toneBlue
class node_texture_loading,node_curved_geometry,node_spiral_assembly,node_tile_shaders,node_webgl_rendering,node_gallery_motion toneAmber
class node_reveal_animations,node_responsive_layout toneMint
class node_visitor toneIndigo
```

## Components

### Scroll and Interaction

- [Smooth Scroll](https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js): `src/script.js`
- [Scroll State](https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js): `src/script.js`
- [Pointer Parallax](https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js): `src/script.js`

### 3D Gallery

- [Image Textures](https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js): `src/script.js`
- [Curved Tiles](https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js): `src/script.js`
- [Spiral Assembly](https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js): `src/script.js`
- [Tile Shaders](https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/shaders.js): `src/shaders.js`
- [WebGL Rendering](https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js): `src/script.js`
- [Gallery Motion](https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js): `src/script.js`

### Page Presentation

- [Scroll Reveals](https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js): `src/script.js`
- [Responsive Layout](https://github.com/yildizdikme/3d-threejs-spiral-gallery/blob/main/src/script.js): `src/script.js`

### Other components

- **Visitor**

## Connections

- Visitor → Smooth Scroll: scrolls (evidence: `README.md`)
- Visitor → Pointer Parallax: moves pointer (evidence: `README.md`)
- Smooth Scroll → Scroll State: updates state (evidence: `src/script.js`)
- Smooth Scroll → Scroll Reveals: updates triggers (evidence: `src/script.js`)
- Scroll State → Gallery Motion: drives spin (evidence: `README.md`)
- Pointer Parallax → Gallery Motion: tilts spiral (evidence: `src/script.js`)
- Image Textures → Spiral Assembly: supplies images (evidence: `src/script.js`)
- Curved Tiles → Spiral Assembly: builds tiles (evidence: `src/script.js`)
- Spiral Assembly → Tile Shaders: uses shader code (evidence: `src/script.js`)
- Gallery Motion → WebGL Rendering: renders frame (evidence: `src/script.js`)
- Responsive Layout → WebGL Rendering: resizes canvas (evidence: `src/script.js`)