--- 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.