Kinetic type
Make a film where the words are the picture, with a chain of type moves, one hit and a line that holds.
At the end of this page you have a filmA film is the mp4 file that the renderer makes from one page. of 6 to 20 s in which type does all the work. It has a hook, a hit, and a last line that still moves.
You need the words. A kinetic film is only as good as its copy, so write the lines first.
What this film needs
There is no template for this type. Start with beat-sheet.md, the template for a short unnarrated film, and take a chain from prompts/moves/RECIPES.md:
| Recipe | Length | Thread |
|---|---|---|
| 8 Kinetic type line | 6 s | one dot carries the line: a full stop, then a ball across the cut, then a full stop |
| 13 Kinetic type manifesto | 20 s | one sentence in four beats: the problem, the values, the claim, the name |
| 2 Brand sting, type-led | 5 s | one pulse every 0.48 s (125 bpm); every landing and cut is on it |
Each beat has its own engine, so the type never repeats a trick. In recipe 13 the beats are a soft resolve (blur-word-cascade), a slot roll (word-swap-slot), a hit (scale-punch) and the name (wordmark-cascade).
Keep one hit. The spectacleThe spectacle is the second of the one big moment in a film, set by <meta name="spectacle" content="6.2">. is the one word that lands hard, with quiet before it. Do not punch a second word: the same hit twice reads as a template. Land the accent on the claim word, and give it to one word only.
Steps
Write the brief
bin/vawe new one-page-in --from prompts/beat-sheet.md --length 6 --title "One page in."--title writes the starter headline into brief.md and the page. Fill the Shots and Words tables. The Words table holds each line with its appear and settle seconds, cap height, position and colour.
Pick the moves by job
The index prompts/moves/README.md has a row for each job. Land one hero word: scale-punch, letter-stagger, outline-fill, variable-weight-wave. Decide a word on screen: word-swap-slot, flap-resolve, text-scramble-decode. Point at one word: word-sweep, marker-highlight, underline-draw. Change what a word means: weight-morph. Read Motion and choose from the clip, not the name.
Check the key frames, then draft
bin/vawe frames films/one-page-in/page.html
bin/vawe dev films/one-page-in/page.htmlRead each line at full size. Then follow the motion pass.
Pitfalls from the taste digest
- Read lines (
readable-hold). Cap height is 6 percent of the frame or more. A line holds for max(1.2 s, words / 3). Prose words take 0.6 s each. Add hold, never slow the move. - Type scale (
type-scale). A frame uses at most six text sizes, and each step is at least 1.25 apart. Pick hero, support and label. - Text breathing (
text-breathing). A kinetic film is the named exception to the 84 percent limit. Write the exception in the brief. - Frame 0 has a subject (
first-frame). The first word starts to resolve at 0 s, not after empty ground. - Face and ground (
typeface-default). Use the kit’s face, not Inter or Space Grotesk by habit. - Live hold (
live-hold). A held line keeps one part alive, such as a caret or the last dot. A camera drift does not count. - Exits are faster than entrances (
exits-shorter). In recipe 13 an exit runs 0.22 s and an entrance 0.6 s or more.
Three traps from recipe 8 repeat. Launch the ball from the full stop’s measured rect and hide the stop on that frame. Read a dot’s slot with offsetLeft and offsetTop, because they ignore transforms. Put no transform on the h1: a drifting line reads as a move, not a hold.
Common mistakes
| What you see | Why | What to do |
|---|---|---|
| Letters land on one frame | The stagger is too small | Stay in the 30 to 80 ms band for each letter |
| The line is hard to read | Cap height under 6 percent | Raise the font size, never shrink the line |
| Two accents compete | Accent on the slot word and the punch word | Give the accent to the claim word only |
What to read next
Text and fonts
Recipes
Cut to the beat
Logo sting
From the blogCSS text animation: 5 kinetic typography effects