# Fx Wave Divider

Landing page hero to features section transition with dark premium crest waves.

- id: `fx-wave-divider`
- Page: https://agentic-ui-kit.com/components/fx-wave-divider
- Live preview: https://agentic-ui-kit.com/live/fx/fx-wave-divider

## Install

```bash
agentic-ui add fx-wave-divider
npx shadcn@4.17.0 add @agentic-ui/fx-wave-divider
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** multi-layer-svg-waves, top-bottom-positioning, vertical-horizontal-inversion, parallax-drift-animation, token-derived-wave-colors, responsive-height-clamp, offscreen-pause, motion-personality-gating, reduced-motion-static-fallback, decorative-aria-hidden
- **Intents:** communicate, explore-detail, navigate
- **Suits domains:** saas, marketing, ai-workspace, analytics, ecommerce, devtools
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Landing page hero to features section transition with dark premium crest waves, Pricing section header with gentle wave divider, Card or tinted container top cap with inverted wave divider, Subtle low-amplitude bottom section transition in enterprise analytics dashboard
- **Avoid when:** Dense tabular data grids or spreadsheet editors where decorative dividers add noise, Inline form inputs where dividing elements break field hierarchy, Scenarios requiring hard rectilinear grid boundaries
- **Preserve when adapting:** decorative-layers-aria-hidden, token-derived-colors, offscreen-pause-and-static-fallback
- **Replace when adapting:** wave-variant-and-layers, tone-and-fill-color, responsive-height
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** fx-foundation, lib-motion