typewritten-text is a web component for animating text by typing out one letter at a time! This common animation is often known as the "typewriter effect", and is often seen on code-themed websites.
Key features include:
- Generic: It is designed to be useable on any website
- Customizable: It is customizable in exactly the same way any HTML element is customizable
- Accessible: No content shifting, and reads well with screen readers, disables blinking for those who prefer reduced motion
I originally made this in response to a series of posts others were making on a developer site called dev.to. People were making CSS- and HTML-only versions of the typewriter effect in some sort of unspoken contest, which prompted me to make two entries of my own:
- A Typewriter, but with no HTML, CSS, or JS, featuring an SVG-only solution
- A Typewriter, but using a New HTML Tag, featuring this web component
In the end, the post was well-received with several thousand views!