Kinetic typography for headlines (code, not design school)

Kinetic typography is the single technique that separates "animated slide" from "ad." A well-timed headline reveal does more for a brand than any amount of color grading or texture work. It is also, for most teams, the hardest thing to commission — the people who do it well charge a lot, and the work does not version.

Here are five patterns I use in production, with the code that drives each. All five are tweakable, all five render to MP4, and all five take less time than a single round of After Effects revisions.

Pattern 1: The clip-reveal

The most useful single pattern in kinetic typography. Each line of text sits inside a overflow: hidden wrapper. The text starts translated 110% below the wrapper, then animates up to translateY(0) on a settle curve.

.line-wrap { overflow: hidden; }
.line { transform: translateY(110%); transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.line.in { transform: translateY(0); }

Stagger by line for editorial pacing, by word for a softer feel, by character for the most aggressive version.

Pattern 2: The masked swap

One word replaces another in place. The departing word translates up and out of an overflow: hidden container as the arriving word translates up from below into the same slot. The brain reads it as a substitution rather than a fade.

The hard part is timing: the departing word must clear before the arriving word lands. A 50ms gap between the two transitions reads as "ker-CHUNK"; no gap reads as "smooth." Pick the feel.

Pattern 3: The character bounce

Each character animates in independently — translateY, scale, or rotate — with a small per-character delay. The right delay is 40-80ms; faster reads as machine-gun, slower reads as sluggish.

The trick is to use display: inline-block on each character (so transforms work) but preserve word boundaries (so wrapping is correct). The cleanest way is JS that wraps each non-space character in a <span>:

const word = document.querySelector('.word');
word.innerHTML = word.textContent.split('').map(c =>
  c === ' ' ? ' ' : `<span class="char">${c}</span>`
).join('');

Then animate .char with a per-index transition-delay.

Pattern 4: The anticipate-and-strike

A single hero word — usually the punchline of the spot — animates in with anticipation. The character first translates up slightly (anticipation), then translates down past its target (strike), then settles. The curve is cubic-bezier(.7, -.5, .4, 1.4) — the one with negative y1 for the dip and 1.4 for the overshoot.

This is the showpiece curve. Use it exactly once per composition.

Pattern 5: The pull-quote

For longer text — a quote, a manifesto — break the line at a comma or em-dash and give each fragment its own reveal. Pair with a slow underline path-draw and an oversized opening glyph.

.quote { font-family: ui-serif, Georgia, serif; font-size: 80px; }
.quote::before { content: '"'; font-size: 200px; position: absolute; top: -40px; left: -60px; opacity: .2; }

The opening quote glyph is a visual anchor; the eye lands on it, then reads the line. This is borrowed from print typography and works for the same reason it works in print.

Two patterns, side by side

The payoff: clip-reveal and char-bounce on the same beat. Drag the slider to feel the difference between editorial and energetic.

How to pick which pattern

A pragmatic decoder:

• One headline, full screen, one line: clip-reveal.
• One word changes between cuts: masked swap.
• The headline is the moment: anticipate-and-strike.
• Long-form quote or callout: pull-quote.
• Brand wants "kinetic" vibe specifically: character bounce.

Pick one per composition. Mixing two is occasionally great; mixing three is always a mess.

Variable knobs

The same clip-reveal, in your colors. Brand timing in three knobs:

The render path

Once you like a pattern, render it. The HyperFrames playground has all five examples loaded; the After Effects comparison covers why this path is faster end-to-end than a timeline tool for headline work.

The reason kinetic typography is hard in traditional pipelines: every change is a re-export. The reason it is easy in code: every change is a re-render. If your brand iterates on the headline copy at all — and every brand iterates on the headline copy — the second pipeline wins.

See also: the three Ts of editorial motion for the principles underneath these patterns.