typed.js
A JavaScript Typing Animation Library
A lightweight JavaScript library that animates text on a webpage as if someone is typing and erasing it live, used for dynamic headlines, landing pages, and terminal-style demos.
Typed.js is a JavaScript library that creates animated typing effects on a webpage. You give it a list of text strings, and it displays them one character at a time — as if someone is typing them live — then erases and types the next one. This creates a dynamic, eye-catching effect often seen on landing pages.
You control the speed of typing and erasing, how long to pause between strings, whether to loop the animation, and whether to show a blinking cursor. There's a "smart backspace" feature that only erases the part of a sentence that differs from the next one, so if you're cycling through phrases that share a common beginning, the shared words stay put.
The library can read its text from an HTML element already on the page rather than from a JavaScript array, which is useful for search engine optimization (SEO) — search engines can still see the text even when JavaScript is disabled.
You'd use Typed.js when building a website that needs animated headline text — a startup landing page showing rotating value propositions, a portfolio site cycling through job titles, or a terminal-style demo interface. It works by being added to a page via a package manager like NPM or directly via a script tag from a CDN (content delivery network, meaning a hosted file you can link to). It's free for personal and open-source projects, with paid licenses available for commercial use. The full README is longer than what was provided.
Where it fits
- Add a typing-animation headline to a startup landing page that cycles through your product value propositions.
- Create a portfolio site that animates through your job titles or skills with a blinking cursor.
- Build a terminal-style demo interface where commands appear to be typed live on screen.