Kinetic Typography
also known asmoving type · animated typography · motion typography · kinetic text · type in motion
Type that moves — words and letters animated as the primary visual element of a screen, not as decoration around static type.
Kinetic typography treats letterforms as objects with motion: words slide, scale, rotate, mask, split, and recombine in time with rhythm or scroll. Instead of an image carrying the visual weight while text labels it, the type itself is the show — the page often has no other major visual.
On the web it shows up in three main places: hero sections where a headline reveals one word at a time, scroll-driven sequences where phrases pin and morph as the user scrolls, and looping marquees where a single phrase recomposes itself on a beat. The technique is heavily associated with motion-design studios, fashion launches, music releases, and conference sites that want to feel alive without leaning on stock imagery.
Good kinetic typography is choreographed, not just animated. Every move has an easing curve, an in/out duration, and a relationship to the next move. The motion serves the meaning of the words — `expand` actually expands, `cut` actually cuts. Bad kinetic typography is a string of fade-ins on every word, which reads as a slow page rather than a designed sequence.
Originated in title sequences for film and television — Saul Bass in the 1950s, then Kyle Cooper's Se7en titles in 1995 — and migrated to the web as browser performance and CSS/SVG animation matured in the late 2010s.
- Hero sections for studios, agencies, fashion, music, events
- Scroll-driven storytelling where text is the narrative
- Loading and transition states between scenes
- Brand films and product launches embedded in pages
- Dense product UI — motion on every label is exhausting
- Long-form reading — animated body copy slows comprehension
- Anywhere the user needs to scan quickly (search, settings, tables)
- +Choreograph the sequence — every move has a purpose and an easing curve
- +Match the motion to the meaning of the word
- +Respect `prefers-reduced-motion` and provide a static fallback
- +Keep total sequence length under ~6 seconds for hero use
- −Don't animate every word on the page — pick the moments that matter
- −Don't loop fast motion behind body copy
- −Don't replace meaningful copy with motion — words still need to be readable
Build a kinetic typography hero in React using Framer Motion + Tailwind. Structure: a full-viewport `<section>` (h-screen, flex items-center justify-center, dark background like #0A0A0B). Inside, render a single phrase of 3 words (e.g. "Design / In / Motion") wrapped in a flex container with controlled gap. Motion (Framer Motion): - Word 1: `clipPath` reveal from `inset(0 100% 0 0)` to `inset(0 0 0 0)`, duration 0.6s, ease [0.16, 1, 0.3, 1]. - Word 2: vertical mask — wrap in `overflow-hidden`, animate `y` from 100% to 0%, duration 0.5s, delay 0.25s. - Word 3: scale-in from 0.7 to 1 with opacity 0 → 1, duration 0.55s, delay 0.5s, same ease. - Loop: after 4s hold, reverse the sequence and restart (or use `repeatType: 'mirror'`). Typography: a heavy display font (Söhne Breit, Migra, Editorial New) at clamp(64px, 12vw, 220px), tracking -0.04em, line-height 0.9, color #FAFAFA. Accessibility: wrap the animation in `useReducedMotion()` — if true, render the final composed phrase statically with no motion. Acceptance: each word enters with a visibly different motion technique. Total intro under 1.2s. Choreographed, not just "fade in everything".
Paste into Claude Code, Cursor, or Lovable to apply kinetic typography to your project.
People also ask
What's the difference between kinetic typography and a text animation?
A text animation is one effect on one piece of text (a fade-in, a typewriter). Kinetic typography is a choreographed sequence where multiple typographic moves play in time with each other — closer to a title sequence than a UI transition.
Is kinetic typography bad for accessibility?
It can be. Always honor `prefers-reduced-motion` and provide a static composition that still communicates the same message. Keep contrast high during motion and avoid rapid flashing.
What tools build kinetic typography for the web?
GSAP and Framer Motion handle most cases on the web; for scroll-driven sequences, GSAP ScrollTrigger or the native View Timeline API. Designers often prototype in After Effects first, then rebuild the timing in code.