A product launch stage: a single fixture sweeps a cone of warm light with drifting dust across a dark room, the pool of light follows on the floor and a sheen glides over the product. Specs sit on a ruled base line.
Introducing
Aero One turns any corner into a listening room, tuning itself to the space in under a second.
npx shadcn@latest add https://hyperblur.dev/r/hero-stage-light.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-stage-light.tsx.
import { HeroStageLight } from "@/components/hyperblur/hero-stage-light"
<HeroStageLight productName="Aero One" title="Meet the quietest speaker we have made" lightColor="#dbeafe" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Introducing" | Tracked uppercase line above the headline. Hidden when empty. |
| title | string | "Sound that fills the room, not the shelf" | Headline with a soft top-lit gradient. |
| subtitle | string | "Aero One turns any corner..." | Supporting paragraph. Hidden when empty. |
| primaryCta | { label: string; href: string } | null | { label: "Pre-order for $349", href: "#" } | Solid button that glows in the light color on hover. null hides it. |
| secondaryCta | { label: string; href: string } | null | { label: "Hear it", href: "#" } | Outlined button with a waveform icon. null hides it. |
| specs | { value: string; label: string }[] | [40 h, 360°, 1.2 kg, IP67] | Spec row along the bottom. Empty array hides it. |
| productName | string | "Aero One" | Engraved name under the product and its accessible label. |
| lightColor | string | "#fff4dc" | Color of the beam, dust, floor pool and fixture. |
| speed | number | 1 | Multiplier for the sweep speed. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. |