# Motion Gradient Mesh

Hero section background for next-generation AI platforms.

- id: `motion-gradient-mesh`
- Page: https://agentic-ui-kit.com/components/motion-gradient-mesh
- Live preview: https://agentic-ui-kit.com/live/component/motion-gradient-mesh

## Install

```bash
agentic-ui add motion-gradient-mesh
npx shadcn@4.17.0 add @agentic-ui/motion-gradient-mesh
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** canvas-gradient-mesh, organic-ambient-flow, personality-gating, reduced-motion-fallback, interactive-pointer-warp, informative-state-preservation, theme-adaptive-palette
- **Intents:** monitor-live, track-status, communicate, navigate
- **Suits domains:** saas, ai-workspace, operations, devtools, ecommerce
- **Interaction:** pointer-hover, theme-switch, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Hero section background for next-generation AI platforms, Ambient backdrop for status and command centers, Engaging visual accent for product launch banners
- **Avoid when:** Dense data tables requiring high contrast monochromatic focus, Low-powered embedded kiosks or strictly conservative document readers
- **Preserve when adapting:** mesh-node-physics, personality-speed-ratios, reduced-motion-fallback, informative-overlay-structure
- **Replace when adapting:** hero-headlines, gradient-color-stops, call-to-actions
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, badge
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, react
- **Motion:** profile expressive, library canvas, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion