# Fx Wavy Background

Animated wavy background for a hero section.

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

## Install

```bash
agentic-ui add fx-wavy-background
npx shadcn@4.17.0 add @agentic-ui/fx-wavy-background
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** animated-wavy-background, layered-waves, simplex-noise-crests, layer-count-amplitude-speed, token-tones, roughness-octaves, bottom-fade-mask, static-frame, offscreen-pause, decorative-layer
- **Intents:** communicate
- **Suits domains:** marketing, saas, ecommerce, ai-content, education
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** animated wavy background for a hero section, wavy animated background with moving waves behind the hero, layered noise waves at the bottom of a call to action, flowing wave background behind a login or signup panel, section transition with soft moving waves in theme colors
- **Avoid when:** A divider of fixed shape is enough (use fx-wave-divider), Text sits in the lower half over the strongest layer, Data-dense screens
- **Preserve when adapting:** decorative-canvas-aria-hidden, static-frame-fallback, pause-offscreen
- **Replace when adapting:** layers, amplitude-and-speed, roughness, tones, mask, children
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-canvas-kit, react
- **Motion:** profile subtle, library canvas, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** fx-canvas-kit