typewritten-text Web Component

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:

In the end, the post was well-received with several thousand views!