# Fx Shader Kit

Shared WebGL shader background runtime for React with reduced motion and a CSS fallback.

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

## Install

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

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** webgl-runtime, fullscreen-fragment-shader, canvas-lifecycle, dpr-cap, resize-observer, offscreen-pause, hidden-tab-pause, context-loss-recovery, css-colour-to-linear-rgb, gradient-poster, local-image-texture, motion-policy, token-colours
- **Intents:** communicate
- **Suits domains:** marketing, saas, devtools, ai-workspace, analytics
- **Interaction:** theme-switch
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** shared WebGL shader background runtime for React with reduced motion and a CSS fallback, write my own fragment shader background component with the kit's canvas lifecycle and theme colours
- **Avoid when:** One of the eight ready-made fx-shader-* backgrounds already fits, Heavy 3D scenes: this is a single fullscreen fragment shader
- **Preserve when adapting:** aria-hidden-layers, poster-fallback, context-loss-handling
- **Replace when adapting:** fragment-shader, palette, poster-gradient
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, react
- **Registry dependencies:** lib-motion