# Words and product on screen

> Build on-screen type at a readable cadence, and drive the product UI with a cursor, typed prompts and an honest wait.

Module: Launch films · Level: intermediate · 8 min · https://school.agents.org.in/media/film/words-and-product

Move the slider. The same line builds word by word at whatever pace you set, and the newest word lands blue before it settles to ink.

*[Interactive demo: Word stagger from 0.05 s to 0.9 s. Try 0.2 s, then tick “Fade as a block”.]*

At 0.05 s the line is a blur; at 0.9 s it is a voice speaking slowly. Around 0.2 s it reads as it builds. That gap between words is the word stagger (The gap between one word appearing and the next when a line builds word by word. About 0.2 seconds in a music film), and in a music-only film it is the edit itself: the type is the script.

## Build words, never fade a block

A sentence faded in as one block reads as a slide. 27 of Skale's 29 films build copy per word or per letter; the two exceptions are a phrase-caption film and a CG teaser with no copy at all.

| Job | Stagger |
|---|---|
| Music film | 0.13-0.2 s (median 0.18 s) |
| Captions synced to a voice | ~0.3 s |
| One word per beat of the track | 0.4-0.5 s (Arc on Windows) |
| The type is the voice | 0.5-0.9 s |

**Mark the newest word.** 15 of 29 Skale films land each new word in an accent or a pale grey, then settle it to ink within **0.13 to 0.3 seconds**. The eye always knows where the sentence has got to.

**Hold it long enough.** After the last word, keep the line up **1.15 s** (Skale's median); acclaimed title cards stay about 1.5 s in all. That is the hold (How long a line stays on screen after its last word lands, so it can be read. About 1.15 to 1.5 seconds in launch films).

*(Elements in a list can cascade fast (around 0.05 s apart). A sentence someone has to read cannot. Don't squeeze one into the other.)*

## Size and the slam

Statements in these films are small: about **5 % of frame height**, around 54 px on a 1080 px frame. They caption the UI; they are not headlines. Body text never goes below about 20 px at 1080p.

Six of Skale's films use one slam word (One word that arrives huge, a quarter of the frame or more, holds a moment, then drops into its sentence. Used once in a film, if at all): a single word arriving huge (25-61 % of the frame), holding a few frames, then dropping into its sentence. Replit Slides holds its slam about 0.23 s, then drops it from 5× to 1× in one frame. Once per film is plenty.

## The product as a character

Now the product itself. In most films the interface is **rebuilt as vector**, not screen-recorded (22 of 29 Skale films, 11 of 18 acclaimed), then cropped tight on the one control that matters. Eight acclaimed films use a macro crop (Framing a single control, like one button or field, so it fills the frame, instead of showing the whole app): one button or field filling the frame.

  **Before (avoid):**

A full-screen recording of the app, a tiny macOS pointer wandering across it, every panel in full colour.

  **After (do this):**

The one panel rebuilt and cropped tight, an oversized cursor entering from below, colour saved for the state change.

**Colour is saved for state.** Raycast floods its dialog green only on save; Linear Agent shows colour only in issue icons.

## The cursor

A cursor appears in 17 of 29 Skale films and 11 of 18 acclaimed ones. When it does, it must read at video size.

- **Size:** the oversized cursor (A pointer drawn far bigger than on a real screen, about 7 % of the frame's width, so it reads in a video), about 7 % of the frame's width (≈134 px on a 1920 frame), or a normal pointer inside a crop cut in until it reads (Cursor 2.0 cuts about 3×).
- **Entry:** from off-frame, on one decelerating glide of 0.4-0.9 s. The tip lands on the target.
- **Press:** shrink to 0.84 over 0.1 s, back over 0.22 s. The button dips with it.
- **Exit:** off the nearest edge, or as the carrier into the next shot. Never faded out in place.
- **Cause, then effect.** Nothing starts on its own; the click causes the next beat.

## Typed prompts: read or recognise

How fast should a prompt type? It depends on its job.

| The viewer must… | Speed | Seen in |
|---|---|---|
| **read** it (it carries the argument) | ~15 characters a second | Raycast 10, Notion 3.0 12-15, Cursor 2.0 20 |
| **recognise** it (only its shape matters) | ~53 characters a second | Skale's films |
| skim title cards | 40-65 characters a second | Cursor 2.0's cards |

A 33-character prompt meant to be read types for about 2.2 seconds, then holds 1.15-1.5 s. Keys land unevenly, slower at the ends, with a little extra time after spaces.

## Human and agent, told apart

In an AI product, show who is speaking. Framer 3.0 types the human at 21 characters a second and the AI at 160 after a 0.9 s thinking state. Linear Agent gives the human a caret and resolves the agent's rows from blur 0.25 s apart. Claude Cowork sets the agent in a serif and the user in grey sans pills.

**The agent's wait is either honest stepped state or it is cut past.** Notion 3.0 steps a counter 1 → 61 while the agent works; Linear Agent simply cuts to the prompt already posted, the answer half a second later.

**Type and UI for a launch film (paste into your agent):**

```text
For every line of on-screen copy: build it per word at ~0.2 s (music)
or ~0.3 s (synced to voice), land the newest word in the accent and
settle it to ink within 0.3 s, hold 1.15-1.5 s after the last word.
Statements at ~5 % of frame height. No block fades.
Product: rebuild the UI as vector and crop to the control that matters.
Cursor ~7 % of frame width, enters from off-frame, presses (0.84 scale,
0.1 s down / 0.22 s up), exits off an edge. Prompts to be read type at
~15 chars/s. Show the agent's wait as stepped state, or cut past it.
```

**Check yourself:** A prompt in your film carries the whole argument: “Find every flaky test and fix it.” How fast should it type?

- [x] About 15 characters a second, so it can be read
- [ ] About 53 characters a second, the Skale median
- [ ] Instantly, as one block
- [ ] As fast as the agent's reply

*Why:* A prompt the viewer must read types at about 15 characters a second. 53 is for prompts that only need to be recognised by their shape.

## In the skill

- https://school.agents.org.in/skill/launch-video/launch-video-type.md
- https://school.agents.org.in/skill/launch-video/launch-video-ui-demo.md