Forem

Cover image for Project Sixteen: Typewriter
Valeria
Valeria

Posted on

2

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

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more