Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProUse this when content plays as short timed stories: a cross-fading viewer with one progress segment per story, tap zones for back and forward, hold to pause and a Pause button.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for product tours, highlights and recaps that run for a few seconds per screen and end by themselves.
Do not use it for content people must read at their own pace, or for more than about ten stories.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
stories | Story[] | - | Each has an id, caption and a content node. |
label | string | - | Accessible name of the viewer. |
duration | number | 5000 | Time on each story in ms. |
onComplete | () => void | - | Called when the last story finishes. |
The pattern ships with a Testing Library test (story-viewer-segments.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.