# yousuf-developer/viscose-carousel architecture

> Architecture diagram of the GitHub repository yousuf-developer/viscose-carousel, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/yousuf-developer/viscose-carousel
- Repository: https://github.com/yousuf-developer/viscose-carousel

## Overview

Viscose is a single-page portfolio whose main workflow is visitor interaction with a WebGL carousel: project artwork and metadata populate a shader-rendered ring, and opening a card expands it into a scrollable project page. The large Carousel component owns interaction and orchestration; ring modules supply data, image preparation, text, tuning, and rendering. The README documents project-page, footage, and touch behavior, but those implementation details are not all present in the sampled excerpts, so the graph represents them at the Carousel boundary.

Main entry points: [`components/Carousel.jsx`](https://github.com/yousuf-developer/viscose-carousel/blob/main/components/Carousel.jsx) (Carousel runtime), [`components/ring/gui.js`](https://github.com/yousuf-developer/viscose-carousel/blob/main/components/ring/gui.js) (Development panel), [`components/ring/projects.js`](https://github.com/yousuf-developer/viscose-carousel/blob/main/components/ring/projects.js) (Project catalog), [`app/page.js`](https://github.com/yousuf-developer/viscose-carousel/blob/main/app/page.js) (App page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Portfolio experience"]
  node_page["App page<br/>[page.js]"]
  node_carousel["Carousel runtime<br/>[Carousel.jsx]"]
  node_project_open["Project opening<br/>[Carousel.jsx]"]
  node_project_page["Project page<br/>[Carousel.jsx]"]
  node_footage["Project footage<br/>[Carousel.jsx]"]
  node_project_meta["Project metadata<br/>[meta.js]"]
end

subgraph group_content["Project content"]
  node_project_data["Project catalog<br/>[projects.js]"]
  node_image_atlas["Image atlas<br/>[atlas.js]"]
end

subgraph group_rendering["Shader rendering"]
  node_plane_shader["Plane shader<br/>[planeShaders.js]"]
  node_split_text["Intro text<br/>[splitText.js]"]
  node_text_shader["Text shader<br/>[textShaders.js]"]
end

subgraph group_support["Interaction support"]
  node_parameters["Ring parameters<br/>[params.js]"]
  node_bead["Cursor bead<br/>[bead.js]"]
  node_dev_gui["Development panel<br/>[gui.js]"]
  node_ring_utils["Ring utilities<br/>[utils.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_page
node_page -->|"renders"| node_carousel
node_carousel -->|"reads"| node_project_data
node_carousel -->|"loads images"| node_image_atlas
node_image_atlas -->|"reads image list"| node_project_data
node_carousel -->|"opens card"| node_project_open
node_project_open -->|"reveals"| node_project_page
node_carousel -->|"plays clips"| node_footage
node_carousel -->|"updates"| node_project_meta
node_project_meta -->|"reads"| node_project_data
node_carousel -->|"uses"| node_bead
node_carousel -->|"reads"| node_parameters
node_carousel -->|"renders with"| node_plane_shader
node_carousel -->|"builds intro"| node_split_text
node_split_text -->|"uses"| node_text_shader
node_carousel -->|"uses"| node_ring_utils
node_carousel -->|"loads in development"| node_dev_gui
node_dev_gui -->|"tunes"| node_parameters
node_dev_gui -->|"reads limits"| node_plane_shader

click node_page "https://github.com/yousuf-developer/viscose-carousel/blob/main/app/page.js"
click node_carousel "https://github.com/yousuf-developer/viscose-carousel/blob/main/components/Carousel.jsx"
click node_project_open "https://github.com/yousuf-developer/viscose-carousel/blob/main/components/Carousel.jsx"
click node_project_page "https://github.com/yousuf-developer/viscose-carousel/blob/main/components/Carousel.jsx"
click node_footage "https://github.com/yousuf-developer/viscose-carousel/blob/main/components/Carousel.jsx"
click node_project_data "https://github.com/yousuf-developer/viscose-carousel/blob/main/components/ring/projects.js"
click node_parameters "https://github.com/yousuf-developer/viscose-carousel/blob/main/components/ring/params.js"
click node_image_atlas "https://github.com/yousuf-developer/viscose-carousel/blob/main/components/ring/atlas.js"
click node_project_meta "https://github.com/yousuf-developer/viscose-carousel/blob/main/components/ring/meta.js"
click node_bead "https://github.com/yousuf-developer/viscose-carousel/blob/main/components/ring/bead.js"
click node_dev_gui "https://github.com/yousuf-developer/viscose-carousel/blob/main/components/ring/gui.js"
click node_plane_shader "https://github.com/yousuf-developer/viscose-carousel/blob/main/components/shaders/planeShaders.js"
click node_split_text "https://github.com/yousuf-developer/viscose-carousel/blob/main/components/ring/splitText.js"
click node_text_shader "https://github.com/yousuf-developer/viscose-carousel/blob/main/components/shaders/textShaders.js"
click node_ring_utils "https://github.com/yousuf-developer/viscose-carousel/blob/main/components/ring/utils.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_page,node_carousel,node_project_open,node_project_page,node_footage,node_project_meta toneBlue
class node_project_data,node_image_atlas toneAmber
class node_plane_shader,node_split_text,node_text_shader toneMint
class node_parameters,node_bead,node_dev_gui,node_ring_utils toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio experience

- [App page](https://github.com/yousuf-developer/viscose-carousel/blob/main/app/page.js): `app/page.js`
- [Carousel runtime](https://github.com/yousuf-developer/viscose-carousel/blob/main/components/Carousel.jsx): `components/Carousel.jsx`
- [Project opening](https://github.com/yousuf-developer/viscose-carousel/blob/main/components/Carousel.jsx): `components/Carousel.jsx`
- [Project page](https://github.com/yousuf-developer/viscose-carousel/blob/main/components/Carousel.jsx): `components/Carousel.jsx`
- [Project footage](https://github.com/yousuf-developer/viscose-carousel/blob/main/components/Carousel.jsx): `components/Carousel.jsx`
- [Project metadata](https://github.com/yousuf-developer/viscose-carousel/blob/main/components/ring/meta.js): `components/ring/meta.js`

### Project content

- [Project catalog](https://github.com/yousuf-developer/viscose-carousel/blob/main/components/ring/projects.js): `components/ring/projects.js`
- [Image atlas](https://github.com/yousuf-developer/viscose-carousel/blob/main/components/ring/atlas.js): `components/ring/atlas.js`

### Shader rendering

- [Plane shader](https://github.com/yousuf-developer/viscose-carousel/blob/main/components/shaders/planeShaders.js): `components/shaders/planeShaders.js`
- [Intro text](https://github.com/yousuf-developer/viscose-carousel/blob/main/components/ring/splitText.js): `components/ring/splitText.js`
- [Text shader](https://github.com/yousuf-developer/viscose-carousel/blob/main/components/shaders/textShaders.js): `components/shaders/textShaders.js`

### Interaction support

- [Ring parameters](https://github.com/yousuf-developer/viscose-carousel/blob/main/components/ring/params.js): `components/ring/params.js`
- [Cursor bead](https://github.com/yousuf-developer/viscose-carousel/blob/main/components/ring/bead.js): `components/ring/bead.js`
- [Development panel](https://github.com/yousuf-developer/viscose-carousel/blob/main/components/ring/gui.js): `components/ring/gui.js`
- [Ring utilities](https://github.com/yousuf-developer/viscose-carousel/blob/main/components/ring/utils.js): `components/ring/utils.js`

### Other components

- **Visitor**

## Connections

- Visitor → App page: opens (evidence: `README.md`)
- App page → Carousel runtime: renders (evidence: `app/page.js`)
- Carousel runtime → Project catalog: reads (evidence: `components/Carousel.jsx`)
- Carousel runtime → Image atlas: loads images (evidence: `components/Carousel.jsx`)
- Image atlas → Project catalog: reads image list (evidence: `components/ring/atlas.js`)
- Carousel runtime → Project opening: opens card (evidence: `README.md`)
- Project opening → Project page: reveals (evidence: `README.md`)
- Carousel runtime → Project footage: plays clips (evidence: `README.md`)
- Carousel runtime → Project metadata: updates (evidence: `components/Carousel.jsx`)
- Project metadata → Project catalog: reads (evidence: `components/ring/meta.js`)
- Carousel runtime → Cursor bead: uses (evidence: `components/Carousel.jsx`)
- Carousel runtime → Ring parameters: reads (evidence: `components/Carousel.jsx`)
- Carousel runtime → Plane shader: renders with (evidence: `components/Carousel.jsx`)
- Carousel runtime → Intro text: builds intro (evidence: `components/Carousel.jsx`)
- Intro text → Text shader: uses (evidence: `components/ring/splitText.js`)
- Carousel runtime → Ring utilities: uses (evidence: `components/Carousel.jsx`)
- Carousel runtime → Development panel: loads in development (evidence: `components/Carousel.jsx`)
- Development panel → Ring parameters: tunes (evidence: `components/ring/gui.js`)
- Development panel → Plane shader: reads limits (evidence: `components/ring/gui.js`)