A technical hero with a perspective grid floor running toward a glowing horizon, a headline that decodes into place and a copyable install command.
v4.2 · Edge runtime is now generally available
Relay builds, ships and scales your functions across 310 cities. Push to main and your API is live everywhere in under ten seconds.
npx shadcn@latest add https://hyperblur.dev/r/hero-grid.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-grid.tsx.
import { HeroGrid } from "@/components/hyperblur/hero-grid"
<HeroGrid title="Ship your API worldwide" command="npm i @acme/edge" primaryCta={{ label: "Start free", href: "/signup" }} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "v4.2 · Edge runtime is now generally available" | Monospace status line above the headline. Hidden when empty. |
| title | string | "Deploy to the edge in a single command" | Headline. Scrambles and resolves left to right on mount and again on hover. |
| subtitle | string | "Relay builds, ships and scales..." | Supporting paragraph under the headline. Hidden when empty. |
| command | string | "npx relay deploy" | Command shown in the terminal field. The copy button writes it to the clipboard. Empty hides the field. |
| primaryCta | { label: string; href: string } | null | { label: "Get started", href: "#" } | Solid accent button. null hides it. |
| secondaryCta | { label: string; href: string } | null | { label: "Read the docs", href: "#" } | Outlined button. null hides it. |
| stats | { value: string; label: string }[] | [8 ms, 310, 99.999%] | Monospace figures under the actions, divided by thin rules. Empty array hides them. |
| accent | string | "#2f7bff" | Color of the grid lines, horizon glow, prompt and primary button. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. Use h2 when the page already has an h1. |