How to Make AI Kinetic Typography With Claude Code

What AI kinetic typography is

AI kinetic typography is moving text that an AI coding agent plans, animates and renders for you. Wikipedia describes kinetic typography as an animation technique that mixes motion and text to express ideas, with the text presented over time to convey or evoke an idea or emotion. Its roots are in film titles. Scholars credit Alfred Hitchcock’s North by Northwest (1959) as the first feature film to use it extensively, in an opening sequence by Saul Bass.

Following Barbara Brownie’s model, the article splits the craft in two. In motion typography, words move in relation to one another. In fluid typography, the letterforms themselves change without necessarily moving anywhere.

AI can produce it in two ways:

• Word-timed text over your footage. A transcript gives every spoken word a start and end time, and each word appears on its own moment. Animated captions are the simplest form.
• Fully generated typographic motion. There is no footage. The text is the whole picture, written in HTML and CSS or in Remotion and rendered frame by frame.

Text-to-video models look like a third option, but they do not guarantee that a word comes out spelled the way you typed it. How AI renders motion graphics explains that difference.

Word-timed text over your own footage

Word-timed kinetic type starts with a transcript that knows when each word was spoken. faster-whisper, an open-source transcription library, returns that timing when you ask for it. This is the example from its README:

segments, _ = model.transcribe("audio.mp3", word_timestamps=True)
for segment in segments:
    for word in segment.words:
        print("[%.2fs -> %.2fs] %s" % (word.start, word.end, word.word))

Claude Code runs this on your audio and saves the words with their times. Multiply a start time by the frame rate and you have the frame where that word should land. From there, Claude writes a script that decides, for every frame, which words are on screen and where each one is in its animation: entering, holding or leaving. Most AI kinetic typography over talking-head footage is built this way.

There are three common ways to draw the words:

• HTML and CSS, captured by a headless browser. Playwright’s omitBackground screenshot option hides the default white background so the capture keeps its transparency (it does not apply to JPEG). ffmpeg’s overlay filter then lays those frames over your video.
• ffmpeg alone. The drawtext filter draws text on top of a video using the libfreetype library, and the ass filter renders Advanced SubStation Alpha subtitle files. drawtext is only there if ffmpeg was built with libfreetype and libharfbuzz enabled, so check your build before planning around it.
• Remotion. Its @remotion/captions package includes createTikTokStyleCaptions(), which groups words into short “pages” and gives every token a start and end time in milliseconds. A low combineTokensWithinMilliseconds value gives word-by-word pages.

Text can also go behind you. Using a person mask, the masthead in Cover Story slides up letter by letter, 50 ms apart, while your head sits in front of it. Glass Type drops 3D glass letters onto the wall behind you, 70 ms apart.

Fully generated typographic motion

A type-only video has no footage, so the words carry every frame. This is the text to motion graphics route: you supply the words and the brief, and Claude Code writes the motion as code and renders it.

In HTML and CSS, each word is an element with its own animation. MDN describes animation-delay as the time to wait before an animation begins, and a negative delay starts the animation immediately but partway through. Give each word a slightly later delay and you have a stagger. To render, a script pauses every animation and sets its time for each frame. MDN’s reference says Animation.currentTime returns and sets an animation’s time in milliseconds, whether it is running or paused.

Remotion works from frame numbers instead. interpolate() maps the current frame to a value, for example frames 0 to 20 to an opacity of 0 to 1. <Sequence> places a scene on the timeline, and the components inside it count frames from the sequence’s own start, so each title card can be written as if it begins at zero.

If a voiceover drives a kinetic typography video, transcribe it the same way as footage and use its word times as cue points. The text then lands on the narrator’s words without manual syncing.

Easing and timing basics

Easing decides whether moving text feels heavy, snappy or mechanical. MDN defines an easing function as a mathematical function that describes the rate at which a value changes, and CSS names the common ones:

• ease-out starts abruptly and slows towards the end. It suits words arriving.
• ease-in starts slowly, speeds up and stops abruptly. It suits words leaving.
• linear keeps a constant rate, which reads as mechanical on its own.
• cubic-bezier() defines your own curve with two control points.
• steps() makes a stair-shaped curve, so a typewriter reveal can jump one letter at a time.

Remotion’s spring() is a physics-based alternative. Its defaults are a mass of 1, damping of 10 and stiffness of 100, and a spring may overshoot its target before it settles unless you turn on overshootClamping.

Stagger is the other number to set. The free effects on this site use 50 ms between letters for the Cover Story masthead and 70 ms for Glass Type. Treat those as starting points. A rule that holds across styles: move on the way in and out, and hold still while the viewer reads.

Readability rules for moving text

Moving text only works if a viewer can read it on a phone. The W3C accessibility guidelines are written for web pages, but they make a sensible floor for video.

• Contrast. WCAG asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, which it defines as at least 18 point, or 14 point bold.
• Weight. The same guidance notes that anti-aliasing can render thin or unusual fonts much fainter than their actual colour. Heavier weights are the safer choice at phone size.
• Flashes. WCAG’s flash rule says content should not flash more than three times in any one-second period. Rapid full-frame word swaps on a bright background can cross that line.
• Fewer words at once. A short phrase that holds is easier to read than a full sentence that never stops moving.
• Edges. Keep key words away from the edges of a vertical frame, where social apps place their own buttons and captions, and check a still on your phone.

How to make it with Claude Code

To make AI kinetic typography with Claude Code, start with one short clip, a transcript and a brief with numbers. Open the clip’s folder in Claude Code and send something like this:

Transcribe input.mp4 with faster-whisper (word_timestamps=True) and save words.json.
Between 4.0 s and 9.5 s, show my words as kinetic type in the centre of the frame:
- At most 3 words on screen. Each word enters on its own start time.
- Entrance: rise 40 px and fade in over 0.25 s, ease-out. Exit: fade out over 0.15 s, ease-in.
- "[KEY WORD]" is twice the size, in #FFD84D. Other words white, heavy sans-serif, 110 px.
- Lay the type out in HTML, capture transparent frames with Playwright, overlay them with ffmpeg.
- Show me three stills and a 540×960 preview before the full render.

Then work through it in order:

1. Check words.json for misheard words. A wrong transcript word is a wrong word on screen.
2. Review the stills. Anthropic’s best-practices guide for Claude Code recommends giving Claude a check it can run, such as a screenshot to compare, so ask it to compare its stills with your brief and list the differences.
3. Watch the preview at full speed. Rhythm only shows in motion.
4. Change one thing per render.

For a ready-made look, the Fitted Captions style sets each phrase as a justified block around one huge serif italic accent word, and B-roll and Stacked Text stacks a bold sans line over a serif italic accent line. If your video also shows an app or a dashboard, AI UI animation uses the same word timing to land clicks on what you say.