TakeGrid
StableA set of video takes where running and finished takes sit together, with one combined announcement, keyboard moves, and empty and loading views.
Also known as takes grid, video grid
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Four takes arriving
0 of 4 takes ready, 4 still working.
Arrow keys move between takes. Enter opens a finished take. Space selects it.
Take 1
Generating
8 secondsReel 2Ratio 16:9
Estimated 20 credits
Take 2
Generating
8 secondsReel 2Ratio 16:9
Estimated 20 credits
Take 3
Queued
8 secondsReel 2Ratio 16:9
Estimated 20 credits
Take 4
Queued
8 secondsReel 2Ratio 16:9
Estimated 20 credits
const [value, setValue] = useState<string[]>([]);
const [density, setDensity] = useState<TakeGridDensity>("comfortable");
<TakeGrid
label="Harbour opening takes"
takes={takes} // TakeCard props, kept up to date from your job service
mode="select"
value={value}
onChange={setValue}
ratio="16:9"
density={density}
onDensityChange={setDensity}
showDensityControl
onOpen={openInPlayer}
/>Press Next update to move the jobs along. The summary line changes only when a status changes, and it is the only thing spoken. Try the arrow keys, Enter, Space, and the = and - keys while a take has focus.
When to use it
Lets people watch several takes arrive and choose between them, without the page jumping or a screen reader talking over itself.
Made of: Summary line (live region) · Selected count · Tile size control (optional) · Group heading (prompt) · Take cards · Still placeholders (loading) · Empty state
Use it for
- The results area of a video studio, with takes from one or more prompts.
- Choosing the one take to keep, in pick mode.
- Choosing several takes to download or delete, in select mode.
Not for
- Generated images or text options: use VariantGrid.
- A gallery of uploaded or finished images: use MediaGrid.
- The versions of one take: use TakeVersions.
Do and avoid
2 of 2 takes ready. 1 picked.
Arrow keys move between takes. Enter opens a finished take. Space picks it.
Take 1
Ready, selected
6 secondsReel 2Ratio 16:9
Charged 20 credits
Take 2
Ready
6 secondsReel 2Ratio 16:9
Charged 20 credits
2 of 2 takes ready. 1 picked.
Arrow keys move between takes. Enter opens a finished take. Space picks it.
Version 1
Ready, selected
8 secondsReel 2Ratio 16:9
Charged 20 credits
Version 1, extended
Ready
12 secondsReel 2Ratio 16:9
Charged 10 credits
Do
- Add each take to the grid as soon as it is requested, so its place never moves.
- Keep one ratio per grid.
- Group by prompt when one session runs several prompts.
- Use pick mode when the next step needs exactly one take.
Avoid
- Do not let every card speak. The grid already speaks one summary.
- Do not shimmer every pending tile. The working edge on each running take is enough.
- Do not autoplay takes in the grid.
- Do not paint the grid lime. Lime is only for the working edge and the AI label.
On a phone
- Columns follow the grid's own width: one column for wide takes on a phone, two for tall 9:16 takes.
- Small tiles hide the prompt and lineage, so the name, status and charge still fit.
- Every button and select control has a 44px tap area on touch screens.
Seen in products
- Google Flow: a grid of takes with Shift-click to select several, Enter to open, = and - to change grid size.
- Google Flow: pending and error cards stay in the grid where the result will land.
- Midjourney video: several takes per request, shown together.
- Google Flow Help, Create videos in Google Flow (opens in a new tab)
- Google Flow Help, Edit videos & build scenes (opens in a new tab)
- Google Flow Help, Manage your Google Flow credits (opens in a new tab)
- Google Flow Help, Keyboard shortcuts (opens in a new tab)
- Midjourney docs, Video (opens in a new tab)
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| takesrequired | TakeGridItem[] | none | TakeCard props for each take, plus an optional request for grouping. |
| mode | "pick" | "select" | "select" | pick chooses one finished take. select chooses several of any status. |
| valuerequired | string[] | none | Selected take ids. |
| onChangerequired | (ids: string[]) => void | none | Called with the new selection. |
| ratio | "16:9" | "9:16" | "1:1" | "4:3" | "21:9" | "16:9" | One ratio for every tile. 9:16 gets more columns. |
| groupBy | "request" | "none" | "none" | A heading per prompt, from each take's request. |
| density | "comfortable" | "compact" | none | Tile size. Controlled when onDensityChange is passed. |
| onDensityChange | (d: TakeGridDensity) => void | none | Called by the tile size control and the = and - keys. |
| showDensityControl | boolean | false | Shows Large and Small above the grid. |
| onOpen | (id: string) => void | none | Opens a finished take, from Enter or its poster. |
| loadingCount | number | 0 | Draws this many still placeholders for takes on the way. |
| empty | ReactNode | none | Replaces the default empty state. |
| label | string | "Takes" | Accessible name of the grid. |
| shortcuts | boolean | true | The = and - keys change tile size while focus is in the grid. Set false to turn them off. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Level of group headings. Take names sit one level below. |
| className | string | none | Classes for the outer box. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one TakeGrid switches all of this from its properties panel, across 40 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Ratio | ratio | 16:9, 9:16, 1:1, 4:3, 21:9 |
| Group by | groupBy | Request, None |
| Density | density | Comfortable, Compact |
| Show density control | showDensityControl | On or off |
| Ratio | ratio | Any text |
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 takes and no loadingCount: an EmptyState that says how to start.
- loading
- loadingCount: still placeholders at the grid's ratio, with a hidden Loading line.
- mixed
- Running and finished takes together; the summary counts each kind.
- selected
- value: selected takes show a check mark and the selected count.
Tokens
Change one of these and every part that uses it follows.
--surface--surface-sunken--border--fg-muted--dur-base--ease-out--touch-target
Built in
- The grid is a named group. One polite status region gives the summary, such as 2 of 4 takes ready, 1 take blocked, not charged. It changes only when a status changes.
- Each take is an article and one tab stop for the grid. Arrow keys move between takes, Up and Down keep the column, Home and End jump.
- Enter opens a finished take. Space selects or picks it. A hidden hint on each take says so.
- The = and - keys change tile size only while focus is in the grid and never inside a text field. Turn them off with shortcuts={false}.
- Buttons inside each take (Play, Cancel, Try again, More) stay in the Tab order.
- Group headings are real headings. New takes fade in with a short stagger, and appear at once under reduced motion.
What you need to do
- Give the grid a label that names the work, such as Harbour opening takes.
- Keep each take's status and charge up to date from your job service; the summary follows.
- Offer a visible way to change tile size if people rely on it, with showDensityControl.
- Move focus to the player when onOpen opens one, and back to the take when it closes.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide