Kinetic Typography
Also called: Motion Typography, Animated Type, Type in Motion
Type is the moving image: headlines reveal letter by letter, weights breathe on a variable font and marquee bands scroll — with a calm static fallback.
Design keywords
Say these words to ask for this style.
Kinetic Typography makes the words themselves the animation. Headlines rise in letter by letter, a variable display face pulses between hairline and black weights in a slow wave, and huge outlined lines of text scroll as marquee bands between sections. Everything else is quiet — a near-black stage, off-white type, one violet and one coral highlight, soft pill controls — so the motion reads as choreography rather than noise. Every effect sits behind prefers-reduced-motion and degrades to crisp static type.
Best for
- Launch and campaign pages
- Music, film, festivals and events
- Agency and studio showreels
- Editorial features with one big idea
Avoid for
- Long reading or documentation pages
- Audiences sensitive to motion (vestibular disorders) without a reduced-motion path
- Forms and checkout flows where motion distracts
✓ Do
- Reveal one headline at a time (32ms stagger per letter — per word in Thai — and 900ms per unit on cubic-bezier(.16,1,.3,1)); only the hero wave, the two marquees and the feature-index swell (while in view, with the hero wave paused) loop
- Use a true variable font and animate font-variation-settings (hero wave wght 800 ↔ 220, index swell 300 → 800), not font-weight keyframes (Latin only; the Thai fallback Prompt is static, so Thai hero headlines get a violet colour sweep instead and Thai index titles step Prompt 200 → 800)
- Wrap every animation in prefers-reduced-motion: no-preference and keep the static state fully legible
- Split Thai by word, never by character, so vowels and tone marks stay attached
✕ Don't
- Don’t animate body text or anything users must read to act
- Don’t run more than two marquees per screen (one outlined band, one slower logo row)
- Don’t clip letters with overflow:hidden reveals — it cuts off Thai tone marks
- Don’t carry the tight 1.02 headline line-height into Thai: it is for Latin only; with lang=th, hero, h1 and h2 use 1.3 and feature-index titles 1.4 so tone marks and upper vowels never collide
Not to be confused with
On mobile
Keep one kinetic moment per screen (title reveal or a ticker), never both; skip the weight wave on phones to save battery and keep the floating pill tab bar static.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.