kinetic_typography v1.0.0

name: "kinetic_typography" description: "Design animated text that people can actually read: reveal/hold/exit timing plans, reading-speed budgets (hold-time math from the 6-second rule), easing recipes matched to tone, reveal-pattern library, and motion-safety checks. Use when asked to design kinetic typography, time a title card, fix unreadable animated text, choose easing for text motion, or review a lyric video, lower third, or animated caption." metadata: { "includeInPrompt": true }

Kinetic Typography

Purpose

Make motion carry the words instead of burying them. This skill is the design layer for animated text in video: timing plans, reading-speed budgets, easing choices, and reveal patterns. It is tool-agnostic (works in After Effects, Blender, Remotion, CSS, anything). For the open-source build tooling, hand off to motion_graphics_basics.

Workflow

1. Get the script and the audience

Read the actual words first. Mark: total words, emphasis words (the 1-3 the viewer must leave with), and who is reading (general audience, kids, second- language viewers; slower readers need more hold time). If the text is longer than a sentence, cut it before animating it: one idea per beat, never a paragraph animated all at once.

2. Budget the hold time

Use bin/hold_time.py to compute each beat's timing. The math behind it (references/timing-and-reading-speed.md):

• Reading budget: the subtitling industry's 6-second rule holds a full two-line subtitle for 6 seconds, about 12 characters per second or 140-150 words per minute. For animated display type, which is larger but competes with motion, hold each completed phrase at least chars / 12 seconds, with a floor of 0.5 s for anything under 6 characters. Kinetic type that disappears faster reads as a flash, not a message.
• Three timed states: every beat gets reveal → hold → exit. Time by attention, not just seconds: what is the viewer looking at before the text appears, what competes with it, what audio beat justifies the motion, and what must be understood before the next cut.
• Beat grid: sync reveals to the audio. Voiceover phrases land on their spoken beat; music lands on phrase boundaries and downbeats. If there is no audio, set your own steady beat and never break it.

Example run:

$ python3 bin/hold_time.py --text "Machines dream in color" --fps 30
phrase: "Machines dream in color"  words: 4  chars: 23
reveal: 12 frames (0.40s)  hold: 58 frames (1.93s)  exit: 12 frames (0.40s)
beat total: 82 frames (2.73s) @30fps

3. Pick the reveal pattern

One pattern per sequence; consistency keeps it readable (references/reveal-patterns.md):

• Word cascade: words appear one at a time along the beat, left to right. The default for statements. Stagger entrances so motion flows through the phrase instead of firing all at once.
• Emphasis pop: calm base text, then the keyword scale-pops or color-hits. Motion on the emphasis word, decoration on nothing else.
• Line wipe / mask reveal: text revealed by a moving edge or mask. Good for section headers and transitions.
• Typewriter: character-by-character for quotes, code, or chat-style content. Keep it fast (2-3 frames per character) or it drags.
• RSVP burst: single words in a fixed position, one idea per flash. Fastest delivery, highest attention demand; use sparingly and never for more than a few beats.

4. Choose easing that matches the tone

• Default: ease-out on entrances (fast start, soft landing), ease-in on exits. Never ship linear interpolation on visible motion; it reads as robotic.
• Semantic easing: sharp words hit harder (snappier curve, slight overshoot), soft words settle gently (longer ease-out tail), heavy words land lower and slower. See references/easing-recipes.md for the curve table.
• Entrances carry the energy, holds carry the message. During the hold, nothing moves except what aids reading: a subtle underline draw or a highlight sweep. Cutting a phrase early is the most common kinetic-type failure.

5. Keep it readable at speed

• Hierarchy through size, weight, and color, not fonts. Two weights of one family beats five families. Sans-serif holds up best in motion; script typefaces fall apart when moving.
• Contrast: white or near-white type on a dark translucent backing, or dark type on light. Test on the actual background, not on transparency.
• Title-safe: keep content inside a ~5% inset from each edge.
• Preserve reading order. Expressive motion must make the phrase clearer, not harder to parse.
• If the text is moving across the frame while being read, slow it down or stop it: the eye cannot track and decode at the same time.

6. Run the safety checks

references/motion-safety.md:

• Flashing: nothing flashes more than 3 times per second (WCAG 2.3.1, Level A). Avoid rapid saturated-red transitions regardless of luminance.
• Rest: balance motion with stillness. Long runs of constant animation exhaust viewers; plan static beats.
• Pause control: wherever the medium allows it, honor reduced-motion preferences and give viewers a way to pause or skip animated text.

Output Contract

• A timing plan: for each beat, the phrase, reveal/hold/exit frames, the pattern, the easing, and the audio beat it lands on (or "no audio, 2s grid").
• The bin/hold_time.py output attached or quoted as the arithmetic behind the plan.
• A readability verdict: pass (holds meet the budget, pattern is consistent, order preserved) or fail with the specific beats that need more hold time.
• No invented numbers: every timing claim traces to the plan or a cited source.

Operating Rules

1. Cut the text before animating it. If a beat has more than ~10 words, split the beat, not the reading.
2. Holds are computed, not guessed. Run the calculator; adjust up for slow readers, never down for style.
3. One reveal pattern per sequence. Two patterns max per video, and only at a section boundary.
4. No linear interpolation on visible text motion.
5. Every published plan passes the motion-safety checks in references/motion-safety.md.
6. Tooling questions (how to keyframe this in Blender, how to render with alpha) go to motion_graphics_basics. This skill owns design decisions only.