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.