A light horizontal rail of case-study cards with a chapter index whose underline slides continuously with the scroll position. Cards snap, can be dragged with the mouse, and their art drifts with parallax as they pass.
Case studies
npx shadcn@latest add https://hyperblur.dev/r/showcase-case-rail.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/showcase-case-rail.tsx.
import { ShowcaseCaseRail } from "@/components/hyperblur/showcase-case-rail"
<ShowcaseCaseRail title="Selected case studies" accent="#ff5a1f" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Case studies" | Small label above the title. |
| title | string | "Six problems, six measurable outcomes" | Section heading. |
| cases | { client: string; title: string; sector: string; metric: string; metricLabel: string; hue: number; href: string }[] | 6 sample cases | Cards in the rail. `metric` is the large result figure. |
| accent | string | "#ff5a1f" | Accent for the chapter underline and focus rings. |
| onCaseSelect | (item: CaseRailItem, index: number) => void | Called when a card is clicked (not after a drag). |