A dark, centered hero with drifting aurora ribbons, a shining pill badge and a headline that sharpens in word by word over a fading grid.
Lumen turns raw product events into answers in seconds. Funnels, retention and live dashboards, without writing a single line of SQL.
npx shadcn@latest add https://hyperblur.dev/r/hero-aurora.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-aurora.tsx.
import { HeroAurora } from "@/components/hyperblur/hero-aurora"
<HeroAurora title="Analytics your whole team will open" highlight="whole team" primaryCta={{ label: "Get started", href: "/signup" }} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Build products your customers can't stop using" | Headline. Each word reveals from blur to sharp in sequence. |
| highlight | string | "can't stop using" | Words inside the title painted with the aurora gradient. Must match the title word for word. |
| subtitle | string | "Lumen turns raw product events..." | Supporting paragraph under the headline. Hidden when empty. |
| badge | { tag?: string; label: string; href?: string } | null | { tag: "New", label: "Session replays are here", href: "#" } | Pill above the headline with a light sweep. Renders as a link when href is set, null hides it. |
| primaryCta | { label: string; href: string } | null | { label: "Start for free", href: "#" } | Solid main button. null hides it. |
| secondaryCta | { label: string; href: string } | null | { label: "Watch the demo", href: "#" } | Glass button with a play icon. null hides it. |
| proof | string | "Loved by 12,400+ product teams" | Social proof line next to the avatars and stars. Empty hides the row. |
| accent | string | "#2f7bff" | Base color of the ribbons, the badge tag and the button glow. The other aurora tones are mixed from it. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. Use h2 when the page already has an h1. |