A light tab strip where every tab is a small, running preview of its feature. The selected preview zooms out of its tab into a large stage next to a dark copy card, and the tour advances on its own until you hover.
Plyform 4.0
Each tab is a working preview. Pick one to open it full size, or let the tour run on its own.
Drop a comment anywhere on the canvas. Threads follow the layer when it moves, and resolve themselves when the change ships.
npx shadcn@latest add https://hyperblur.dev/r/features-live-tabs.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/features-live-tabs.tsx.
import { FeaturesLiveTabs } from "@/components/hyperblur/features-live-tabs"
<FeaturesLiveTabs autoPlay interval={5000} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Plyform 4.0" | Pill above the heading. |
| title | string | "The whole design loop, live in every tab" | Section heading. |
| subtitle | string | "Each tab is a working preview..." | Paragraph under the heading. |
| items | { label: string; title: string; body: string; stat: string }[] | 4 features | Tabs. The first word of stat is shown large. Tab n uses scene n (comments, versions, handoff, prototype). |
| value | number | Controlled selected tab. | |
| defaultValue | number | 0 | Initially selected tab when uncontrolled. |
| onChange | (index: number) => void | Called when the selected tab changes. | |
| autoPlay | boolean | true | Advance to the next tab when the progress line fills. Hover or focus pauses it. |
| interval | number | 5000 | Milliseconds per tab when autoPlay is on. |
| accent | string | "#ff5a36" | Accent for pins, rulers, flows and the progress line. |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |