# Fx Canvas Kit

Shared canvas stage for building a custom ambient background effect.

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

## Install

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

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** ambient-canvas-stage, dpr-cap, resize-handling, token-color-resolution, pause-offscreen-and-hidden-tab, static-frame-under-reduced-motion, pointer-forwarding, seeded-rng, simplex-noise, fractal-noise
- **Intents:** communicate
- **Suits domains:** marketing, saas, devtools
- **Interaction:** motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** shared canvas stage for building a custom ambient background effect, seeded random and simplex noise helpers for generative backgrounds, canvas animation helper that pauses offscreen and respects reduced motion
- **Avoid when:** A ready effect exists (use fx-sparkles, fx-dotted-glow, fx-beams-collision, fx-wavy-background, fx-weather or fx-matrix-terminal), WebGL or 3D scenes, Charts, which need axes and data binding
- **Preserve when adapting:** aria-hidden-canvas, dpr-cap, pause-offscreen
- **Replace when adapting:** scene-factory, tones
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, react
- **Registry dependencies:** fx-foundation, lib-motion