A light case study block that plays numbers from before to after, with a draggable timeline, Before and After buttons, delta pills whose arrows flip, comparison bars and a customer quote.
Case study · Northwind Freight
Northwind's platform team of nine replaced four internal tools. Drag the timeline to compare the numbers they reported.
Deploys per week
0.0%Deploys per week: 3 before, 41 after
Lead time for a change
0.0%Lead time for a change: 9.5 days before, 1.2 days after
Time to recover from incidents
0.0%Time to recover from incidents: 372 min before, 38 min after
Cloud spend per month
0.0%Cloud spend per month: $48,200 before, $29,700 after
"We ship on Fridays now. Nobody on the team remembers when that stopped being scary."
npx shadcn@latest add https://hyperblur.dev/r/stats-before-after.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/stats-before-after.tsx.
import { StatsBeforeAfter } from "@/components/hyperblur/stats-before-after"
<StatsBeforeAfter beforeLabel="2025" afterLabel="2026" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Case study · Northwind Freight" | Badge above the title. |
| title | string | "Twelve months after moving to Relay." | Section heading. |
| subtitle | string | "Northwind's platform team of nine..." | Supporting text. |
| items | { label: string; before: number; after: number; decimals?: number; prefix?: string; suffix?: string; better: "higher" | "lower" }[] | 4 metrics | Metrics. `better` decides whether a change is shown green or red. |
| beforeLabel | string | "Q3 2025" | Label for the starting point. |
| afterLabel | string | "Q3 2026" | Label for the end point. |
| quote | { text: string; name: string; role: string } | Dana Whitlock quote | Quote under the cards. Pass null to hide it. |
| autoPlay | boolean | true | Animate from before to after on mount. |
| onChange | (progress: number) => void | Called with 0 to 1 when the timeline is dragged or a button is pressed. | |
| accent | string | "#4f46e5" | Color of the timeline, the current value bars and the badge. |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles merged onto the root element. |