A hero that ends in a working dashboard: revenue ticks up, the line chart slides a new point in every beat and fresh payments drop into the feed. It pauses offscreen and holds still for reduced motion.
Live now · 1,204 teams watching
Pulse streams every charge, upgrade and churn into one calm dashboard, updated the second money moves.
npx shadcn@latest add https://hyperblur.dev/r/hero-live-metrics.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-live-metrics.tsx.
import { HeroLiveMetrics } from "@/components/hyperblur/hero-live-metrics"
<HeroLiveMetrics baseRevenue={482000} currency="EUR" locale="de-DE" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Live now · 1,204 teams watching" | Pill with a pulsing dot. Hidden when empty. |
| title | string | "Watch your revenue move as it happens" | Headline. |
| subtitle | string | "Pulse streams every charge..." | Supporting paragraph. Hidden when empty. |
| primaryCta | { label: string; href: string } | null | { label: "Connect Ledgerly", href: "#" } | Accent button. null hides it. |
| secondaryCta | { label: string; href: string } | null | { label: "Open the live demo", href: "#" } | Outlined button. null hides it. |
| baseRevenue | number | 1284392 | Starting revenue. Each new payment is added to it. |
| currency | string | "USD" | Currency code for Intl.NumberFormat. |
| locale | string | "en-US" | Locale for number formatting. |
| interval | number | 1400 | Milliseconds between updates (minimum 400). |
| accent | string | "#2f7bff" | Chart, glow and primary button color. |
| live | boolean | true | Set false to freeze the dashboard. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. |