Three result cards, each with a big number that counts up when the section scrolls into view, a growing bar, a short quote and the customer behind it.
Customer results
Measured by the teams themselves, twelve months after switching to Relay.
3.2x
faster deploys to production
We went from a nervous Thursday release to shipping a dozen times a day. Our on-call rotation finally sleeps through the night.
−41%
churn in the first 90 days
Onboarding emails triggered from real product usage did more for retention than two years of discount campaigns.
$1.8M
saved on infrastructure in year one
Consolidating four vendors onto one bill paid for the rollout in the first quarter. Finance now forwards our dashboard around.
npx shadcn@latest add https://hyperblur.dev/r/proof-metrics-quotes.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/proof-metrics-quotes.tsx.
import { ProofMetricsQuotes } from "@/components/hyperblur/proof-metrics-quotes"
<ProofMetricsQuotes items={[{ value: 3.2, suffix: "x", decimals: 1, label: "faster deploys", quote: "We ship daily now.", name: "Rachel Nguyen", role: "Director of Platform", company: "Fernhill" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Customer results" | Accent label above the heading. |
| title | string | "The numbers our customers bring to their board meetings" | Section heading. |
| subtitle | string | sample text | Supporting line under the heading. |
| items | { value: number; prefix?: string; suffix?: string; decimals?: number; label: string; quote: string; name: string; role: string; company: string }[] | 3 sample results | Result cards. Negative values render with a true minus sign. |
| cta | { label: string; href: string } | null | { label: "Read the case studies", href: "#case-studies" } | Pill link beside the heading. Pass null to hide it. |
| accent | string | "#10b981" | Accent for the glow, bars and eyebrow. |
| duration | number | 1.8 | Count-up duration in seconds. |