Aurora Hero
A launch-page hero with silk aurora ribbons drawn on canvas under film grain, a cursor-lit dot grid, rotating words, an email sign-up and a logo marquee.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/aurora-heroProps
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | - | The main headline, before the rotating words. |
rotatingWords | string[] | [] | Words that take turns at the end of the title. |
announcement | AuroraAnnouncement | - | Pill above the title, e.g. for a launch. |
description | string | - | Supporting text under the title. |
signup | AuroraSignup | - | Email sign-up form under the description. |
children | React.ReactNode | - | Extra actions under the sign-up form. |
logos | AuroraLogo[] | [] | Logos in the scrolling strip. Names without an image are shown as wordmarks. |
logosLabel | string | - | Line above the logo strip. |
colors | string[] | ["#22d3ee", "#6366f1", "#a855f7", "#ec4899", "#34d399"] | Three or four colours for the aurora and the rotating words. |
spotlight | boolean | true | Light up the dot grid around the cursor. |
speed | number | 1 | Ribbon speed; 0 holds them still. |
className | string | - | Extra classes for the section. |