Step showcase

A product's guided tour in one device frame — phone, browser or macOS window: the steps beside it, each real recording played muted then the next, crossfading; it plays only in view, holds on hover and focus, and keeps a pause button.

Web · ✓Mobile · n/aDesktop · ✓BetaBlocks

import { StepShowcase, DeviceFrame, stepShowcaseLabels } from "@krizaka/ui/step-showcase";

Web only — React, from @krizaka/ui/step-showcase. Beta: its API may still change in a minor version.

Mobile · n/a. A product site's tour of the app; inside the phone app the real screens are the tour.

Why it is here. Used by Orazaka, Akinaza.

When to use

A landing page's “see it work”: three to five steps of the real app recorded on the device it runs on.
The same tour on several devices: one StepShowcase per tab (Web · Mobile · Mac).

When not to use

For a gallery of results that should move on its own.
For a single video with its controls.Use instead: Video player
For the steps of a form the person is filling.Use instead: Step progress

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { StepShowcase, DeviceFrame, stepShowcaseLabels } from "@krizaka/ui/step-showcase";

Examples

In your pocket

Four steps of a phone app beside one phone; resize to a phone: dots, swipe.

On your Mac

A macOS window: the control panel, the local stack starting, the workspace.

Orazaka

Props

DeviceFrame

A phone, a browser window or a macOS window around a screen of content.

Prop	Type	Default	Description
`kind`required	`DeviceKind`	—	The device: a phone, a browser window or a macOS window.
`title`	`string`	—	The browser's address or the window's title (“dev.orazaka.com”, “Orazaka”).

StepShowcase

One device frame, its steps beside it, playing each recording then the next — a product's guided tour.

Prop	Type	Default	Description
`device`required	`DeviceKind`	—	The device the recordings were made on.
`label`required	`string`	—	The sequence's accessible name (“Orazaka in your pocket”), passed translated.
`steps`required	`readonly ShowcaseStep[]`	—	The steps, in the order of the journey.
`autoplay`	`boolean`	`true`	Moves on by itself (never under reduced motion).
`defaultIndex`	`number`	`0`	The step shown first.
`deviceTitle`	`string`	—	The browser's address or the window's title.
`labels`	`StepShowcaseLabels`	{ play: "Play the steps", pause: "Pause the steps", step: (n, total) => `Step ${n} of ${total}`, }	The controls' words, translated.
`onIndexChange`	`((index: number, user: boolean) => void)`	—	Called when the step changes — `user` is true when the visitor asked for it.

Accessibility

A region (aria-roledescription="carousel") named by label; the steps are a vertical tablist, the frame its tabpanel named by the current step.
WCAG 2.2.2: a visible pause button; the tour also holds while the pointer is over it, while a focus is inside and while it is off screen.
The video is decorative (aria-hidden): the poster's alt and the step's words carry the meaning. No native controls, never sound.
Under prefers-reduced-motion: posters only, no autoplay, the steps change on demand.

Keyboard

Keys	Action
`Tab`	The current step, then play / pause.
`↑ ↓ ← →`	The previous or next step.
`Enter / Space`	On a step: show it. On play / pause: stops or restarts the tour.

Best practices

Record the real app (a demo persona, never a mock-up); 4–8 s per step, muted, no captions burnt in.
Give every step a poster (the first frame) and an alt: it is what loads first and all that shows under reduced motion.
A title of two or three words and one line per step; the order is the journey (sign in → make → ask → follow).
WebM first, MP4 as the fallback; a step without a video stays duration ms.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub