Aurora Hero
A free animated hero section with a masked headline reveal.
Turn every battery site into a trading desk
Meridian bids your fleet into the day-ahead and balancing markets every half hour, and returns 18% more revenue per cycle than manual dispatch.
Aurora Hero is a free animated hero section for Next.js and React that reveals your headline word by word, each word rising out of its own mask, while a drifting aurora gradient moves behind it. It is built with Motion, 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 headline is split into words as it renders, the words rise into view as the page loads (or, with trigger="view", when the section scrolls in), 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.
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. |
| trigger | "load" | "view" | "load" | When the entrance plays. "load": on load, as a CSS animation from the first paint, so a slow load never shows the finished hero and then hides it, and the page reads the same without JavaScript; for a hero at the top of the page. "view": when the section scrolls into view; for a hero placed further down. |
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
- Does Aurora Hero work with right-to-left languages?
- Yes. The headline takes the direction of the page or the element around it, exactly as plain text does, so for a Hebrew or Arabic title set dir="rtl" on the page or on an ancestor, with lang for the language itself (lang alone does not change the direction). Left-to-right text splits into words; text containing right-to-left characters, or placed in a right-to-left context, enters as one block, laid out by the browser's own bidirectional rules.
- 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, by default as the page loads (as a CSS animation from the first paint) or, with trigger="view", when the section enters the viewport, leaving no scroll listener or per-frame script behind once it finishes. 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.