Bento grids and rehearsal

Flip between the two grids. Each tile on the left is a decent cropped window. Together, they read as generated: the same signal four times.

A bento grid is one picture made of tiles. Most of its quality is decided in the tile list, before anything is drawn.

Plan it as a table

Before any code, write the plan down. One row per tile:

Then check the plan against four questions: how many tiles are UI, which one is the hero, does any tile sit beside one of the same kind, and does any string repeat?

The rules that matter most

• Not every tile is UI. About a third to a half show product screens; the rest are other kinds: a stat, a statement, an object, a diagram, a row of logos, a photo.
• One hero, two columns or two rows wide, with the richest picture.
• A UI tile shows one thing, not a window. Crop to the single component, the menu or the stepper, at real size or larger. Window chrome appears at most once in the whole grid, on the hero.
• Neighbours contrast, across and down like a checkerboard: a picture beside a number, dense beside calm.
• Say each thing once. No real string, avatar or color mark repeats from tile to tile.

A stat tile is one real number at display size, 48 to 72px, with a short lead and a one-line label. The number and its unit stay on one line. Real figures only; never "10x".

The copy goes outside the picture at page size (17 to 24px), never the 12px of the UI inside it. And give each tile its own stage at 1:1: one stage around the whole grid scales every tile's text down with it, so 15px titles render at 9px in a narrow column.

Motion gets one place to lead. Supporting tiles do one small thing once as the grid scrolls in, staggered 80 to 120ms in reading order. At most the hero tells a cursor story.

Then rehearse it

Agents check their work by reading the code back, or by taking one screenshot after everything has settled. Neither shows the frames in between, and that is where demo bugs live. Here is a toast arriving, filmed every 60 milliseconds. One frame should never ship:

That grid of frames is a contact sheet, and making one is the heart of a rehearsal: run the demo at real speed, film it, read every frame.

1. Prove the still first

   Render the opening and the payoff at both widths, next to the closest reference. Can a viewer find the focal object before any branding? Fix framing before touching motion.

2. Set the poster, then film the loop

   Film the whole loop plus the start of the next, once at the shown width and once at 390.

3. Step through every beat at 40 to 80ms

   Presses, menus, hand-offs, exits and the loop seam. A sheet sampled every second cannot show a pop.

4. Fix the largest fault first

   Framing, then hierarchy, then motion, then polish. Re-film from the top after every fix.

Some faults are never intentional, whatever the builder meant: a button cut by the crop, words under 8px from an edge, a dot within 5px of its avatar, see-through fills overlapping, a stat's unit wrapped onto its own line, a popover drifting as its list changes height, a text highlight not under the I-beam.

Stageshow automates all of this with a filming script that ends with "rehearsal passed". A clean report is necessary, not sufficient. It catches mistakes, not a dull idea. Still watch it at full speed, with reduced motion on, and after the final edit.

The fresh eye

When the film is clean and the frame still looks wrong, the builder has converged on their own blind spot. Hand the frames to a fresh-eye review: a person or a new agent who gets the frames, the checklist and the reference stills, and never the builder's plan or reasons.

Their first question: does this composition answer this product and page, or could it be any product in its category? Then a ranked list, framing first, each item a frame and a one-line fix. Finally, leave a short REHEARSAL.md beside the demo with what was checked, and what was not.

Plan our feature section as a bento grid before building anything. Give me a table: tile, span, kind, the one thing it shows, its words.
- 4–5 tiles, one hero (2 wide). Only a third to a half are UI; the rest are a stat, a statement, an object or a diagram.
- UI tiles crop to one component; window chrome only on the hero.
- Neighbours are different kinds; no string, avatar or color repeats.
- Stat tiles: one real number at 48–72px, unit on the same line.
- Copy outside the picture at 17–24px. One Stage per tile at 1:1.
Then build the hero demo and rehearse it: film the full loop at the shown width and at 390, step through every press and the loop seam at 60ms, and list each fault with its frame and fix.