Typography in motion
typography-in-motion · by Paraplex
Type that animates: hierarchy first, how to split (word for reading, character for texture, line for paragraphs), which reveal says what, exits, tracking and leading in motion, the Apple caption grammar. Load for titles, captions, kinetic type.
Typography in motion
Type is read, not looked at. Every motion on it either helps the reading — sets the order, gives the eye a place to start, holds still long enough — or fights it. The test is simple: can a first-time viewer read it once, at speed, without wanting to rewind?
Hierarchy first
Decide what is read first, second, third before anything moves. The headline arrives first and holds; the supporting line arrives after it has been read (0.4–0.8 s later), smaller and quieter; a label or eyebrow can arrive before the headline only if it is tiny. Never animate two lines of equal weight at once.
How to split
- By word for anything read: headlines, taglines, captions. Words are the unit of reading, and a word-stagger of 40–80 ms feels like speech.
- By character for texture and emphasis: a single short word slammed in, a logo, a decode, a typewriter. Character staggers are 15–35 ms; more than ten characters and the total gets long, so shrink the step.
- By line for paragraphs, lists, lyrics: 80–150 ms per line, arriving from below a mask so the lines seem printed in place.
- Never animate body copy per character. Nobody reads a paragraph one letter at a time.
What each reveal says
| Reveal | What it says | Use it for |
|---|---|---|
Blur in (blur, blur-line) | calm, premium, focused | captions, product lines, Apple-style claims |
Soft rise (soft-rise, fade) | quiet arrival | supporting lines, credits |
Mask rise / wipe (mask-rise, mask-wipe) | printed, editorial | paragraphs, lists, section titles |
Tracking in (tracking-in) | luxury, a title card settling | one or two words in caps, wide-set |
Stomp / punch (stomp, stomp-lines, punch) | loud, kinetic, one word at a time | a claim, a number, a beat-synced word |
Pop / scale (pop, scale-in, bounce, drop) | playful, physical | short words, badges, playful brands |
Flip / tumble / spin (flip-in, tumble, spin-in) | mechanical, a switchboard | counters, departure boards, changing words |
Decode / glitch (decode, glitch-in) | technical, digital | product names, code, sci-fi |
Typewriter (typewriter) | being written now | a prompt, a message, a terminal — with typeHead and accentColor the last letters land red |
Scatter (scatter, stagger from random) | letters converging from everywhere, energetic | a one-line claim, a name |
Tinted landings (tint-in, tint-rise, step-in) | each unit arrives in the accent and settles | claims with a brand color; step-in with a gray accent for words stepping in dim to bright |
Slide (slide-up, slide-down, slide-left, slide-right) | plain motion | captions, list items |
One reveal family per piece, two at most (a headline family and a caption family). Mixing four is the most common way kinetic type looks amateur.
Exits
Type leaves faster than it came, and usually the same way reversed or more simply: a blur-in leaves by blur, a mask-rise drops back under its mask, a stomp just cuts or fades. Exits at 0.6–0.8× the entrance duration, with the stagger reversed (last word leaves first) or from the center. Set the exit to end 0.1–0.2 s before the next thing arrives so the frame is clear for a beat.
Tracking and leading in motion
Tracking that opens (letters spreading) reads as settling and luxury; tracking that closes reads as focusing. Keep the change under 10% of the em, and never animate tracking on body copy. Leading should not animate at all — lines should arrive at their final leading, or the paragraph breathes and the reader loses the line.
The Apple caption grammar
Blur in by word, 0.5–0.7 s per word with a 60–80 ms stagger; hold for two seconds plus a quarter second per word; blur out slightly faster, together or from the last word. White or near-white on a dark, quiet background; one weight; generous tracking; nothing else moving while the caption is on. Depth stays flat (text is flat by default here); a soft shadow only if the background is busy.
Sizing and legibility
A headline should span 50–70% of the frame width; a caption 30–45%. Below about 3% of the frame height a word is not readable in motion. Keep contrast high while moving — motion lowers legibility, so a line that reads at rest on a mid-gray may not read while it blurs in.
Paraplex recipes
Apple caption:
add_textwith the line, fontSize about 0.4 of the frame height for a caption, depth flat (the default).set_text_animationref "Caption", preset "blur", split "word", stagger 0.07, duration 0.6, exitPreset "blur", exitStart (when it should start leaving), exitDuration 0.45.- Hold: leave 2 s plus 0.25 s per word between the last word landing and exitStart.
Editorial headline over a paragraph:
- Headline:
set_text_animationpreset "mask-rise", split "word", stagger 0.06. - Paragraph, 0.5 s later:
set_text_animationpreset "mask-rise", split "line", stagger 0.1, duration 0.5. - Both flat, one typeface, the paragraph at 40% of the headline size.
A stat that lands: set_text_animation preset "stomp", split "word" on a two-word line ("2.4M users") with stagger 0.12, then set_counter on the number if it should count up.
A product name decoding: set_text_animation preset "decode", split "char", stagger 0.03, duration 0.6; a glitch-in on a technical brand, never on a warm one.
A styled title in one step: apply_text_style (neon, chrome, outline, soft…) and then the reveal; a style is a surface, the reveal is the motion — set both.
A word that changes in place: set_text_swap ref "Word", preset "roll", words ["motion", "timing", "feeling"], every 0.6 — each new word rolls up through the old one's line a glyph at a time, both at once, in about a fifth of a second. preset "retype" for a search field or a prompt changing its query (backspaced from the end, a beat, then typed with a caret; give it about 0.1 s a letter); preset "code" for ROTATING PHRASES — a left-aligned text whose words are whole phrases sharing a lead, with hold 1.4, transition 0.6 and repeat true: the lead holds while the last word decodes from letters, digits and punctuation, and n × (hold + transition) seconds loops; preset "flip" for a departure board; preset "lift" or "blur" for calm captions. A character every word shares, as anchor, stays still while the rest changes around it.