Type arrives in sequence or it does not arrive
Text in a cutscene gets an opacity ramp because that is what is available in one line. It works, in the sense that the words end up on screen, and it is the difference between a title card and a slide deck.
Both halves finish at almost the same moment and both are entirely legible. The right one has an internal rhythm, so it reads as something happening; the left one reads as a state change.
The two decisions that carry it
Stagger, and the window is narrow
The gap between letters has a usable range and it is smaller than people expect:
- Under 25ms: the eye fuses it. Identical to a single fade, so the work is wasted.
- 40 to 80ms: reads as one word arriving with structure. This is the target.
- Over 120ms: the word stops being a word and becomes four separate events, which is slow to read and hard to sit through twice.
The reason is the same roughly 100ms temporal integration window that governs how a flash reads. Inside it, things fuse. Outside it, they are separate.
Which also gives the scaling rule: stagger per letter for short titles, per word for sentences. Four letters at 60ms is 240ms and feels immediate. Forty letters at 60ms is two and a half seconds of watching text assemble, which nobody wants.
A settle, not a ramp
A linear or eased fade says an opacity value changed. A damped oscillation says an object arrived and stopped:
float e = 1.0 - exp(-6.5*u) * cos(9.0*u);An exponential envelope times a cosine, which is the standard damped spring. The exponent sets how fast it settles and the cosine frequency sets how many times it overshoots. One visible overshoot is right for type; two reads as bouncy and belongs to a different tone.
Give it a small position offset to settle into, sixteen hundredths of the cap height here. Scale works too. Rotation almost never does, because rotated type is harder to read and the whole point is to be read.
Where it goes wrong
- Animating while the viewer is reading. Motion during reading measurably costs comprehension. Get the text still fast, then let it sit. All the movement belongs in the arrival, none in the hold.
- Staggering per letter on a sentence. Correct at four letters, unbearable at forty. The unit of stagger scales with the length of the text.
- Fading out with the same care as the fade in. Exits should be faster and simpler than entrances. Nobody is reading it any more.
- Making the type glow and then animating the glow. The glow's edge is the thing the eye tracks, so animating it fights the letterform. Animate the letter and let the glow follow.
- Forgetting it will be read in another language. A stagger tuned to a four letter word is a different duration in a language where that word has eleven letters. Time the animation on the word count, not the letter count, if it will be localised.
Why field type is worth the trouble
A glyph as a distance field is a set of strokes with a shared radius, which means the weight is a uniform. That gets you a variable weight axis for free, an outline at any thickness, a glow that is correct at any size, and a per-letter dissolve or shatter using the same field the letter is made of. None of that is available from a texture atlas without a second asset.
The cost is that a real typeface is not a handful of segments, and hand-building glyphs stops being reasonable somewhere around a title card. For body text the answer is a glyph atlas or a curve renderer, not this.
Rules of thumb
- Stagger 40 to 80ms. Under 25 fuses into a plain fade, over 120 becomes separate events.
- Per letter for titles, per word for sentences. The unit scales with the length.
- Settle with a damped spring, not a linear ramp. One overshoot, not two.
- All motion in the arrival, none during the hold. Movement while reading costs comprehension.
- Exits are faster and simpler than entrances.
- Time it on word count if it will be localised, or the pacing changes with the language.
One email when something new goes up. No newsletter, no schedule, nothing else.
Double opt-in, so watch for a confirmation email. Unsubscribe any time.