A black hero with a perspective field of square dots rolling as layered waves toward a dark horizon. Moving or pressing the pointer sends out expanding ripples, a scan band sweeps up the field and idle ripples keep it alive.
Real-time observability that folds noisy telemetry into one calm surface. Every spike, traced to the line that caused it.
120M events per minute · p99 38 ms · MIT licensed
npx hyperblur add hero-dot-wavenpx shadcn@latest add https://hyperblur.dev/r/hero-dot-wave.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-dot-wave.tsx.
import { HeroDotWave } from "@/components/hyperblur/hero-dot-wave"
<HeroDotWave title="Calm data, loud insights." amplitude={1.4} accent="#3ee6c8" />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "See the ripple before it becomes the outage." | Headline at the bottom left. |
| subtitle | string | "Real-time observability that folds noisy telemetry into one calm surface. Every spike, traced to the line that caused it." | Gray paragraph under the headline. Empty hides it. |
| caption | string | "120M events per minute · p99 38 ms · MIT licensed" | Small mono line above the install row. Empty hides it. |
| command | string | "npx hyperblur add hero-dot-wave" | Shell command in the box with a copy button. Empty hides the box. |
| primaryCta | { label: string; href: string } | null | { label: "Book a demo", href: "#" } | Solid accent button with a chevron next to the command. Pass null to hide it. |
| brand | string | "Tideline" | Wordmark next to the logo mark in the top bar. |
| nav | { label: string; href: string }[] | [{ label: "Platform", href: "#" }, { label: "Customers", href: "#" }, { label: "Docs", href: "#" }] | Centered mono links in the top bar. Hidden below 640px of container width. |
| navCta | { label: string; href: string } | null | { label: "Sign in", href: "#" } | Outlined mono button at the right of the top bar. Pass null to hide it. |
| learnMore | { label: string; href: string } | null | { label: "See the platform", href: "#" } | Small cue with a bobbing chevron at the bottom center. Pass null to hide it. |
| accent | string | "#4da3ff" | Color of the far rows, the troughs, the horizon glow, the caption details and the primary button. Near crests stay cool white. The button text switches between dark and white for contrast when a hex color is given. |
| density | number | 1 | Multiplier for the grid (about 140 by 76 points at 1, fewer columns on narrow screens). Kept between 0.2 and 2. |
| speed | number | 1 | Multiplier for the wave motion and the scan sweep. Ripples keep their own pace. 0 freezes the surface. |
| amplitude | number | 1 | Height of the layered waves, from 0 (flat) to 3. |
| ripples | boolean | true | When true, moving or pressing the pointer spawns expanding ripples, and a ripple appears on its own every few seconds while idle. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the title. Use h2 when the page already has an h1. |
| onSearch | () => void | undefined | Called when the search icon button in the top bar is pressed. |
| className | string | "" | Extra classes on the section. |
| style | React.CSSProperties | undefined | Inline styles on the section. |