Aurora Hero
A free animated hero section with a masked headline reveal.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- GSAP
- 2 runtime packages
Aurora Hero is a free animated hero section for Next.js and React that reveals your headline word by word out of masked lines while a drifting aurora gradient moves behind it. It is built with GSAP SplitText and ScrollTrigger, styled with Tailwind, and composes the Aurora Background component through a registry dependency.
You pass a title, an optional subtitle and up to two calls to action, and the section handles the rest: the h1 splits into lines and words that rise into view, the subtitle and CTA row follow a beat later, and a static scrim keeps the text readable over the brightest points of the gradient. With prefers-reduced-motion enabled there is no splitting and no movement, everything renders immediately, and the background holds still.
Ship landing pages that feel engineered, not assembled
Aurora Hero pairs a masked headline reveal with a slowly drifting gradient backdrop, so your above-the-fold moment lands smoothly on every visit.
Customise
Component settings update the preview and generated code together.
Content
Behaviour
Advanced appearance
Appearance
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/hero-auroraUsage
import { HeroAurora } from "@/components/hero-aurora";
export default function Page() {
return (
<HeroAurora
title="Launch pages that move like products"
subtitle="A masked headline reveal over a drifting aurora gradient."
cta={{ label: "Get started", href: "/signup" }}
secondaryCta={{ label: "Read the docs", href: "/docs" }}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | required | Headline copy, rendered as the section's single h1. |
| subtitle | string | undefined | Supporting copy rendered below the headline. |
| cta | { label: string; href: string } | required | Primary call to action, rendered as a real anchor. |
| secondaryCta | { label: string; href: string } | undefined | Optional secondary call to action, rendered as a real anchor. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Aurora Hero declares no tokens of its own; the background is themed through the Aurora Background component it installs as a registry dependency. Override --aurora-1, --aurora-2 and --aurora-3 for the three blob colours and --aurora-blur for the blur radius, from :root or any ancestor of the hero, to retheme the whole section without touching the code:
:root {
--aurora-1: var(--color-accent-400);
--aurora-2: var(--color-brand-400);
--aurora-blur: 120px;
}Frequently asked questions
- Is Aurora Hero free for commercial use?
- Yes. Aurora Hero is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does Aurora Hero affect performance or accessibility?
- The reveal animates transforms and opacity only, the words move inside space the layout has already reserved, so there is no layout shift, and the entrance runs once when the section enters the viewport. The headline stays a single accessible string for screen readers, both calls to action are real anchors with visible focus rings, and with reduced motion enabled the full content renders immediately with a static background.
- How do I change the aurora colours behind the hero?
- Override the CSS custom properties --aurora-1, --aurora-2 and --aurora-3 from :root or any ancestor element. They belong to the Aurora Background component that Aurora Hero installs automatically, and --aurora-blur controls how soft the gradient is.