# Cinematic shot

You are the director and the DP, not the motion designer. The film is a sequence of **hero shots**. Each one looks at a real piece of the product's UI from a steep, low angle, so close that the focal plane covers only a line or two of text and everything else melts into bokeh. The camera drifts slowly toward where the next thing will happen. The UI does the work by itself: things get typed, streamed, selected, and written while we watch. Nothing explains itself with captions.

This skill is about camera, framing, light, and the edit. Build the film with any rendering stack. Whatever you choose, make every frame a pure function of time, so the film renders deterministically and can take motion blur.

The same camera also takes **stills**: single photographs of the UI in the same look, for a hero image, a launch post, a social card, or a poster. When the user asks for images rather than a film, read section 10 first; it says which parts of the method carry over and what changes when nothing moves.

Read [references/look.md](references/look.md) for exact camera, depth-of-field, light, reveal, type, and still recipes. Read [references/shot-list-example.md](references/shot-list-example.md) for a full example of the shot grammar and a still set.

## The taste

The product floats on a stage like a slab, tilted away from the camera, lit softly where it matters. The camera is low and close, looking *along* the UI rather than at it, so lines of text run diagonally across the frame and shrink into the distance. The focal plane is a thin band: one control, one line of typing, one row of a list is sharp, and the rest is soft bokeh. The camera never stops drifting and never moves fast. Shots are long enough to watch something happen. The only colour is the product's own. Restraint everywhere else.

There are two stages, and the product's real theme picks one (section 2):

- **Dark stage**: a black void. A dark slab, lit by a soft pool that follows whatever matters and lets everything else fall into black.
- **Light stage**: a high-key studio. A white slab resting over a warm light-grey ground, separated from it by a soft cast shadow, with a gentle key on the subject and nothing falling to black. On white, the bokeh becomes a soft haze.

## 1. Find the story before the shots

Before planning a single camera, write down:

- **The flow**: the 4–7 things that happen on screen, in order. Examples: open a view, select a tab, type a prompt, watch the answer stream in, watch a document write itself, approve.
- **The payoff**: the one moment where the product visibly does something remarkable. The film exists to reach this frame.
- **The demo content**: concrete, believable data inside the UI, such as names, IDs, statuses, code, and short human-sounding text. Real-looking density is what makes a close-up beautiful. A list of twelve plausible issues reads as a product; three grey placeholders read as a mockup.
- **One line of copy**: the product or feature name, then a tagline of five words or fewer.

When you record the user's real website rather than a rebuild, build the story from what the real page actually animates (section 6), not from what a rebuild could fake.

## 2. Pick the stage from the product's real theme

Decide this before the shot list. "Keep the real UI faithful" outranks "dark slab".

- **The product has a genuine dark theme**: use the **dark stage**.
- **It is light only, or light is its primary identity**: use the **light stage**. Never fake a dark theme and never invert colours. A site's unused dark styles are not a dark theme: if forcing them breaks the page (white cards, invisible text), the product is light only.
- **It has both themes**: ask the user, or follow their brand.

Every shot in the film uses the same stage.

## 3. Write the shot list

Post the shot list before building, then keep going:

| # | Cut at | Len | Subject (what is in focus) | Scale | Angle | Move | Action |
|---|---|---|---|---|---|---|---|

Rules:

- **Length**: 45–55 s in all, with 8–10 UI shots, then the copy and the logo.
- **Shot length follows the action.** Process shots (typing, streaming, a document writing itself, a long diff) run **5–9 s**. Punctuation shots (a tab, a button, a nav item) run **2–3.5 s**. Alternate the two, so a long watch is followed by a short accent. Median about 5 s.
- **Cut on the action, not on a metronome.** There is no beat grid. Cut in when the subject is already in frame or about to arrive; the action starts within 0.3–0.8 s; hold the result for 0.5–1 s; cut while the camera is still moving.
- **One idea per shot.** A shot can contain a short chain (type → send → the reply starts) only if the camera follows one continuous thread.
- **Vary scale like an editor.** Extreme macros and macros dominate. Medium shots carry the longer process. Hold back the **wide shot** (the whole window, near-frontal) for the payoff, where it lands like a release. Return to a close-up after it.
- **Alte

…