Guides · · Maxwell Prehoda
12 Kinetic Typography Examples, From Saul Bass to Stranger Things (and How to Make Your Own)
Kinetic typography is type that moves to say something: words that build a city grid, slice apart like the plot of a thriller, or flick past on cue cards faster than you can read. The 10 pieces below are the ones designers keep returning to, from Saul Bass's North by Northwest (often credited as the first kinetic type sequence) to Imaginary Forces' Stranger Things titles and the tools people use for kinetic type on the web today.
Credits come from Art of the Title, the studios' own pages and the creators' uploads. The last two entries are ours: studio pieces built as code, so you can open the prompt and change every word.
1. North by Northwest titles by Saul Bass (1959): Best for type that lives on the architecture of a scene
Platform: Film title sequence, MGM
On a flat green field, lines cross into a grid and sans serif credit blocks ride up and down its columns. Then the grid dissolves into the glass façade of a Manhattan office building, its window frames matching the lines exactly, before the camera drops to the crowds on the street. Art of the Title notes it is "often credited as being the first sequence to use kinetic type" and one of the first examples of type that matches the perspective of a real environment.
The lesson is still the core of kinetic type: the motion of the words is the idea. The grid is the city, the rising and falling blocks are the traffic, and the whole opening reads like a man lost in a modern machine.
Watch out for: Perspective-matched type needs the footage designed for it. Trying to fit moving words onto a shot that was never planned for them is where most "situational type" attempts fall apart.
2. Psycho titles by Saul Bass (1960): Best for thrillers, tension and tight constraints
Platform: Film title sequence
White bars sweep in from different edges of the frame, carry the titles in and drag them out again, never crossing or breaking formation, to Bernard Herrmann's jagged score. Art of the Title describes Bass's palette of moves as on and off, left and right, up and down, black and white, and puts the budget at about $21,000.
It is the best argument for constraint in motion design. Four kinds of movement, two colours and one typeface are enough to make an audience uneasy before the first scene, because every cut is timed to the music.
Watch out for: Minimal sequences live on timing. If the cuts drift even a few frames off the music, the whole thing goes flat; lock the score first and animate to it.
3. Subterranean Homesick Blues, Bob Dylan and D. A. Pennebaker: Best for lyric videos with no budget
Platform: Film segment, official upload on YouTube
The opening of Pennebaker's documentary Dont Look Back: Dylan stands in a London alley near the Savoy Hotel, staring at the camera and dropping hand-lettered cue cards with words from the song as it plays. The cards, with deliberate misspellings and puns, were written by Donovan, Allen Ginsberg, Bob Neuwirth and Dylan, and Ginsberg is visible in the background the whole time.
Wikipedia calls it one of the first modern promotional film clips, a forerunner of the music video, and it has been copied ever since, from INXS to "Weird Al" Yankovic to a 2010 Google Instant promo. It proves kinetic type does not need software at all: rhythm, a few words and a human doing it on the beat.
Watch out for: Showing a word on every beat is hard to read for long. It works for three minutes because the cards skip most of the lyrics; pick the words that matter instead of captioning everything.
4. Se7en titles by Kyle Cooper (1995): Best for horror and crime openings that feel handmade
Platform: Film title sequence, R/GA Los Angeles
Kyle Cooper designed the opening at R/Greenberg Associates in Los Angeles with David Fincher and Jenny Shainin. An unseen hand works through a killer's notebooks while the credits jitter and scratch across the frame: the type was etched by hand on black scratchboard, then shot, printed and edited by hand, with film leader and found objects mixed in.
It made kinetic type messy on purpose. Instead of type that glides, it twitches and degrades, so the letters themselves feel disturbed. IFC ranked it the third greatest title sequence of all time in 2011, and the look has been copied by horror ever since.
Watch out for: The scratchy look is now a cliché in horror trailers. Borrow the method (make the type by hand, in a way that fits your story) rather than the texture.
5. Catch Me If You Can titles by Kuntzel + Deygas (2002): Best for period pieces and retro brand films
Platform: Film title sequence, Nexus Productions
Olivier Kuntzel and Florence Deygas built Spielberg's opening from hand-cut rubber stamps, animated on paper, then combined with precise computer-built sets. Stamp-style silhouettes of a con man move through a colourful jet-set world alongside the credits, and the mood shifts from playful to darker as it goes.
The designers name Saul Bass as the main reference, along with Paul Rand and Maurice Binder, but say they worked in the spirit of that era rather than copying it. That is the right way to do retro: a real handmade process, not a filter.
Watch out for: Mid-century pastiche is easy to overdo. Keep one strong period choice (the stamps, the palette) and let the rest be clean, or it turns into costume.
6. Zombieland titles by Ben Conrad at Logan (2009): Best for comedy and on-screen rules or captions
Platform: 3D type composited into live action
The credits are 3D letters modelled, textured and lit to sit inside the director's slow-motion footage, and animated to react to the action in each shot. Later in the film the same system shows the main character's "rules" as on-screen punctuation, built in Maya and lit to match each scene.
Title designer Ben Conrad describes the aim as making "the type become another character". It is the template for every on-screen caption that reacts to the scene, from TV comedies to product videos where labels get knocked by a cursor.
Watch out for: Type in 3D space needs camera tracking and matched lighting. Without them, the letters float on top of the footage and the joke dies.
7. Stranger Things titles by Imaginary Forces (2016): Best for show and podcast openers with one strong logotype
Platform: Title sequence, After Effects with some Cinema 4D
Huge hollow letters in ITC Benguiat drift through a dark void with glowing red edges and gradually assemble into the logo. Creative director Michelle Dougherty's team started with other typefaces and switched once the logotype was final; as she puts it, "A typeface is like an actor. Once you change the actor it's a different thing." Film grain, real lens flares and deliberately imperfect motion make it feel like an early-1980s optical title.
It is proof that a title can be almost nothing: a few letters, a slow push and a synth score. The Art of the Title page embeds the early "locking in" and "sliding" versions the team rejected, which are a lesson in how small timing changes alter the mood.
Watch out for: Slow, minimal type needs a genuinely good typeface and texture. With a default font and clean vectors, the same moves look like a screensaver.
8. Creativity Explained: On Type, by Oddfellows for Adobe: Best for educational type and voiced explainers
Platform: 2D animated series, 135 seconds
Creativity, Explained is an animated Adobe series on the basics of art and design, each episode voiced by a well-known designer. In this one Erik Spiekermann talks about why typography matters, and Oddfellows animates his advice. The studio's own notes describe the brief as one consistent storytelling approach for the whole series, so each guest's ideas feel part of the same world.
When the voiceover carries the argument, the type can illustrate it rather than repeat it. That is the line between kinetic typography that teaches and kinetic typography that just captions.
Watch out for: Animating every spoken word tires the eye. Pick one key phrase per sentence to set in motion and keep the rest still.
9. DIA Studio: Best for brand identities where the logo is a system
Platform: Design studio, New York and the French Alps
DIA was founded in 2009 in SoHo, New York, by Meg Donohoe and Mitch Paone, and is now based in the French Alps. In its own words it builds "kinetic identity systems, typographic systems, and generative tools": identities where the letterforms stretch, stack and reflow as part of the brand rather than as a one-off animation.
This is where kinetic type is heading for brands. Instead of a single animated logo, you design rules for how type moves, then let tools generate the posters, social posts and screens.
Watch out for: Generative type systems need a developer or a tool builder on the team. Budget for the tooling, not just the design.
10. GSAP SplitText: Best for kinetic headlines on websites
Platform: GSAP plugin, free for all users
SplitText splits an element's text into characters, words and lines so each can be animated, with masks for reveal effects and an autoSplit option that re-splits after fonts load or the width changes. By default it adds an aria-label to the parent and hides the fragments from screen readers, so the sentence is still read as one. GSAP's pricing page says the whole library, plugins included, is now free thanks to Webflow.
If you do not need a library, a staggered word reveal is a few lines of CSS. Our Word by Word Text Animation below is a pure-CSS version of the same idea, and the Text Animations directory has hundreds more.
Watch out for: Splitting text into spans breaks screen readers unless you handle labels, and character-level motion on long headlines hurts readability. Animate words or lines, and turn it off for reduced-motion users.
11. Our Cut-Paper Title Sequence (Studio): Best for Saul Bass style openers for events and films
Platform: Motions Animation Studio, prompt is CC0 Ours
A jazz-tempo title sequence in flat vermilion, mustard, bone and black: hand-cut paper shards jab in on the beat, a keyhole silhouette swallows the frame, and rough-edged titles slam into place. It is our take on the reductive mid-century approach Bass made famous: one strong symbol for the whole film, every cut on the music.
The prompt is free to copy. In the Animation Studio you can swap the titles for your own, retime it to your track, and export MP4 or HTML. Our kinetic typography with AI post walks through how to prompt pieces like this.
Watch out for: Homage is not a style guide. Change the palette and the symbol to fit your story, or it will read as a copy of a 1960s poster.
12. Our Split-Flap Departure Board (Studio): Best for announcements, schedules and countdowns
Platform: Motions Animation Studio, prompt is CC0 Ours
A mechanical departure board where every flap steps through its drum to land on times, destinations and statuses in a ragged, clattering wave, then rolls over to a closing message. Split-flap boards, made famous by Solari di Udine, are kinetic type with a built-in rhythm: each letter lands on its own beat.
Use it for event line-ups, launch dates or a changelog intro. Every word is a parameter, so changing the copy is a prompt edit, not a re-animation.
Watch out for: The clatter is the charm, but long boards take a while to settle. Keep it to a few rows and hold the final frame so people can read it.
How to choose a kinetic type approach
Kinetic typography is a set of methods, not a look. Pick the method that fits the message.
Match the motion to the meaning
Every example above moves type in a way that says something: the grid is a city (North by Northwest), the bars are tension (Psycho), the scratches are a disturbed mind (Se7en), the slow push is dread (Stranger Things). Write one sentence about what the motion means before you choose an effect. If you cannot, the type should probably sit still.
Match the method to the medium
Film and video can afford handmade processes and long holds. Social video needs words readable with the sound off and on a phone. Websites need text that stays real text: split it with care (GSAP SplitText adds labels for screen readers), animate words or lines rather than letters, and honour prefers-reduced-motion. For a quick start, copy a reveal from our Text Animations directory.
Match the rhythm to the sound
Kinetic type is editing. Bass and Herrmann, Dylan's cue cards and our split-flap board all land on the beat. Lock the music or voiceover first, mark the beats, then place each word on one. A word that arrives a few frames late reads as a mistake.
Set something in motion today
Pick one sentence that matters (a tagline, a launch line, a chorus) and give it one motion that means something. Ten seconds is enough to learn the craft. Then add music and retime it to the beat.
If you want a head start, describe the piece in the Studio: Claude sets the type, choreographs it to your timing and checks every frame, and you can tune eases and export MP4, GIF, HTML or React.
Make a 10-second kinetic typography piece for the line "[your line]" at [BPM] BPM. One typeface ([font]) in two weights, black on [background colour], with one accent colour for the key word. Each word lands on a beat with a 0.35s ease-out from 40px below; the key word scales from 120% to 100% on the downbeat. Hold the full line for 2 seconds at the end. If the viewer prefers reduced motion, fade the whole line in over 0.4s instead.
Common questions
What is kinetic typography?
Text animated over time to express an idea or emotion, usually in sync with music or speech. It ranges from film titles and lyric videos to animated brand identities and moving headlines on websites.
What was the first kinetic typography?
Saul Bass's opening for North by Northwest (1959) is often credited as the first title sequence to use kinetic type, according to Art of the Title. Earlier films had animated lettering, but Bass made the motion of the type itself carry the idea.
What software is used for kinetic typography?
After Effects is the standard for video, often with Cinema 4D for 3D type (Stranger Things used both). On the web, CSS animations and GSAP SplitText are common. You can also describe a piece in our Studio and export it as MP4 or HTML.
How do you make kinetic typography?
Choose a short line and a soundtrack, mark the beats, decide what the motion should mean, then animate each word or phrase onto a beat with one or two easing curves. Keep holds long enough to read, roughly the time it takes to say the words aloud.
Is kinetic typography accessible?
It can be. On the web, keep the text as real text with proper labels, avoid flashing, animate words or lines rather than single letters, and respect prefers-reduced-motion. In video, add captions and hold each phrase long enough to read.