← ClaudeAtlas

motion-typographylisted

Use when type moves or changes over time — animated headlines, kinetic type, text transitions, animated or responsive logotypes, scroll-driven text effects, typing/counting animations, variable-font axis animation, or loading and streaming text. Also use when motion is making text hard to read, causing discomfort, or failing reduced-motion and accessibility requirements.
jpoindexter/typography-skills · ★ 1 · Web & Frontend · score 74
Install: claude install-skill jpoindexter/typography-skills
# Motion typography Type on screen is not fixed. Once type moves, it acquires a time dimension the print canon has nothing to say about — and a set of accessibility obligations that static type does not carry. ## 1. When to invoke - Animated headlines, kinetic type, text reveals or transitions. - Animated, flexible, or generative logotypes. - Scroll-driven or scroll-linked text effects. - Typing, counting, or streaming text (including LLM token streaming). - Animating variable-font axes. - Someone reports motion sickness, discomfort, or unreadable moving text. **Do not** invoke for static composition (`typography-layout-systems`) or for general UI text (`ui-component-typography`). ## 2. Required context - **What the motion is for** — meaning, feedback, continuity, or decoration. Only the first three are usually defensible. - Whether the text is **read during motion** or only before/after it. - **Duration**, and whether it loops or auto-starts. - Whether the user can **pause, stop, or skip** it. - Whether motion is **scroll-linked** (user-controlled) or **time-based** (autonomous). - Reduced-motion and vestibular-disorder considerations. ## 3. Invariant principles - **Text being read must not move.** Motion during reading defeats the saccadic process entirely — the eye cannot fixate on a moving target and cannot execute reliable return sweeps. Animate *into* a resting state, then stop. - **Respect `prefers-reduced-motion`.** Not optional. Provide a meaningful