# ruucm/shadergradient architecture

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

- Interactive diagram: https://gitdiagram.com/ruucm/shadergradient
- Repository: https://github.com/ruucm/shadergradient

## Overview

ShaderGradient is a customizable animated 3D-gradient renderer with React and Vue packages, a separate stateless control package, and Figma/Framer integrations. The main workflow is to choose settings through props or controls, resolve them into gradient state, and render the selected shader and shape in a canvas. README and module paths document renderer capabilities; sampled code confirms URL-state handling, Vue usage, camera animation, and Framer message dispatch. Some renderer and plugin wiring is inferred only at the documented subsystem level because those sources were not sampled.

Main entry points: [`packages/shadergradient/src/ShaderGradient/ShaderGradient.tsx`](https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient/src/ShaderGradient/ShaderGradient.tsx) (React gradient), [`apps/framer-plugin/src/App.tsx`](https://github.com/ruucm/shadergradient/blob/main/apps/framer-plugin/src/App.tsx) (Framer plugin), [`packages/ui/src/overrides/FigmaPlugin/UI.tsx`](https://github.com/ruucm/shadergradient/blob/main/packages/ui/src/overrides/FigmaPlugin/UI.tsx) (Figma controls), [`apps/example-vue-dev/src/App.vue`](https://github.com/ruucm/shadergradient/blob/main/apps/example-vue-dev/src/App.vue) (Vue example)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_render["Gradient rendering"]
  node_reactcanvas["React canvas"]
  node_reactgradient["React gradient<br/>[ShaderGradient.tsx]"]
  node_shadercatalog["Shader catalog<br/>[index.ts]"]
  node_mesh["Shape mesh<br/>[Mesh.tsx]"]
  node_camera["Camera controls"]
  node_lighting["Lighting<br/>[Lights.tsx]"]
  node_postprocessing["Post processing<br/>[PostProcessing.tsx]"]
end

subgraph group_controls["Settings and controls"]
  node_statelessui["Stateless controls"]
  node_controlvalues["Control values"]
  node_gradientstore["Gradient state<br/>[store.ts]"]
  node_urlstate["URL state<br/>[useQueryState.ts]"]
  node_webcontrols["Web controls<br/>[index.ts]"]
end

subgraph group_integrations["Design integrations"]
  node_figmaui["Figma controls<br/>[UI.tsx]"]
  node_figmaexport["Figma export<br/>[exportGIF.ts]"]
  node_figmaplugin["Figma plugin<br/>[ui.tsx]"]
  node_framerplugin["Framer plugin<br/>[App.tsx]"]
end

subgraph group_frameworks["Framework adapters"]
  node_vueapi["Vue renderer<br/>[ShaderGradient.ts]"]
  node_vuecanvas["Vue canvas"]
  node_vueexample["Vue example<br/>[App.vue]"]
end

node_creator(("App creator"))
node_framerhost(("Framer"))
node_browser(("Browser"))
node_supabase[("Supabase")]

node_creator -->|"sets options"| node_statelessui
node_statelessui -->|"reads controls"| node_controlvalues
node_controlvalues -->|"updates state"| node_gradientstore
node_urlstate -->|"loads query"| node_gradientstore
node_urlstate -->|"updates URL"| node_browser
node_webcontrols -->|"provides controls"| node_statelessui
node_creator -->|"mounts canvas"| node_reactcanvas
node_reactcanvas -->|"renders gradient"| node_reactgradient
node_reactgradient -->|"selects shader"| node_shadercatalog
node_reactgradient -->|"configures shape"| node_mesh
node_reactgradient -->|"sets camera"| node_camera
node_reactgradient -->|"configures lights"| node_lighting
node_reactgradient -->|"applies effects"| node_postprocessing
node_creator -->|"chooses settings"| node_vueexample
node_vueexample -->|"mounts canvas"| node_vuecanvas
node_vueexample -->|"passes props"| node_vueapi
node_figmaplugin -->|"uses controls"| node_figmaui
node_figmaui -.->|"reads data"| node_supabase
node_figmaui -->|"exports animation"| node_figmaexport
node_framerhost -->|"hosts plugin"| node_framerplugin
node_framerplugin -->|"loads UI iframe"| node_browser
node_browser -->|"sends message"| node_framerplugin
node_framerplugin -->|"adds component"| node_framerhost

click node_reactcanvas "https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient/src/ShaderGradientCanvas.tsx"
click node_reactgradient "https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient/src/ShaderGradient/ShaderGradient.tsx"
click node_shadercatalog "https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient/src/shaders/index.ts"
click node_mesh "https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient/src/ShaderGradient/Mesh/Mesh.tsx"
click node_camera "https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient/src/ShaderGradient/Controls/useCameraAnimation.ts"
click node_lighting "https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient/src/ShaderGradient/Lights/Lights.tsx"
click node_postprocessing "https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient/src/ShaderGradient/PostProcessing/PostProcessing.tsx"
click node_statelessui "https://github.com/ruucm/shadergradient/blob/main/packages/ui/src/components/Shared/ShaderGradientStateless/ShaderGradientStateless.tsx"
click node_controlvalues "https://github.com/ruucm/shadergradient/blob/main/packages/ui/src/components/Shared/ShaderGradientStateless/useControlValues.ts"
click node_gradientstore "https://github.com/ruucm/shadergradient/blob/main/packages/ui/src/components/Shared/ShaderGradientStateless/store/store.ts"
click node_urlstate "https://github.com/ruucm/shadergradient/blob/main/packages/ui/src/components/Shared/ShaderGradientStateless/store/useQueryState.ts"
click node_webcontrols "https://github.com/ruucm/shadergradient/blob/main/packages/ui/src/components/Web/Customize/index.ts"
click node_figmaui "https://github.com/ruucm/shadergradient/blob/main/packages/ui/src/overrides/FigmaPlugin/UI.tsx"
click node_figmaexport "https://github.com/ruucm/shadergradient/blob/main/packages/ui/src/overrides/FigmaPlugin/exportGIF.ts"
click node_figmaplugin "https://github.com/ruucm/shadergradient/blob/main/apps/figma-plugin/src/ui.tsx"
click node_framerplugin "https://github.com/ruucm/shadergradient/blob/main/apps/framer-plugin/src/App.tsx"
click node_vueapi "https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient-vue/src/ShaderGradient.ts"
click node_vuecanvas "https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient-vue/src/ShaderGradientCanvas.ts"
click node_vueexample "https://github.com/ruucm/shadergradient/blob/main/apps/example-vue-dev/src/App.vue"

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_reactcanvas,node_reactgradient,node_shadercatalog,node_mesh,node_camera,node_lighting,node_postprocessing,node_browser toneBlue
class node_statelessui,node_controlvalues,node_gradientstore,node_urlstate,node_webcontrols,node_supabase toneAmber
class node_figmaui,node_figmaexport,node_figmaplugin,node_framerplugin toneMint
class node_vueapi,node_vuecanvas,node_vueexample toneRose
class node_creator,node_framerhost toneIndigo
```

## Components

### Gradient rendering

- [React canvas](https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient/src/ShaderGradientCanvas.tsx): `packages/shadergradient/src/ShaderGradientCanvas.tsx`
- [React gradient](https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient/src/ShaderGradient/ShaderGradient.tsx): `packages/shadergradient/src/ShaderGradient/ShaderGradient.tsx`
- [Shader catalog](https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient/src/shaders/index.ts): `packages/shadergradient/src/shaders/index.ts`
- [Shape mesh](https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient/src/ShaderGradient/Mesh/Mesh.tsx): `packages/shadergradient/src/ShaderGradient/Mesh/Mesh.tsx`
- [Camera controls](https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient/src/ShaderGradient/Controls/useCameraAnimation.ts): `packages/shadergradient/src/ShaderGradient/Controls/useCameraAnimation.ts`
- [Lighting](https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient/src/ShaderGradient/Lights/Lights.tsx): `packages/shadergradient/src/ShaderGradient/Lights/Lights.tsx`
- [Post processing](https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient/src/ShaderGradient/PostProcessing/PostProcessing.tsx): `packages/shadergradient/src/ShaderGradient/PostProcessing/PostProcessing.tsx`

### Settings and controls

- [Stateless controls](https://github.com/ruucm/shadergradient/blob/main/packages/ui/src/components/Shared/ShaderGradientStateless/ShaderGradientStateless.tsx): `packages/ui/src/components/Shared/ShaderGradientStateless/ShaderGradientStateless.tsx`
- [Control values](https://github.com/ruucm/shadergradient/blob/main/packages/ui/src/components/Shared/ShaderGradientStateless/useControlValues.ts): `packages/ui/src/components/Shared/ShaderGradientStateless/useControlValues.ts`
- [Gradient state](https://github.com/ruucm/shadergradient/blob/main/packages/ui/src/components/Shared/ShaderGradientStateless/store/store.ts): `packages/ui/src/components/Shared/ShaderGradientStateless/store/store.ts`
- [URL state](https://github.com/ruucm/shadergradient/blob/main/packages/ui/src/components/Shared/ShaderGradientStateless/store/useQueryState.ts): `packages/ui/src/components/Shared/ShaderGradientStateless/store/useQueryState.ts`
- [Web controls](https://github.com/ruucm/shadergradient/blob/main/packages/ui/src/components/Web/Customize/index.ts): `packages/ui/src/components/Web/Customize/index.ts`

### Design integrations

- [Figma controls](https://github.com/ruucm/shadergradient/blob/main/packages/ui/src/overrides/FigmaPlugin/UI.tsx): `packages/ui/src/overrides/FigmaPlugin/UI.tsx`
- [Figma export](https://github.com/ruucm/shadergradient/blob/main/packages/ui/src/overrides/FigmaPlugin/exportGIF.ts): `packages/ui/src/overrides/FigmaPlugin/exportGIF.ts`
- [Figma plugin](https://github.com/ruucm/shadergradient/blob/main/apps/figma-plugin/src/ui.tsx): `apps/figma-plugin/src/ui.tsx`
- [Framer plugin](https://github.com/ruucm/shadergradient/blob/main/apps/framer-plugin/src/App.tsx): `apps/framer-plugin/src/App.tsx`

### Framework adapters

- [Vue renderer](https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient-vue/src/ShaderGradient.ts): `packages/shadergradient-vue/src/ShaderGradient.ts`
- [Vue canvas](https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient-vue/src/ShaderGradientCanvas.ts): `packages/shadergradient-vue/src/ShaderGradientCanvas.ts`
- [Vue example](https://github.com/ruucm/shadergradient/blob/main/apps/example-vue-dev/src/App.vue): `apps/example-vue-dev/src/App.vue`

### Other components

- **App creator**
- **Framer**
- **Browser**
- **Supabase**

## Connections

- App creator → Stateless controls: sets options
- Stateless controls → Control values: reads controls
- Control values → Gradient state: updates state
- URL state → Gradient state: loads query
- URL state → Browser: updates URL
- Web controls → Stateless controls: provides controls
- App creator → React canvas: mounts canvas
- React canvas → React gradient: renders gradient
- React gradient → Shader catalog: selects shader
- React gradient → Shape mesh: configures shape
- React gradient → Camera controls: sets camera
- React gradient → Lighting: configures lights
- React gradient → Post processing: applies effects
- App creator → Vue example: chooses settings
- Vue example → Vue canvas: mounts canvas
- Vue example → Vue renderer: passes props
- Figma plugin → Figma controls: uses controls
- Figma controls → Supabase: reads data
- Figma controls → Figma export: exports animation
- Framer → Framer plugin: hosts plugin
- Framer plugin → Browser: loads UI iframe
- Browser → Framer plugin: sends message
- Framer plugin → Framer: adds component