Kinetic typography
Also searched as: motion type, animated text, kinetic type, type animation
Canonical Definition
Kinetic typography is the expressive animation of text itself — words and glyphs that move, scale, shear, or morph in rhythm with narrative meaning rather than merely labelling a shot.
15 to 30 frames per word entry (0.5s - 1.0s)
cubic-bezier(0.05, 0.9, 0.1, 1.0)
30fps or 60fps
The core distinction in motion design is between animating text and animating a text box. Sliding a paragraph container into frame is simple layout transition; kinetic typography treats the individual letters and words as dramatic subjects.
By varying weight, tracking, skew, and spatial velocity, typography can convey tone of voice, urgency, whispers, explosions, and conceptual shifts without requiring a human face on camera.
Variable Font Axes & Glyph Transforms
Morphing typographic weights and widths dynamically inside React
Modern web video leverages variable fonts to interpolate between font-weight (100 to 900) and width axes (75% to 125%) on frame ticks.
Instead of switching font files, letters breathe and expand seamlessly to underscore punchlines or climaxes.
How this works: Font weight cascades rhythmically through a wordmark using a sinusoidal frame offset.
- Real-time variable font axis interpolation (`wght` & `wdth`)
- Phase-shifted glyph animations
- Zero bitmap pixelation at 4K resolution
Synchronized Word Swaps & State Transitions
Replacing contrasting concepts on a single lockup
When contrasting options (e.g. 'Old Way' vs 'Automated Way'), the surrounding sentence remains fixed while the key noun swaps with a vertical flip or match cut.
This compositional economy directs 100% of viewer attention to the changing variable.
How this works: A headline maintains fixed anchor points while alternating keywords pop vertically with motion blur.
- Fixed anchor point alignment
- Masked container preventing overflow into adjacent text
- Damped spring settlement
Engineering Guidelines & Common Pitfalls
Best Practices (What to do)
- Keep the reading anchor point steady: don't let the eye jump across the four corners of the screen to read one sentence.
- Match the motion curve to the phonetics: sharp plosives ('P', 'T', 'K') demand immediate snaps; soft vowels allow gentle eases.
Common Failure Modes (What to avoid)
- Uniform timing across all phrases: if every word enters with the exact same 15-frame curve, it reads like a mechanical preset.
- Excessive rotation and 3D tumbling that sacrifices instant legibility.
Working catalog implementations
Typed Remotion components ready to drop into code.
Kinetic Type Swap
A held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option.
Weight Wave
A crest of thickness travels along a headline: each character swells from light to black and leans forward as the wave passes, driven by the wght and slnt variable-font axes rather than by transforms.
Variable Axis Type
A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat.
Build kinetic typography in Animatiq
Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.
Related motion principles
Word-level captions
Word-level captions are subtitles timed to individual words rather than full phrases, where each word dynamically scales, highlights, or enters at the exact millisecond it is spoken.
Motion FundamentalsEasing & easing curves
Easing is the rate at which an animated value changes over time — the mathematical curve defining whether motion accelerates, decelerates, or maintains mechanical constant velocity.
Text & IdentityTitles & brand sequences
A title card is a full-frame graphic presentation of text and identity, used to establish narrative premises, demarcate chapters, or deliver memorable closing statements.