Guides · · Maxwell Prehoda
12 Typewriter Effect Examples, From One Line of CSS to Full Libraries
A typewriter effect types text out one character at a time behind a caret. The simplest version is pure CSS: animate an element's width in steps() with a monospace font. Anything more, typing several phrases, deleting, pausing like a person, needs a little JavaScript or a library, and the library you pick comes with a licence you should read first.
Below are 12 examples: the libraries people actually ship, the CSS technique they all descend from, tools that type for you in a README or terminal recording, and two of ours. Each says what it is best for, what it runs on and the catch. Most play live, as pure-CSS demos from our Typing Animations collection you can copy.
1. Typed.js by Matt Boldt: Best for hero lines that cycle through several phrases
Platform: JavaScript, GPL-3.0 or paid commercial licence
Typed.js is a library many typewriter tutorials point to, with about 16,000 GitHub stars. You give it an array of strings and it types, backspaces and types the next. smartBackspace, on by default, only deletes the part of a string that differs from the previous one, so "We build apps" to "We build sites" keeps "We build" on screen. You can pause mid-string by writing a caret and a number of milliseconds, like ^1000, and swap backspacing for a fade with fadeOut.
It loads as an ES module or a script tag, and the README shows a React useEffect pattern that destroys the instance on cleanup. Our Type and Delete Loop below does the single-phrase version in pure CSS: the same ch-based width trick with an alternating animation, so the delete phase needs no JavaScript.
Watch out for: Typed.js is GPL-3.0, free for personal and open source projects. A commercial site needs one of its paid commercial licences, which surprises people who assumed it was MIT.
2. TypeIt by Alex MacArthur: Best for scripted typing with typos, edits and pauses
Platform: JavaScript, React or WordPress; paid for commercial use
TypeIt treats typing as a script. You chain type(), delete(), pause(), move() for the cursor, break() for a new line and exec() to run your own code, including async functions, at any point. That makes it the right tool when the animation tells a small story: type a wrong word, move back, fix it, carry on. waitUntilVisible holds the typing until the element scrolls into view, and freeze() and unfreeze() halt and resume an instance.
Our Typo and Backspace Typing Effect below is a pure-CSS take on that kind of story: it types a word wrong, a red spellcheck squiggle appears, the caret backspaces and types it again correctly. Three clipped spans share one caret.
Watch out for: Free for personal and open source projects only. Commercial use needs a Limited ($9, one project) or Unlimited ($29) licence, per its site. Its docs do not cover screen readers or reduced motion, so handle both yourself.
3. typewriter-effect (Typewriterjs): Best for an MIT-licensed typewriter for React projects
Platform: JavaScript and React, MIT
If the GPL or a paid licence is a problem, typewriter-effect on npm is an MIT alternative. It has a chainable API, typeString(), pauseFor(), deleteChars(), deleteAll() and start(), plus a React component that takes an onInit callback or an options object with strings, autoStart and loop. The delay option accepts a fixed number, a min and max range, or 'natural' for uneven, human timing.
Its README is unusually honest about accessibility: it warns that screen readers may read the text while it is being typed, suggests hiding the typewriter with aria-hidden and putting the full text in a visually hidden element, and suggests calling skipToEnd() for reduced motion. Our Typewriter Effect with Pauses below shows the uneven rhythm in pure CSS: each keyframe segment has its own steps() count, and the caret only blinks during pauses.
Watch out for: Typed strings can include HTML, which is handy and also a cross-site scripting risk if any part of the string comes from user input. Only feed it text you control.
4. Motion+ Typewriter: Best for natural typing rhythm in Motion-based React apps
Platform: React, Motion+ membership
Motion's Typewriter component is about 1.3kb and its selling point is rhythm. Speed changes per character, slowing down for long words, punctuation and uncommon letter combinations, with a variance setting from 0 to 1 if you want it perfectly even. It can backspace by character, by word or all at once, and it can play and pause, which suits typing that runs as the user scrolls.
The docs say it includes ARIA labels so screen readers can read the text. Our Smooth Caret Typing Effect below borrows a different detail from code editors: letters appear per keystroke while the caret glides to its new spot instead of jumping.
Watch out for: It is exclusive to Motion+ members and not part of the free motion package. The docs page does not mention reduced motion, so add that yourself.
5. GSAP TextPlugin: Best for typing that syncs with a larger GSAP timeline
Platform: GSAP plugin, JavaScript, free
TextPlugin replaces an element's text one character at a time, or word by word with a space delimiter. Start from an empty element, tween to the new value with ease: "none" so characters land at an even pace, and you have a typewriter that lives on the same timeline as the rest of your animation. type: "diff" only animates the characters that change, and newClass and oldClass let you style incoming and outgoing text differently.
GSAP's pricing page says the whole library is free, supported by Webflow, so this costs nothing to add if GSAP is already on the page. Our Multi-line Typewriter Effect below is the pure-CSS version of a sequenced intro: three lines type one after another and the caret hops down to each new line.
Watch out for: Rewinding or restarting the tween reverts the text, which is useful in a scrubbed timeline and confusing if you expected the text to stay. Do not load GSAP for a typewriter alone; CSS or a small library is lighter.
6. Lea Verou's steps() typing animation: Best for a one-line terminal heading with zero JavaScript
Platform: Pure CSS
Almost every CSS typewriter descends from Lea Verou's September 2011 post. The trick is steps(): instead of interpolating smoothly, the animation jumps a set number of frames, one per character. With a monospace font every character is the same width, so the text appears to type. Her post is clear about the limits: the font has to be monospace and the character count is hardcoded.
The modern version uses ch units and a custom property. 30 Seconds of Code has a small script set --characters to the text length, then animates width to that many ch in that many steps, with a ::after caret blinking on step-end. Our Typewriter Effect below is the hardcoded original in its cleanest form: 13 characters, steps(13), width to 13ch.
Watch out for: It only works with monospace fonts and one line. For a serif or proportional font, use per-letter spans instead, as in our Typewriter Effect for Any Font.
7. Readme Typing SVG by DenverCoder1: Best for GitHub profile and project READMEs
Platform: Hosted SVG service, MIT
GitHub READMEs do not run JavaScript, which is why this project exists. It generates an SVG that appears to type and delete text, and you embed it with a Markdown image link. Lines are separated by semicolons, and URL parameters set the font (any Google Font), size, colours, duration per line (5000ms by default), pause between lines, centring, multiline wrapping and repeat.
There is a live demo and generator where you tune it and copy the link. With about 9,500 stars, it is a popular way to put a typed tagline on a GitHub profile. Our Text with Blinking Cursor below is the static companion for your own site: a line of text and a block cursor that blinks, as at a terminal prompt.
Watch out for: Your README now depends on a third-party server rendering the image. If it is slow or down, the line is missing; self-host it if the README is important to your project.
8. VHS by Charm: Best for terminal demo GIFs for CLI tools
Platform: CLI tool, MIT; outputs GIF, MP4 or WebM
npm create app
Scaffolding ./app ...
✓ Done in 1.2s
VHS turns a script into a terminal recording. In a .tape file you write Type with the text, Enter, Sleep for pauses and Set TypingSpeed for the delay between keystrokes, and VHS renders it to a GIF, MP4 or WebM. Its own tagline sums it up: write terminal GIFs as code. Because the tape is a text file, the demo stays reproducible when your CLI output changes.
Use it where you would otherwise record your screen: the tape renders the same typing every time. If you want the typing to be live text on a web page instead of a video, our Terminal Typing Effect below is the CSS alternative: a small terminal window types a command, prints two lines of output, then drops to a fresh prompt with a blinking block cursor.
Watch out for: A GIF of text is an image: not selectable, not translatable and invisible to screen readers unless you write alt text. Put the real command in a code block next to it.
9. Vercel AI SDK smoothStream: Best for AI chat answers that stream in evenly
Platform: TypeScript, AI SDK (streamText transform)
Sure! Here's a quick plan for three days in Kyoto.
AI chat interfaces made streaming text the most common typewriter effect on the web, but the raw stream arrives in uneven bursts. smoothStream is a transform for the AI SDK's streamText that buffers the output and releases it in chunks with a delay between them, 10ms by default. Chunking is by word by default, or by line, a regular expression, or Intl.Segmenter. The docs note the delay is skipped while the tab is hidden.
Our AI Streaming Text Effect below is a pure-CSS version of the visual layer: each word resolves from a soft accent glow, with a pulsing dot at the end of the stream that fades when the reply is complete. For the rest of the chat UI, typing indicators and tool-use states, see our chatbot UI animation examples.
Watch out for: The docs warn that word chunking does not work well for Chinese, Japanese, Korean, Vietnamese and Thai, which do not separate words with spaces; use Intl.Segmenter for those languages.
10. Typewriter Effect for Framer by Framer Geeks: Best for no-code Framer sites
Platform: Framer component, free
If your site is built in Framer, you do not need code at all. This free component from Framer Geeks cycles through a list of words, typing and deleting each one, with adjustable typing and deleting speeds, a pause between words, a blinking cursor with adjustable width and height, and infinite looping.
It is the quickest way to get a rotating typed word into a Framer hero. If you are not on Framer, our Select and Retype Typing Effect below is a pure-CSS loop with a different twist: it types a phrase, sweeps a selection highlight back over it, deletes it and types the next.
Watch out for: Infinite looping text next to your headline is ambient motion. WCAG 2.2.2 asks for a way to pause anything that moves for more than five seconds alongside other content, so consider stopping after one or two cycles.
11. Our Search Placeholder Typing Effect: Best for search bars that suggest what to search for
Platform: Motions directory, free Ours
Typing example queries into an empty search field is one of the few typewriter effects that does a job: it tells people what they can search for. This one types "rain jackets", deletes it, then "hiking boots" and "wool beanies". The three phrases are stacked and share one caret that sits after whichever is showing.
It is pure HTML and CSS with a reduced-motion guard and two custom properties for colour and size. Swap the phrases for real queries from your search logs and it becomes onboarding, not decoration.
Watch out for: The typed phrases are a visual layer, not the input's real placeholder, so keep a plain placeholder or label on the actual input and stop the animation as soon as the field gets focus.
12. Our Code Typing Animation: Best for developer tool landing pages and docs heroes
Platform: Motions directory, free Ours
Developer products like to show code being written in the hero. This snippet types three lines of syntax-coloured JavaScript into a small dark editor with line numbers, while the active-line highlight follows along. Coloured tokens are spans inside each clipped line, so you can paste your own snippet and keep the highlighting.
Every line carries its character count, start time and hold time as custom properties, so retiming it means editing numbers in the HTML, not rewriting keyframes. The whole Typing Animations collection works the same way, from a Command Palette Typing Animation to an OTP Code Input Animation.
Watch out for: Keep the code short and real. Three lines that actually run beat ten lines of pseudo-code, and anyone who wants to copy it needs the plain text in a code block below the animation.
How to choose a typewriter effect
Three checks, in this order.
Match it to the text
One fixed line in a monospace font: use CSS steps() like Lea Verou's technique or our Typewriter Effect. A proportional font: per-letter spans, as in Typewriter Effect for Any Font. Several phrases, deletes and typos: a library, TypeIt for scripted stories, Typed.js or typewriter-effect for cycling phrases. Text from an AI model: smooth the stream, do not fake it.
Match it to the licence and stack
Typed.js is GPL-3.0 and TypeIt is free only for personal and open source work; both sell commercial licences. typewriter-effect is MIT. Motion+ Typewriter needs a membership. GSAP TextPlugin is free but only worth it if GSAP is already loaded. Pure CSS has no licence question at all, which is why every snippet in our Typing Animations collection is plain HTML and CSS.
Match it to the reader
Screen readers can read text mid-type, so keep the full text available and hide the animated layer, as the typewriter-effect README suggests; CSS width clipping keeps the whole string in the DOM, so it reads in full. Under prefers-reduced-motion, show the finished text immediately. Keep typing speed close to reading speed and stop loops after a cycle or two.
Type your headline before lunch
If your line is short and fixed, copy our Typewriter Effect, change the text and set the step count to its length. If you need several phrases, pick the library whose licence fits your project, then add the reduced-motion and screen reader handling the libraries leave to you.
For anything more specific, a typed search hint, a terminal intro, a chat reply, describe it to our creator or paste your own markup. It asks a few quick questions while it builds the CSS keyframes, then lets you refine it in chat.
Make a typewriter effect for my hero line "Deploy on Friday. Sleep on Friday." Type each sentence at about 45ms per character, pause 900ms after the full stop, then type the second sentence. Use a 2px caret that blinks only while idle, and keep the full sentence readable by screen readers from the start. Under prefers-reduced-motion, show the full text with no typing and no blink. Pure HTML and CSS, works with my proportional font, colour and size as custom properties.
Common questions
How do I make a typewriter effect in CSS only?
Use a monospace font, set white-space: nowrap and overflow: hidden, start the width at 0 and animate it to the text length in ch with steps() set to the same number of characters. Add a border-right caret that blinks with a step-end animation. Our Typewriter Effect is exactly this in a dozen lines.
Can a CSS typewriter work with a non-monospace font?
Not with the width trick, because characters have different widths and the steps will not line up. Wrap each letter in a span and reveal them one after another with an index-based delay instead, as in our Typewriter Effect for Any Font.
Is Typed.js free for commercial use?
Not under its free licence. Typed.js is GPL-3.0, described as free for personal and open source projects, and offers paid commercial licences. TypeIt is similar. If you need a permissive licence, typewriter-effect on npm is MIT, and pure CSS needs no licence.
Are typewriter effects accessible?
They can be if you plan for it. Screen readers may announce text as it types, so keep the complete text available (CSS width clipping does this naturally) or hide the animated layer and add a visually hidden copy. Show the finished text under prefers-reduced-motion, and give looping text a way to stop.
How do I make a typewriter effect that types and deletes multiple words?
In CSS you can stack the phrases and give each its own slot in one looping timeline, as our Search Placeholder Typing Effect does. In JavaScript, Typed.js takes an array of strings and handles the backspacing, and typewriter-effect chains typeString() and deleteAll() calls.
Sources
- Typed.js on GitHub
- TypeIt
- TypeIt usage docs
- Typewriterjs (typewriter-effect) on GitHub
- Motion+ Typewriter docs
- GSAP TextPlugin docs
- GSAP pricing
- Lea Verou, Pure CSS3 typing animation with steps()
- 30 Seconds of Code, Typewriter effect
- Readme Typing SVG on GitHub
- VHS by Charm on GitHub
- AI SDK smoothStream reference
- Typewriter Effect component on Framer Marketplace