A dark hero where a soft spotlight follows the pointer, revealing a hidden dotted grid, floating metric chips and a brighter copy of the headline. It drifts on its own path when nobody is pointing.
NewSession replay 2.0 is live
Replays, real-user metrics and error traces on one timeline, so you find the slow screen before your customers do.
Trusted by product teams at
npx shadcn@latest add https://hyperblur.dev/r/hero-spotlight.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-spotlight.tsx.
import { HeroSpotlight } from "@/components/hyperblur/hero-spotlight"
<HeroSpotlight title="Find the bug before your users do" primaryCta={{ label: "Get started", href: "/signup" }} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Session replay 2.0 is live" | Text in the pill above the headline. Empty hides the pill. |
| badge | string | "New" | Small tag at the start of the eyebrow pill. Empty hides it. |
| title | string | "See what your users actually see" | Headline. The spotlight reveals a brighter gradient copy of it. |
| subtitle | string | "Replays, real-user metrics and error traces on one timeline, so you find the slow screen before your customers do." | Supporting paragraph under the headline. Empty hides it. |
| primaryCta | { label: string; href: string } | null | { label: "Start free trial", href: "#" } | Solid primary button. Pass null to hide it. |
| secondaryCta | { label: string; href: string } | null | { label: "Watch the demo", href: "#" } | Outlined secondary button with a play icon. Pass null to hide it. |
| accent | string | "#2f7bff" | Color of the revealed grid, the glow, the chips and the lit headline. |
| logos | string[] | ["Northwind", "Kestrel", "Halcyon", "Lumen", "Arcadia"] | Company names in the trust row, each with a simple mark. An empty array hides the row. |
| radius | number | 280 | Spotlight radius in pixels. |