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.
New · Version 2 is here
Animated sections you paste in, tweak and ship. No package, no lock-in.
Customize
Usage
import { LaunchHero } from "@/components/motionkit/launch-hero";
import { BurstButton } from "@/components/motionkit/burst-button";
import { ElasticSlider } from "@/components/motionkit/elastic-slider";
import { PasswordStrength } from "@/components/motionkit/password-strength";
import { DonutChart } from "@/components/motionkit/donut-chart";
import { BentoBars, BentoChat, BentoGrid, BentoOrbit, type BentoItem } from "@/components/motionkit/bento-grid";
import { TestimonialWall, type Testimonial } from "@/components/motionkit/testimonial-wall";
import { ScrollShowcase, type ShowcaseStep } from "@/components/motionkit/scroll-showcase";
import { ConnectionGlobe } from "@/components/motionkit/connection-globe";
import { themedDefaults, useMotionKitTheme } from "@/components/site/theme-provider";
<LaunchHero
eyebrow="New · Version 2 is here"
title="Ship pages that feel alive"
highlight="feel alive"
description="Animated sections you paste in, tweak and ship."
primaryCta={{ label: "Get started", href: "/signup" }}
secondaryCta={{ label: "See the docs", href: "/docs" }}
>
{/* optional: your screenshot or UI for the product window */}
<img src="/dashboard.png" alt="The dashboard" />
</LaunchHero>Motion
The exact curves this component runs, plotted with Motion's own maths.
Word rise
Page load
Window settle
Scroll position
Glow follow
Pointer moves
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.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/launch-hero. It saves the file to components/motionkit and installs its dependencies.
Launch Hero is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, everything appears in place: no rising words, no glow following the pointer and no tilting window.
Pricing Section
A complete pricing table: a sliding monthly/yearly switch, prices that roll to their new digits and a featured plan with an orbiting light.
Bento Grid
A feature grid in tiles of different sizes: they rise in turn, one border light follows the pointer across them all, and each tile's visual comes alive.
Testimonial Wall
Columns of testimonials drifting in opposite directions at different speeds, with soft faded edges. Hover to pause.
New · Version 2 is here
Animated sections you paste in, tweak and ship. No package, no lock-in.
Customize
Usage
import { LaunchHero } from "@/components/motionkit/launch-hero";
import { BurstButton } from "@/components/motionkit/burst-button";
import { ElasticSlider } from "@/components/motionkit/elastic-slider";
import { PasswordStrength } from "@/components/motionkit/password-strength";
import { DonutChart } from "@/components/motionkit/donut-chart";
import { BentoBars, BentoChat, BentoGrid, BentoOrbit, type BentoItem } from "@/components/motionkit/bento-grid";
import { TestimonialWall, type Testimonial } from "@/components/motionkit/testimonial-wall";
import { ScrollShowcase, type ShowcaseStep } from "@/components/motionkit/scroll-showcase";
import { ConnectionGlobe } from "@/components/motionkit/connection-globe";
import { themedDefaults, useMotionKitTheme } from "@/components/site/theme-provider";
<LaunchHero
eyebrow="New · Version 2 is here"
title="Ship pages that feel alive"
highlight="feel alive"
description="Animated sections you paste in, tweak and ship."
primaryCta={{ label: "Get started", href: "/signup" }}
secondaryCta={{ label: "See the docs", href: "/docs" }}
>
{/* optional: your screenshot or UI for the product window */}
<img src="/dashboard.png" alt="The dashboard" />
</LaunchHero>Motion
The exact curves this component runs, plotted with Motion's own maths.
Word rise
Page load
Window settle
Scroll position
Glow follow
Pointer moves
The live preview is free to explore. Plus unlocks the source for Launch Hero and every other premium component.