Three case study cards with a wordmark, an industry tag and one big result that counts up on scroll. Hovering a card lifts the number and slides the customer quote up from below.
Case studies
Real results from operations, support and growth teams after their first ninety days.
faster dispatch planning
We replaced four spreadsheets and a nightly script. Planners now finish the morning route in twenty minutes instead of an hour.
fewer support tickets
Customers find answers before they ever reach us. The drop in tickets paid for the rollout in the first quarter.
added annual revenue
Checkout went from five steps to two. Conversion on mobile climbed every single week after launch.
npx shadcn@latest add https://hyperblur.dev/r/proof-case-studies.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/proof-case-studies.tsx.
import { ProofCaseStudies } from "@/components/hyperblur/proof-case-studies"
<ProofCaseStudies accent="#a78bfa" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Case studies" | Small label above the title. |
| title | string | "Teams that switched, and the numbers that followed" | Section heading. |
| subtitle | string | "Real results from operations, support and growth teams..." | Supporting text. |
| studies | { company: string; industry: string; value: number; decimals?: number; prefix?: string; suffix?: string; metricLabel: string; quote: string; author: string; role: string; href?: string; mark?: "ring" | "bolt" | "wave" | "grid" | "leaf" | "spark" }[] | 3 sample studies | Cards to show. `value` counts up from zero; `mark` picks the small glyph beside the company name. |
| cta | { label: string; href: string } | { label: "Read all customer stories", href: "#" } | Link in the header. |
| defaultActive | number | 1 | Card that shows its quote when nothing is hovered. Use -1 for none. |
| accent | string | "#a78bfa" | Accent for the glyphs, eyebrow and active border. |
| onStudyClick | (study: ProofCaseStudy, index: number) => void | Called when a card is clicked, before navigation. |