DEV Community

Cover image for Project Sixteen: Typewriter
Valeria
Valeria

Posted on

Project Sixteen: Typewriter

Some years ago I worked at a startup and we had this nice banner with a typewriter effect. I don't remember entirely what the banner was saying - but it was quite fun working on this one.

After all, having a nice flashy banner might come in handy for a landing page for you too one day, so I thought we might as well try and implement one today.

Typewriter Effect: requirements and recipe

As a user I want to see a message slowly appear on the screen letter-by-letter so that I can truly appreciate it

Let's start with an example from a great movie, I hope you've seen it:

Green "Wake up Neo..." appearing on the black screen one letter at a time

Of course, you don't need to recreate this exact animation or use the iconic green on black colour palette, but there are some requirements:

Requirements

  1. Letters should appear one-by-one with a set interval
  2. Contrast ratio should be sufficient
  3. There should be accessible label with the whole phrase
  4. There shouldn't be any layout shifts throughout the whole animation cycle

Recipe

  1. Start with a static text: style it however you want
  2. Ensure that it's accessible
  3. Write a function that would type the sentence for you
  4. Choose an interval that feels right
  5. Follow the white rabbit...

Hints

To avoid layout shifts set the size of the "display" to a fixed value - this way it won't accidentally grow when more text is added.

There are several ways to achieve the typewriter effect, the simplest one is to split the phrase into individual letters and add them one by one to the screen, however it's also possible to do it with pure CSS.

Hard Mode: Vertical Scrolling Text

For this one you definitely need to have watched Matrix at least once and owning a pair of round glasses and a black coat is a nice to have.

How about implementing this effect:

Green numbers running down the black screen

Looks cool and fun to code both on terminal and in the browser: either can be coloured, erased and repainted ;-)

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?

Buy Me A Coffee

Top comments (0)