How yousuf-developer/viscose-carousel works
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: Carousel.jsx Carousel runtime · gui.js Development panel · projects.js Project catalog · page.js App page
Components 16
Portfolio experience
- App page
app/page.js - Carousel runtime
components/Carousel.jsx - Project opening
components/Carousel.jsx - Project page
components/Carousel.jsx - Project footage
components/Carousel.jsx - Project metadata
components/ring/meta.js
Project content
- Project catalog
components/ring/projects.js - Image atlas
components/ring/atlas.js
Shader rendering
- Plane shader
components/shaders/planeShaders.js - Intro text
components/ring/splitText.js - Text shader
components/shaders/textShaders.js
Interaction support
- Ring parameters
components/ring/params.js - Cursor bead
components/ring/bead.js - Development panel
components/ring/gui.js - Ring utilities
components/ring/utils.js
Other components
- Visitor
Connections 19
- Visitor → App page: opens
README.md - App page → Carousel runtime: renders
app/page.js - Carousel runtime → Project catalog: reads
components/Carousel.jsx - Carousel runtime → Image atlas: loads images
components/Carousel.jsx - Image atlas → Project catalog: reads image list
components/ring/atlas.js - Carousel runtime → Project opening: opens card
README.md - Project opening → Project page: reveals
README.md - Carousel runtime → Project footage: plays clips
README.md - Carousel runtime → Project metadata: updates
components/Carousel.jsx - Project metadata → Project catalog: reads
components/ring/meta.js - Carousel runtime → Cursor bead: uses
components/Carousel.jsx - Carousel runtime → Ring parameters: reads
components/Carousel.jsx - Carousel runtime → Plane shader: renders with
components/Carousel.jsx - Carousel runtime → Intro text: builds intro
components/Carousel.jsx - Intro text → Text shader: uses
components/ring/splitText.js - Carousel runtime → Ring utilities: uses
components/Carousel.jsx - Carousel runtime → Development panel: loads in development
components/Carousel.jsx - Development panel → Ring parameters: tunes
components/ring/gui.js - Development panel → Plane shader: reads limits
components/ring/gui.js