How ruucm/shadergradient works
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: ShaderGradient.tsx React gradient · App.tsx Framer plugin · UI.tsx Figma controls · App.vue Vue example
Components 23
Gradient rendering
- React canvas
packages/shadergradient/src/ShaderGradientCanvas.tsx - React gradient
packages/shadergradient/src/ShaderGradient/ShaderGradient.tsx - Shader catalog
packages/shadergradient/src/shaders/index.ts - Shape mesh
packages/shadergradient/src/ShaderGradient/Mesh/Mesh.tsx - Camera controls
packages/shadergradient/src/ShaderGradient/Controls/useCameraAnimation.ts - Lighting
packages/shadergradient/src/ShaderGradient/Lights/Lights.tsx - Post processing
packages/shadergradient/src/ShaderGradient/PostProcessing/PostProcessing.tsx
Settings and controls
- Stateless controls
packages/ui/src/components/Shared/ShaderGradientStateless/ShaderGradientStateless.tsx - Control values
packages/ui/src/components/Shared/ShaderGradientStateless/useControlValues.ts - Gradient state
packages/ui/src/components/Shared/ShaderGradientStateless/store/store.ts - URL state
packages/ui/src/components/Shared/ShaderGradientStateless/store/useQueryState.ts - Web controls
packages/ui/src/components/Web/Customize/index.ts
Design integrations
- Figma controls
packages/ui/src/overrides/FigmaPlugin/UI.tsx - Figma export
packages/ui/src/overrides/FigmaPlugin/exportGIF.ts - Figma plugin
apps/figma-plugin/src/ui.tsx - Framer plugin
apps/framer-plugin/src/App.tsx
Framework adapters
- Vue renderer
packages/shadergradient-vue/src/ShaderGradient.ts - Vue canvas
packages/shadergradient-vue/src/ShaderGradientCanvas.ts - Vue example
apps/example-vue-dev/src/App.vue
Other components
- App creator
- Framer
- Browser
- Supabase
Connections 23
- 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