Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $169 onceUpgrade
Lookbk
Sign In
Effect guide

Kinetic typography for video and the web

Words that move, land and hand over to the next line in time with a beat. How kinetic type is timed, an animated headline you can paste into a page, and skills that render title drops and moving type posters.

See the 2 skills that build it

Free skills to start. Pro is $79 a year for every skill, or $9.99 a month for 10. See pricing

Written for

Claude CodeCodexCursorGitHub CopilotGemini CLIOpenCode
and 25 more

What is a kinetic typography?

Kinetic typography is text in motion used as the main visual, not as a caption. Words slam in, slide, scale, rotate or swap places, and the timing carries the tone: snappy cuts feel urgent, slow reveals feel calm.

It is everywhere in launch videos, reels, lyric videos and openers because it needs no footage. On websites, a lighter touch of the same idea animates a headline as the page loads.

How the effect works

The unit is the beat. Pick a tempo, say 120 beats a minute, and every half second something happens: a word arrives, a line swaps, a letter flips. Moves that land on beats look deliberate; moves that drift between them look sloppy.

Each move is an ease, not a straight line. Fast out, slow in, often with a small overshoot, so the word arrives with weight. Split the text into words or letters, give each the same move, and stagger their start times by a fixed step.

  1. 01

    Write fewer words

    Three short lines beat one long sentence. Kinetic type reads one idea per beat.

  2. 02

    Split and stagger

    Wrap each word in a span and start its animation a fixed delay after the one before.

  3. 03

    Ease with intent

    A strong ease-out, like cubic-bezier(.2,.8,.2,1), makes words land instead of float.

  4. 04

    Hold, then hand over

    Let each line sit for a beat or two before the next move, so it can be read.

HTML

A staggered headline with the Web Animations API

Splits the heading into words and lands them one by one. Screen readers get the full sentence once through aria-label, and reduced motion shows it at rest.

<h1 id="headline">Ship the launch today</h1>
<style>
#headline { font: 800 clamp(40px, 8vw, 88px)/1.02 system-ui; letter-spacing: -0.03em; }
#headline span { display: inline-block; margin-right: 0.22em; }
</style>
<script>
const el = document.getElementById('headline')
const words = el.textContent.trim().split(/\s+/)
el.setAttribute('aria-label', words.join(' '))
el.textContent = ''
const still = matchMedia('(prefers-reduced-motion: reduce)').matches
words.forEach((word, i) => {
  const span = document.createElement('span')
  span.textContent = word
  span.setAttribute('aria-hidden', 'true')
  el.append(span)
  if (still) return
  span.animate(
    [
      { transform: 'translateY(0.7em) scale(1.2)', opacity: 0, filter: 'blur(8px)' },
      { transform: 'none', opacity: 1, filter: 'blur(0)' },
    ],
    { duration: 520, delay: 160 + i * 140, easing: 'cubic-bezier(.2,.8,.2,1)', fill: 'both' },
  )
})
</script>

A starting point written for this page, free to use in your own projects. The skills below build the finished version with checks, fallbacks and a recorded video.

What to get right on a real page

  1. 01

    Time it to the music

    Set your cuts on a beat grid first, then fit the words to it. Moving a cut later to match a track never looks as tight.

  2. 02

    Check every line fits

    Big type overflows on phones and in vertical video. Test the longest line at the smallest size you will ship.

  3. 03

    Keep safe areas clear

    Reels and stories put buttons and captions over the edges of the frame. Keep words inside the safe area.

  4. 04

    Let the headline rest

    Respect prefers-reduced-motion: show one finished frame instead of the loop. A visitor who turned motion off still gets the look.

Skills that build a kinetic typography

One renders a short MP4 for reels and openers; the other is a moving type poster that runs live in a hero section.

  1. Kinetic Title Drop: an example of what it makes
    Free
    video
    Kinetic Title DropClaude CodeCodexCursor+3 more agents

    Motion Type · Free

    Kinetic Title Drop

    MP4 · 6 s · 1080p

    Free. Write three lines, pick a palette, and your agent renders a six-second, three-beat kinetic type MP4 on your own machine, with a check for timing, text fit and safe areas.

    Needs: Node.js 22+ and FFmpeg

    See what Kinetic Title Drop makes
  2. Kinetic Type Grid Hero: an example of what it makes
    web
    Kinetic Type Grid HeroClaude CodeCodexCursor+3 more agents

    Motion Heroes · Pro

    Kinetic Type Grid Hero

    Animated canvas hero · page + embed + 1080p video

    A Swiss poster that moves to a beat beside your headline: your brand word set one big letter per cell, and on every beat one move snaps through, a band of tiles turns, a row slides or tiles flip ink and paper. Halfway through the poster inverts, then every move is undone so the loop lands back on the word.

    Worth knowing: Reads best with a word of 3 to 8 letters.

    Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video

    See what Kinetic Type Grid Hero makes

Install

Build a kinetic typography with your agent

Each skill is a SKILL.md folder, so it installs the same way in Claude Code, Codex, Cursor and other agents. The example below uses Kinetic Title Drop, which is free; each skill page has its own prompt.

1. Paste the install prompt

Your agent runs the installer. The first time, it shows a sign-in link so you can approve it in the browser.

Install the "Kinetic Title Drop" skill from Lookbk (https://lookbk.dev/skills/kinetic-title-drop).
1. Run: curl -fsSL https://lookbk.dev/cli.js | node - add kinetic-title-drop
2. If it prints a sign-in link, show it to me. When I say I approved it, run the same command again.
3. When the install finishes, read the SKILL.md it installed and tell me what you need from me to make the first result.

Or run it in a terminal

curl -fsSL https://lookbk.dev/cli.js | node - add kinetic-title-drop

2. Start a new session

Agents load skills when a session starts. The installer writes the folder where your agent looks:

Claude Code
~/.claude/skills/kinetic-title-drop
Codex
~/.agents/skills/kinetic-title-drop
Cursor
~/.agents/skills/kinetic-title-drop

3. Ask for the result

Describe it in plain words, for example:

Make a 6-second kinetic title drop that says "Ship / it / today." in our brand orange, 1080p, for an X post.

Another agent? Install a skill in any agent

FAQ

Questions

Still stuck? The guides cover installing, agents and licensing in more detail.

Read the guides
What is kinetic typography?

Animated text used as the main visual of a video or page. The words move, scale and swap in time with the audio, and the timing carries the meaning.

Can I make kinetic typography without After Effects?

Yes. HTML and CSS compositions rendered by a headless browser to MP4 give frame-exact results, which is how Kinetic Title Drop works. For a page, the Web Animations API in the starter above is enough.

How long should a kinetic type video be?

Openers and title drops run 4 to 8 seconds. Reels with a message run 15 to 30. Plan about one idea per beat and a beat of rest before the logo.

Which fonts work best?

Heavy, tight sans serifs at large sizes, or a strong display face. Thin weights flicker when they move fast and scale down.

More effects and guides

What are agent skills? Browse all skills