Put text in motion the right way — title cards, animated captions, lower-thirds, callouts, and word-by-word reveals — with a reading-time-per-word budget so copy holds long enough to read, plus enter/exit timing, weight and size transitions, and type hierarchy in motion. Use when someone asks to "animate this text", "make a title card", "animated captions/subtitles", "kinetic typography", "animate the headline", "lower-third", "word-by-word reveal", "text that pops in", or "how long should this line stay on screen". Do NOT use when the question is the cut, pacing, or easing curve of non-text motion — use motion-design-principles instead; do NOT use to plan which scenes or shots exist — use video-storyboard instead; do NOT use to resize or crop a caption track for a specific platform (9:16 TikTok, 1:1 feed) — use social-video-formatter instead; do NOT use for the color, contrast, or lighting of the type against its background — use motion-color-and-light instead.
Click to play with sound.
---
name: Kinetic Typography
description: Put text in motion the right way — title cards, animated captions, lower-thirds, callouts, and word-by-word reveals — with a reading-time-per-word budget so copy holds long enough to read, plus enter/exit timing, weight and size transitions, and type hierarchy in motion. Use when someone asks to "animate this text", "make a title card", "animated captions/subtitles", "kinetic typography", "animate the headline", "lower-third", "word-by-word reveal", "text that pops in", or "how long should this line stay on screen". Do NOT use when the question is the cut, pacing, or easing curve of non-text motion — use motion-design-principles instead; do NOT use to plan which scenes or shots exist — use video-storyboard instead; do NOT use to resize or crop a caption track for a specific platform (9:16 TikTok, 1:1 feed) — use social-video-formatter instead; do NOT use for the color, contrast, or lighting of the type against its background — use motion-color-and-light instead.
---
# Kinetic Typography
Text in motion has one job before it has any other: it must be readable. The most common failure in animated type is not ugliness, it is text that flashes past before the viewer finishes the first word, or text that animates so much the eye chases the motion instead of reading the words. This is the craft layer. It decides *how long every line stays, how it enters and leaves, and what is allowed to move* — and hands a concrete frame budget to `remotion-compose`, which writes the React/TypeScript that actually renders it.
The governing rule: **animate to serve the read, never to decorate it.** Motion earns its place only when it directs the eye, establishes hierarchy, or marks a beat. Everything below enforces that.
Work one running example throughout: a 16:9 product title card reading **"Ship video in one prompt"** (5 words), at 30fps, plus an animated lower-third caption track underneath.
## Workflow
Run these in order. Do not pick an entrance animation before you have the hold budget — the budget is what tells you whether you even have room to animate.
### Step 1 — Compute the reading-time-per-word budget first
Text must stay on screen long enough to read at a relaxed pace, *plus* the time its entrance and exit consume. Budget hold time before you touch any animation.
- Baseline reading speed for on-screen video is slower than print: assume **~3.5 words/second** read comfortably (≈ 200 wpm). Caption/subtitle convention is similar — never drop below ~0.3s of readable hold per word.
- **Minimum on-screen hold = words ÷ 3.5 seconds**, with a **floor of 0.8s** for any line (even a single word needs a beat to register) and a **+0.3s tax** for unfamiliar terms, numbers, or names the eye cannot predict.
- Entrance and exit time is *additional* — it does not count as reading time, because the text is not fully legible mid-transition. Total slot = entrance + hold + exit.
Sign in to rate and review this skill.
No reviews yet. Be the first to review this skill.