# Fx Shader Grain Gradient

Grainy gradient background with film grain and dithering for a retro landing page.

- id: `fx-shader-grain-gradient`
- Page: https://agentic-ui-kit.com/components/fx-shader-grain-gradient
- Live preview: https://agentic-ui-kit.com/live/component/fx-shader-grain-gradient?piece=fx-shader-grain-gradient

## Install

```bash
agentic-ui add fx-shader-grain-gradient
npx shadcn@4.17.0 add @agentic-ui/fx-shader-grain-gradient
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** film-grain, ordered-dither, bayer-4x4, retro-gradient, posterised-colour-steps, pixel-grid, webgl-fragment-shader, theme-token-colours, gradient-poster-fallback, reduced-motion-static-frame, offscreen-pause, hidden-tab-pause, context-loss-recovery, dpr-capped, aria-hidden-decorative-layer, light-dark-theming
- **Intents:** communicate
- **Suits domains:** marketing, saas, devtools, ai-workspace, analytics
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** grainy gradient background with film grain and dithering for a retro landing page, noisy dithered gradient hero background, risograph style, retro pixel dither gradient backdrop for a changelog or launch page
- **Avoid when:** A clean, corporate look where visible noise would read as an image artefact, Dense tables, forms or charts where a moving background competes with data, Stacking with another ambient background in the same viewport
- **Preserve when adapting:** aria-hidden-layer, gradient-poster-fallback, static-frame-under-reduced-motion
- **Replace when adapting:** palette-colours, angle-grain-levels-pixel, veil, container-children
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-shader-kit, @agentic-ui/motion, react
- **Motion:** profile expressive, library canvas, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** fx-shader-kit