A light before and after comparison drawn as mirrored bars that grow out from a center axis, the old way on one side and the new on the other. A team size switch re-flows every bar, and each row carries a multiplier chip.
Measured after migration
What changes when engineering moves from a hand-built pipeline to Tessera. Pick a team size to see the median result.
Median of 312 customer migrations between January and September 2026.
npx shadcn@latest add https://hyperblur.dev/r/stats-versus.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/stats-versus.tsx.
import { StatsVersus } from "@/components/hyperblur/stats-versus"
<StatsVersus them="Before" us="After" scenarios={["All teams"]} rows={[{ label: "Deploy time", unit: " min", lowerIsBetter: true, values: [[40, 5]] }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Measured after migration" | Accent line above the heading. |
| title | string | "Same team, same product, a different week" | Section heading. |
| subtitle | string | sample text | Paragraph under the heading. Hidden when empty. |
| them | string | "Hand-built pipeline" | Legend for the left bars. |
| us | string | "With Tessera" | Legend for the right bars. |
| scenarios | string[] | ["Team of 12", "Team of 240"] | Options in the switch. With one entry the switch is hidden. |
| rows | { label: string; unit?: string; prefix?: string; lowerIsBetter?: boolean; values: [number, number][] }[] | 5 sample rows | One pair of [them, us] values per scenario. |
| defaultScenario | number | 0 | Scenario selected first. |
| footnote | string | "Median of 312 customer migrations between January and September 2026." | Note under the chart. Hidden when empty. |
| accent | string | "#7c3aed" | Color of the right bars and chips. |
| onScenarioChange | (index: number) => void | undefined | Called when the scenario changes. |