Kinetic Typography
Animated text that uses motion — typewriter reveals, character-by-character entry, split-text transforms, and scale/rotation — to turn type into an expressive motion element.
Plain English
Kinetic typography treats text not as static content but as a visual performance. The words still communicate meaning, but the way they arrive, move, and leave adds a layer of emphasis and personality. A headline that assembles one word at a time feels deliberate; a subheading that fades in letter by letter feels cinematic; a counter that rolls upward feels authoritative. The technique spans a wide spectrum — at the subtle end, it is simply a word sliding up into view; at the dramatic end, it is 3D-rotated text flying through space. In product design the most common application is the text reveal on hero sections (the "rotating words" pattern where a single phrase cycles through synonyms) and animated counters on statistics. The key constraint is that motion must serve reading, not compete with it — text in mid-animation is often unreadable, so kinetic typography works best on short, high-impact phrases rather than body copy.
Technical
Word-by-word reveal: split the string on spaces, wrap each word in a <span style="display: inline-block">, then animate translateY(100%) → 0 with overflow: hidden on the parent (clip trick). Character split: same approach per character. In GSAP: gsap.from(".char", { y: "100%", stagger: 0.03, duration: 0.5 }). Framer Motion: AnimatePresence + motion.span per character with staggerChildren. CSS-only typewriter: width: 0 → fit-content with steps() timing function, combined with a blinking caret via border-right animation. Variable fonts (animation-timeline: scroll + font-variation-settings) enable weight/width morphing tied to scroll. Always wrap in @media (prefers-reduced-motion: reduce) — either disable entirely or replace motion with a simple opacity reveal.
Live Demo
Kinetic Typography
Text that moves communicates rhythm and draws attention. Choose an effect, then hit Replay.
Kinetic type works best when the motion reinforces the meaning of the words.
Usage
✓ Good usage
A SaaS hero section where the headline "Build faster for [rotating: designers / developers / teams]" crossfades the bracketed word every 3 seconds with a 400ms ease-in-out fade — draws attention to the value proposition variations without distracting from the CTA.
✗ Bad usage
A FAQ page where every answer paragraph types itself out letter by letter as the user reads — forcing users to wait for text to appear on a content-heavy page is hostile UX that creates the impression the site is loading slowly.
Recommended values
- Word reveal stagger: 60–120ms between words
- Character reveal stagger: 20–40ms between characters
- Clip reveal translateY: start at 110% (ensures no pixel bleed)
- Typewriter speed: 60–120ms per character
- Rotating word crossfade: 400–600ms fade, 2–4s hold between rotations
- Hero headline duration: total animation under 1.2s for first paint
Common mistakes
- Animating body copy — kinetic typography works for short, high-value phrases (headlines, stats, labels), not paragraphs where users are trying to read, not watch.
- No overflow: hidden clip container on the word reveal — without it, the translateY animation plays visibly outside the baseline, creating a flickering underline artifact.
- Triggering character animations on re-render instead of mount — in React, state updates that re-render the parent will re-run the stagger from character 1, making the text appear to reset constantly.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Animate the hero section headline using a word-by-word clip reveal. Split the headline string into individual words, wrap each in a <span> with display: inline-block and a parent container with overflow: hidden. Use Framer Motion: set the parent variants to staggerChildren: 0.08 and each word variant to animate from { y: "110%", opacity: 0 } to { y: 0, opacity: 1 } with duration 0.5 and ease [0.25, 0.1, 0.25, 1.0]. Trigger only on initial mount. If prefers-reduced-motion is active, skip the animation and render the headline at full opacity immediately.