Kinetic Typography Maker
Make kinetic typography from one line of text: ten motions from a wave to a write-on, your own fonts, and loops saved as MP4, WebM or GIF, all for free.
What is kinetic typography?
Kinetic typography is text that moves to get its meaning across: letters that rise, slide, flicker or turn. Film titles picked it up in the late 1950s, when Saul Bass had the credits of Hitchcock's North by Northwest fly in from off screen.
These days you see it all over title sequences, adverts and TV idents.
How to make a kinetic typography video
Begin on the blank canvas, or load an image or video to put the type over. Type up to 80 characters in Text and pick a Motion: Wave, Marquee, Repeater, Flicker, 3D wrap, On a path, Morph, Type on, Word by word or Write on.
Speed sets the pace, from 0 to 4, and 0 freezes the type. Amount is how far the motion goes, like the height of the wave or how many echoes you get. Font, Weight, Size, Colour and Position X and Y style the line and place it. Flicker also gets a Seed, for a different run of flickers.
Which fonts can you animate?
There are 32 faces in the Font list, from Archivo and Georgia to display faces like Monoton, Bungee Shade and Press Start 2P. The display faces come with the site, so nothing gets fetched from a font service.
You can add your own .ttf or .otf file with the button next to the list. It's kept in this browser, works offline, and lets you switch on the font's OpenType features, small caps or a stylistic set for example.
Morph sends a wave of weight through the line, and you'll only see it on a variable font, a single file that holds a range of weights, as OpenType 1.8 allows. Archivo is one of those.
Settings for a lyric line, a breathing logo and a typewriter title
Lyric line: Word by word, Amount 0.6. Each word rises 0.31 seconds after the previous one (0.55 minus 0.4 times Amount). A six-word line is complete in under two seconds, and at Speed 1 the cycle starts over after about 3.1 seconds.
Breathing logo: Morph on Archivo, Speed 0.4, Amount 0. All the letters swell from weight 100 to 900 and back at nearly the same moment, once every 6.25 seconds. Turn Amount up and the swell travels along the word like a wave.
Typewriter title: Type on with Font on Special Elite and Amount 0.25, which types 8 letters a second (4 plus 16 times Amount). A caret trails the last letter and blinks once a second while the line holds. If you'd rather have letters drawn by a pen, Write-On Text Animation comes set up with the Write on motion.
How long should a kinetic type loop be?
Record a whole number of cycles and the file loops with no jump. At Speed 1, Wave and Repeater repeat every 2 seconds, Morph every 2.5, 3D wrap every 4 and On a path every 10. For other settings, divide by Speed.
The reveals finish by holding the whole line for 1.2 seconds. Before that hold, Type on takes the character count, spaces included, divided by 4 plus 16 times Amount. Word by word takes the word count times 0.55 minus 0.4 times Amount. Write on takes the characters plus a half, times 0.5 minus 0.4 times Amount. Then divide the total by Speed.
Flicker never repeats, so any length is fine. Marquee depends on how wide the line is, and Scrolling Text Generator does that math for you.
Saving kinetic type as a GIF or a video
GIF timing works in hundredths of a second, and frames closer than two hundredths apart get merged, which makes a 60 FPS recording play unevenly as a GIF. Record GIFs at 24 or 30 FPS. Save 60 FPS for MP4 or WebM, where a fast Marquee or Wave stays smooth.
White type on the black canvas is a good match for GIF, since the letter edges need only a few grays. Colored type over a photo brings in a lot more colors, and MP4 holds onto them.