Action filmstripPro
A frame per step with the action and the reason. Scrub, jump and step through.
On this page
ProNine steps of a shopping run. Drag across the strip to scrub.
Installation
Usage
import { ActionFilmstrip } from "@/components/ui/chatcn/pro/action-filmstrip"
<ActionFilmstrip steps={steps} live />The current step is expanded: large on the stage with the spot it acted on, or inline in the strip with layout="strip". With live, new steps are followed while you sit on the newest; scroll back and a Back to latest button appears. Pending steps hold a place for what comes next.
Examples
States
ProLive in the inline layout, a failed step, and no steps yet.
With the action log
ProFrame links jump the filmstrip; the filmstrip lights the log.
Props
| Prop | Type | Notes |
|---|---|---|
steps | FilmstripStep[] | { id, screen, action, reason?, url?, at?, point?, status?, error? } |
index, defaultIndex, onIndexChange | number | Current step |
live | boolean | Follow new steps |
layout | "stage" | "strip" | Where the current step expands |
aspectRatio | number | Default 16 / 10 |
Keyboard
| Key | Action |
|---|---|
Arrow Left, Arrow Right | Previous and next step (mirrored in RTL) |
Home, End | First and last step |
Page Up, Page Down | Five steps |
Accessibility
- The strip is a horizontal listbox; each frame is named by its step, action and status.
- The caption is a polite live region.
Motion
- Pointer moves crossfade frames in 200 ms; keyboard moves swap instantly.
- Drag across the strip to scrub without animation in the way.