Vertical light beams fall and fade toward a glowing horizon arc, under a headline that splits into red and cyan on hover. Three stats count up when the hero scrolls into view.
Relay 3.0 is here with streaming logs
Deploy APIs and full-stack apps to every region in seconds, with preview URLs for every branch and instant rollbacks.
npx shadcn@latest add https://hyperblur.dev/r/hero-beams.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-beams.tsx.
import { HeroBeams } from "@/components/hyperblur/hero-beams"
<HeroBeams title="Deploy worldwide in seconds" stats={[{ value: 120, suffix: "+", label: "Cities" }, { value: 12, suffix: "ms", label: "Latency" }, { value: 99.9, decimals: 1, suffix: "%", label: "Uptime" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Relay 3.0 is here with streaming logs" | Text in the pill above the headline. Empty hides it. |
| title | string | "Ship to the edge at the speed of light" | Headline. Hovering it shows a subtle chromatic split. |
| subtitle | string | "Deploy APIs and full-stack apps to every region in seconds, with preview URLs for every branch and instant rollbacks." | Supporting paragraph under the headline. Empty hides it. |
| primaryCta | { label: string; href: string } | null | { label: "Deploy now", href: "#" } | Solid accent button with an arrow. Pass null to hide it. |
| secondaryCta | { label: string; href: string } | null | { label: "Talk to sales", href: "#" } | Outlined secondary button. Pass null to hide it. |
| stats | { value: number; label: string; decimals?: number; prefix?: string; suffix?: string }[] | 310+ regions, 38ms cold start, 99.99% uptime | Numbers on the horizon. Each counts up from zero once it is in view. An empty array hides the row. |
| accent | string | "#2f7bff" | Color of the beams, the horizon glow and the primary button. |
| beams | number | 18 | Number of beam lanes, from 0 to 48. |
| seed | number | 4 | Seed for beam positions, lengths and timing. |