A light process section with story-style progress bars as tabs. Each chapter brings its own animated illustration: a floor plan drawing itself, palettes fanning out, an isometric room rising, a cart filling.
How Roomwise works
The room rises in three dimensions with furniture at true scale, so you know the sideboard clears the radiator.
npx shadcn@latest add https://hyperblur.dev/r/steps-story-tabs.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/steps-story-tabs.tsx.
import { StepsStoryTabs } from "@/components/hyperblur/steps-story-tabs"
<StepsStoryTabs accent="#f45d48" interval={5000} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "How Roomwise works" | Small label above the title. |
| title | string | "An empty room to a delivered one, in four chapters" | Section heading. |
| steps | { label: string; title: string; body: string; points: string[] }[] | 4 sample steps | Chapters. The illustration cycles through four scenes by index. |
| defaultStep | number | 0 | Initial chapter when uncontrolled. |
| step | number | Controlled chapter index. | |
| onStepChange | (index: number) => void | Called when the chapter changes. | |
| autoPlay | boolean | true | Fill the bars and advance automatically, pausing on hover or focus. |
| interval | number | 4200 | Milliseconds per chapter. |
| accent | string | "#f45d48" | Accent for the active bar, check icons and scene highlights. |