Words and product on screen
intermediate·8 min·Markdown for agents
What this lesson teaches
Build on-screen type at a readable cadence, and drive the product UI with a cursor, typed prompts and an honest wait.
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.
Ship the fix before standup.
About 0.2 s: the median for a music film. Reads as it builds.
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 , 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 .
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 : 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 : one button or field filling the frame.
✕ Before
✓ After
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 , 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.
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.
Quick check
A prompt in your film carries the whole argument: “Find every flaky test and fix it.” How fast should it type?
In the skill
The nodes your agent reads when it does this work.
- Launch-video typeFilm type is built per word at ~0.2 s, the newest word is marked then settled, holds run 1.15-1.5 s, and statements are set at video sizes. Cadence numbers, the slam word, stamped type moves, and who owns captions.
launch-video/launch-video-type - Launch-video UI demoProduct on screen in a launch film — rebuilt UI cropped tight, a cursor big enough to read with a visible press, prompts typed at read or recognise speed, human and agent told apart, and the agent's wait stepped or cut.
launch-video/launch-video-ui-demo
Connected lessons
What this lesson builds on and leads to, across every course.