Updated 15 November 2026
HyperFrames is the best kinetic typography generator when the words have to land on a voiceover or a beat. Describe the words and the feel in the free HyperFrames Studio app, and an AI agent animates each word to that timing as editable code, with no After Effects. Change a word or its timing later and only that word changes. Then it renders the video on your computer.
Short answer: in After Effects, Canva or Jitter you set when each word moves yourself, on a timeline. HyperFrames reads the timing from your voiceover or your music, your agent writes the motion, and the render is free.
What does a kinetic typography video look like?
Kinetic typography is text that moves to carry meaning: words that slam, roll, stack or shrink in time with a voice or a beat. We made the three films on this page with HyperFrames, each in a different style. This one is timed to a voiceover.
Made from a 9-second voice line. Each word lands as the voice says it, with times taken from the audio by npx hyperframes transcribe. Quiet words stay small; BIG ONES fill the frame.
Can you make kinetic typography in the HyperFrames Studio app?
Yes. The HyperFrames Studio app for Mac, Windows and Linux runs your agent beside a live preview and a timeline, so you watch the words land and point at what to change. Home in the app shows short moments from real videos: pick Motion graphics, choose Add as inspiration on one and type what your words should say.
Studio renders exports on your computer for free, with no watermark, and its free plan includes AI voiceovers, captions, music and sound effects, 3 AI video clips and 5 cloud exports a month. Pro is $25 a month. Studio needs a free HeyGen account. Download Studio.
How do you make a kinetic typography video with your own AI agent?
You need an AI coding agent such as Claude Code, Codex or Cursor, Node.js 22 or newer, and FFmpeg. HyperFrames is free; your agent may need its own paid plan (Claude Code is not on the free Claude plan).
- Install the HyperFrames skills in your project folder with
npx hyperframes skills update, then open your agent there. - Give the words and the feel. Put the exact words in quotes, the length and shape (for example 10 seconds, 1920x1080) and two or three feel words such as punchy or calm. Name a catalog block if you want one.
- Pick the clock. Add a voiceover file, ask the agent to make one, or add a music track. Words then land on the voice's word times or on the music's beats.
- Let the agent build and check. It writes each scene as HTML with GSAP animation, looks at still frames of its own work and fixes what it sees before it renders.
- Preview and render.
npx hyperframes previewopens the editor in your browser to scrub the timeline and change a word.npx hyperframes render --output kinetic.mp4writes the MP4.
You stay the director. Approve the words, the look and the timing, and ask for changes in plain words, such as "make SAID bigger" or "hold the last line longer".
How do you time kinetic text to a voiceover?
Get a time for every word, then start each word's move on its time. HyperFrames does both on your computer: npx hyperframes transcribe turns audio into word-level timestamps, and npx hyperframes tts makes a voiceover with a local voice model if you have none.
npx hyperframes tts script.txt --voice am_michael --output vo.wav
# a voiceover from a local model (Kokoro-82M), no API key
# first time only: pip install kokoro-onnx soundfile
npx hyperframes transcribe vo.wav
# every word with its start and end time, written to transcript.jsonOur 9-second voice line came back as 22 words. The agent starts each word's move a moment before its time, so the word is in place as it is heard:
// from transcript.json: { "text": "said.", "start": 4.8, "end": 5.44 }
tl.fromTo("#w-said",
{ opacity: 0, scale: 2.2 },
{ opacity: 1, scale: 1, duration: 0.22, ease: "power4.out" },
4.8 - 0.05);- Start the move a little early. Start a word's move 40 to 190 milliseconds before it is said, so it is already in place when it is heard.
- Keep 3 to 7 words on screen. More than that and the eye can't follow the voice.
- Hold each line long enough to read. About half a second plus 0.3 seconds a word, and the last line at least 2 seconds.
- Already have a transcript?
transcribealso imports SRT, VTT and OpenAI Whisper JSON, so captions from another tool can drive the timing.
How do you cut kinetic type to music?
Find the beats, then put each word change on one. npx hyperframes beats track.mp3 --json returns the tempo and a time for every beat. Our track came back at 130 BPM, one beat every 0.46 seconds, and every card in this film lands on a beat.
Made from a music track and five words. FASTER, SHARPER, LOUDER and BOLDER hit on the downbeats, then SHIP IT. turns into a wall of itself.
- A hit is a cut, not a slide. On the beat the word appears at full size and then settles. Easing into a hit softens it.
- Trust the beats on steady music. On calm music a beat finder can invent a pulse, so cut on the phrase changes instead.
- Give every hit a sound. A slam, a whoosh or a click on each change makes the type feel heavy. The sounds in our films were made with ElevenLabs.
Which kinetic text effects can you install?
The HyperFrames catalog has ready-made text effects that install as editable code. On 6 November 2026 it held 448 items, and more than 60 of them were text and kinetic type effects. npx hyperframes add <name> copies one into your project's compositions folder, where you change its words, colors and timing like any other file.
Block | What it does |
|---|---|
kinetic-type-swap | One word of a sentence rolls through options and locks on the last |
kinetic-center-build | Words enter from the right and push the phrase left until it locks centered |
caption-kinetic-slam | Full-screen single words from alternating directions |
char-slam-explode | Letters hold in a scatter, then slam together with a landing shake |
split-flap-board | A departure board that flips each cell to its letter |
weight-wave | A wave of boldness travels along a headline using a variable font |
typewriter | Letter-by-letter reveal with a blinking cursor |
Made from two catalog blocks, Kinetic Type Swap and Kinetic Center Build, with our own words, colors and beat times. Each one went in with one command:
npx hyperframes add kinetic-type-swap
npx hyperframes add kinetic-center-build
# or start from a whole kinetic type promo you can rewrite
npx hyperframes init my-video --example kinetic-typeFor a longer piece, Fadeglow is a lyric music video made with HyperFrames: the words land on the beat and a bar meter pumps with the bass.
Browse every effect with a preview in the HyperFrames catalog, or search it from the terminal with npx hyperframes catalog kinetic.
What makes kinetic typography look good?
- Motion that means the word. Small words shrink and hard words hit. In our first film the quiet line is tiny and the loud one fills the frame.
- One typeface, one accent color. Let size, weight and timing make the contrast, and save the accent for the word that matters.
- Arrive slow, leave clean. Arrivals use long ease-outs; exits are shorter and move in one smooth motion.
- A landed word stays still. Words that keep drifting or pulsing after they land look generated. Move the next word instead.
- Vary the entrance. A fade and slide-up on every line reads as a template. Mix rises, slams, rolls and pushes, as the three films above do.
How does HyperFrames compare with After Effects, Canva and Jitter?
All four can make kinetic type. They differ in who does the timing, what it costs and what you keep. Facts from each company's own site on 6 November 2026.
Tool | How words get timed | Cost | What you keep |
|---|---|---|---|
HyperFrames | From the voiceover's word times or the music's beats, by your agent | Free, open source (Apache 2.0); your agent may need a paid plan | An MP4 plus the project as HTML files you can edit and render again |
After Effects | Markers and keyframes you set, or a bought template | US$22.99 a month on the annual plan, 7-day free trial; Envato templates from $16.50 a month | An After Effects project |
Canva | Animation presets with Slow, Medium or Fast speed, or durations you set; Beat Sync matches clips, not single words, to the music | Free plan; more animations on Pro, US$144 a year | A Canva design |
Jitter | Keyframes on a browser timeline; an MCP for Claude and ChatGPT in beta | Free plan exports 720p, 30 fps with a watermark; Pro from $15 per editor a month | A Jitter file |
- Choose After Effects if you already know it and want frame-by-frame control and the largest template market.
- Choose Canva if your moving text lives inside social posts you already design there.
- Choose Jitter if you design in Figma and want a visual timeline with presets. Its new MCP lets Claude or ChatGPT make Jitter files; Jitter says export from the MCP is on the way.
- Choose HyperFrames if you want words timed to a voice or a beat without placing them by hand, a free MP4 with no watermark, or many videos in one style from your agent.
Need captions on a talking-head video instead? See animated captions. For counters, charts and logo stings, see the motion graphics guide.
Related guides: AI motion graphics, animated captions, the best free AI video editor, HTML to MP4.
Questions people ask
Can I edit the words after animating them?
Yes. Ask for the new word, or change the text in the editor. Each word is its own element, so a change to one word leaves the rest of the animation as it was.
Can I use a brand font?
Yes. Add the font file to the project or to a brand kit and name it in your request. A font the project does not include falls back to a default face, and npx hyperframes lint reports it.
Can I change timing for individual words?
Yes. Each word sits on the timeline as its own element, so you can ask for one word to arrive later, hold longer or leave first without moving the others.
What is kinetic typography?
Kinetic typography is text animated to carry meaning: words move, scale, swap or hit in time with a voice or music. HyperFrames makes it as code your AI agent writes, so each word's timing can come from the audio.
Is there a free kinetic typography generator?
Yes. HyperFrames is free and open source under Apache 2.0, renders on your computer and adds no watermark. Your AI agent may need its own paid plan. The HyperFrames Studio app's free plan also includes 5 cloud exports a month.
Can AI make a kinetic typography video?
Yes. With HyperFrames, an AI coding agent such as Claude Code or Codex writes the animation as HTML and renders an MP4. You give the words, the feel and the audio, then approve the look and ask for changes.
How do I sync animated text to a voiceover?
Get word-level timestamps and start each word's move on its time. npx hyperframes transcribe vo.wav writes every word's start and end time on your computer, and the agent uses them so each word lands as it is said.
Can I make a kinetic typography lyric video?
Yes. Give the agent the song and the lyrics. npx hyperframes beats finds the beats, and transcribe gives word times from the vocals. Sung words are harder to time than speech, so check them in the preview, or import lyric timing you already have as an SRT or VTT file. Use music you have the rights to.
Can I export kinetic text with a transparent background?
Yes. Keep the scene's background transparent and run npx hyperframes render --format webm --output title.webm. The WebM keeps the transparency, for titles and lower thirds you place over footage in another editor.
Do I need After Effects to make kinetic typography?
No. HyperFrames builds kinetic type from HTML and renders it to video frame by frame, so you need Node.js, FFmpeg and an AI agent, or the HyperFrames Studio app. No After Effects license is involved.
