# Marketing Hero Gradient

Landing page hero with an animated gradient mesh background, big headline and two call to action buttons.

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

## Install

```bash
agentic-ui add marketing-hero-gradient
npx shadcn@4.17.0 add @agentic-ui/marketing-hero-gradient
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** gradient-mesh-backdrop, pointer-warp, announcement-pill, dual-cta, highlights, theme-sync, reduced-motion, media-slot, dark-mode
- **Intents:** navigate, communicate
- **Suits domains:** marketing, saas, ai-agents, fintech, analytics
- **Interaction:** click, pointer-move
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** landing page hero with an animated gradient mesh background, big headline and two call to action buttons, colourful premium hero for an AI or analytics startup homepage, launch page hero with an announcement pill over a moving gradient
- **Avoid when:** low-power or data-saver contexts where a canvas animation is unwelcome, a product screenshot must sit beside the copy (use marketing-hero-split), pages that already have an h1 above
- **Preserve when adapting:** scrim, canvas-aria-hidden
- **Replace when adapting:** copy, cta-links, highlights, announcement
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** @agentic-ui/motion-gradient-mesh, lucide-react
- **Used in:** Marketing Website (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives, motion-gradient-mesh