# Generator Shader Background

WebGL mesh gradient background with grain and swirl, colours from theme tokens, exported as a self-contained React component.

- id: `generator-shader-background`
- Page: https://agentic-ui-kit.com/components/generator-shader-background
- Live preview: https://agentic-ui-kit.com/live/piece/generator-shader-background?piece=generator-shader-background

## Install

```bash
agentic-ui add generator-shader-background
npx shadcn@4.17.0 add @agentic-ui/generator-shader-background
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** webgl-shader-background, mesh-gradient-shader, grain-gradient-shader, swirl-control, grain-control, speed-control, scale-control, palette-from-theme-tokens, css-gradient-fallback, png-poster-export, self-contained-tsx-component, no-runtime-dependency, reduced-motion-still-frame, pause-offscreen, seed-randomise, live-preview, presets, versioned-url-state, copy-to-clipboard, file-download, shadcn-registry-item
- **Intents:** configure, create-edit, import-export
- **Suits domains:** saas, analytics, settings, devtools
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** WebGL mesh gradient background with grain and swirl, colours from theme tokens, exported as a self-contained React component, Animated shader hero background that pauses offscreen and falls back to a CSS gradient and a PNG poster, Grain gradient background generator with speed, scale and swirl controls and no animation library
- **Avoid when:** A static soft gradient is enough; use generator-gradient-mesh, which ships CSS only., Pages that must run without WebGL or on very low-power devices; use the CSS fallback or a static image.
- **Preserve when adapting:** single-runtime-file, double-precision-seed-points, css-fallback, pause-and-still-frame
- **Replace when adapting:** presets, palette-tokens, component-name
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.85/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 9/10
- **npm dependencies:** @agentic-ui/generator-foundation, @agentic-ui/tokens, react
- **Motion:** profile expressive, library canvas, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-generator-foundation