SceneStrip
StableAn ordered storyboard of shots with a status on each, a total length, and reorder by drag, buttons or keyboard.
Also known as storyboard, scene timeline, filmstrip
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
A scene in progress
Ferry morning
0:18 (18 seconds) total · 5 shots · 1 generating, 1 to pick, 1 did not work
Drag a shot, use its arrows, or press Alt and an arrow key on a focused shot to move it.
<SceneStrip title="Ferry morning" shots={shots} onReorder={setShots} onOpen={openShot} onAdd={addShot} />
const shots = [
{ id: "a", label: "Harbour at dawn", prompt: "Wide shot of a quiet harbour…", durationSec: 6, status: "ready" },
{ id: "b", label: "Ferry leaves", durationSec: 8, status: "needsPick", note: "4 takes" },
{ id: "c", label: "Deck close-up", status: "generating" },
{ id: "d", label: "Island arrives", status: "failed", note: "Not charged" },
{ id: "e", label: "Title card", durationSec: 4, status: "ready" },
];Five shots with every status. Drag a card, use its arrows, or focus it and press Alt with an arrow key. Add shot appends one.
When to use it
Puts chosen takes in order as a simple storyboard and shows which shots are done.
Made of: Title · Total length, shot count and what is open · Shot cards (number, poster, length, name, prompt, status, move buttons, Open) · Add shot
Use it for
- A drawer under the take grid in a video studio.
- Planning a multi-shot ad or explainer before every shot exists.
- Following several shots while they generate.
Not for
- Steps of a task an agent is doing: use StepTimeline.
- Choosing between takes of one shot: use VariantGrid.
- Events over time: use Timeline.
Do and avoid
Ferry morning
0:18 (18 seconds) total · 3 shots · 1 to pick
Drag a shot, use its arrows, or press Alt and an arrow key on a focused shot to move it.
Do
- Show the total length and what is still open.
- Keep move buttons on every card so drag is never the only way.
- Say on a failed shot whether it was charged.
Avoid
- Do not turn it into a multitrack timeline. Order, status and length are enough.
- Do not use lime for finished shots. Lime marks only shots the AI is making now.
- Do not use amber except for shots where a person must pick a take.
On a phone
- A sideways strip that snaps to each card.
- Move buttons grow to 44px on touch, so reorder never needs a drag.
- The drag hint is hidden on small screens; the buttons are the way to move.
Seen in products
- Google Flow Scenebuilder arranges clips, reorders them and trims each start and end with handles.
- HeyGen's storyboard lets people rearrange scenes by dragging them left or right, with a total length, without a traditional editing timeline.
- Runway Studio added trimming, stitching, reordering and exporting in June 2026.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| shotsrequired | SceneShot[] | none | Shots in order: id, label, prompt, durationSec, status, poster, note. |
| onReorderrequired | (shots: SceneShot[]) => void | none | Called with the new order after a move or drop. |
| onAdd | () => void | none | Adds a shot at the end. Leave out to hide Add shot. |
| onOpen | (id: string) => void | none | Opens a shot to pick a take or trim it. |
| title | string | "Scene" | Heading of the strip. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Level of the heading. |
| className | string | none | Extra classes. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- empty
- No shots yet: a short line and Add shot, so the first step is obvious.
- generating
- A shot whose take is being made shows the lime working mark and the word Generating, because the AI is doing it.
- pick a take
- A shot with finished takes but none chosen is marked in amber with Pick a take, because a person has to choose.
- did not work
- A failed shot says so in words, with a note such as Not charged, and stays in its place.
- reordering
- Drag, Move earlier and Move later, or Alt with an arrow key on a focused card. Each move is announced, and focus stays on the moved card.
- phone
- Under 640px the strip scrolls sideways and snaps to each card; the move buttons grow to 44px.
Tokens
Change one of these and every part that uses it follows.
--surface--surface-sunken--border--fg--fg-muted--lime--attention--attention-fg--radius-card--radius-control--dur-fast
Built in
- Shots are an ordered list. Each card is focusable and named with its position, name, status and length, for example "Shot 2 of 5: Ferry leaves, pick a take, 8 seconds".
- Alt with an arrow key moves the focused card, and focus stays on it.
- Every card has Move earlier and Move later buttons named with the shot; at the ends they turn off and focus moves to the other button.
- Each move is announced once: "Ferry leaves moved to position 1 of 5."
- Status is written in words with an icon or dot, never colour alone. The total length is also read in words.
What you need to do
- Keep the order saved as it changes, so nothing is lost when the person leaves.
- Set note on a failed shot to say whether it was charged.
- Use onOpen to show the shot's takes or trim it, in a Sheet on a phone.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide