A hero section whose eyebrow, headline lines, subtitle, buttons and product visual enter one after another with a rise, blur and fade. Change the replay key to play it again.
Plume watches every endpoint, trace and deploy, then tells you what changed in plain words.
POST /v1/checkout112 msGET /v1/orders94 msPOST /v1/webhooks640 msnpx shadcn@latest add https://hyperblur.dev/r/hero-stagger-intro.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-stagger-intro.tsx.
import { HeroStaggerIntro } from "@/components/hyperblur/hero-stagger-intro"
<HeroStaggerIntro replay={runId} lines={["Ship the quiet parts", "first."]} primary={{ label: "Get started", href: "/signup" }} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Plume 2.0 is live" | Pill above the headline. Hidden when empty. |
| lines | string[] | ["Know what broke", "before users do."] | Headline lines. Each line enters on its own and the last one gets the gradient. |
| subtitle | string | "Plume watches every endpoint, trace and deploy, then tells you what changed in plain words." | Paragraph under the headline. Hidden when empty. |
| primary | { label: string; href: string } | { label: "Start free", href: "#" } | Main call to action. |
| secondary | { label: string; href: string } | null | { label: "Watch the demo", href: "#" } | Second call to action. Pass null to hide it. |
| visual | ReactNode | null | Content for the right column. A built-in dashboard mock is used when omitted; pass null for a single text column. | |
| replay | string | number | 0 | Change this value to remount the content and play the sequence again. |
| stagger | number | 120 | Delay between consecutive items in milliseconds. |
| duration | number | 900 | Duration of each item's entrance in milliseconds. |
| accent | string | "#3ddc97" | Accent color for the glow, status dot, gradient and primary button. |
| className | string | Extra class for the root section. |