# Launch Hero

> A complete landing-page hero: a pointer-lit grid, a headline that rises word by word and a product window that tilts flat as you scroll.

Category: Sections · MotionKit Plus · Updated 2026-10-21 · Live demo: https://motionkitui.com/components/launch-hero

## When to use it

The top of a SaaS, app or product landing page: a headline, two calls to action and a product screenshot, ready to ship with your own copy.

## How it works

Each word of the headline sits in its own clipping box and rises into view with a short stagger, then the description, buttons and product window fade up after it. A faint grid covers the section, and a brighter copy is revealed under a soft spotlight that follows the pointer on a spring. useScroll tracks the product window: it starts tipped back 24 degrees in perspective and settles flat and full size as it reaches the middle of the screen.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/launch-hero` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | The headline. Words rise into place one after another. |
| `highlight` | `string` |  | Words in the title to pick out in the accent gradient. |
| `eyebrow` | `string` |  | Small pill above the headline. |
| `description` | `string` |  | One or two sentences under the headline. |
| `primaryCta` | `{ label: string; href: string }` |  | The main button. |
| `secondaryCta` | `{ label: string; href: string }` |  | The quieter second link. |
| `accent` | `string` | `"#5FAEB4"` | Colour of the glow, highlighted words and main button. |
| `children` | `ReactNode` |  | Your screenshot or UI for the product window. A placeholder dashboard by default. |

## Accessibility

- **Keyboard: Pass.** Both calls to action are real links with visible focus rings, in reading order.
- **Screen readers: Pass.** The headline is read once, as a whole; the rising words are hidden. Grid, glow and the placeholder dashboard are decorative and hidden.
- **Reduced motion: Pass.** With reduced motion on, everything appears in place: no rising words, no glow following the pointer and no tilting window.
- **Colour contrast: Pass.** Headline ivory on charcoal measures 17.0:1, the description 7.7:1. The glow stays under 20% opacity.