Typewriter Text: a headline that types itself

How to use it

1. Add the script

<script src="typewriter.js"></script>

2. Rotate words in a headline

List the words with a | between them. Write the first word inside the element too, so it is there before the script starts.

<h1>We build <span data-typewriter="websites|web shops|web apps">websites</span></h1>

3. Or type a sentence once

Without a word list, the element's own text is typed one time, when the visitor scrolls to it.

<p data-typewriter>This sentence is typed once and then stays.</p>

All options

What makes it look real

• Uneven rhythm. Each letter takes a slightly different time, the way a person types. A perfectly even rhythm looks like a machine.
• Smart delete. From "web shops" to "web apps" it only deletes "shops". The shared beginning stays, which is what a person would do.
• The cursor stops blinking while typing and blinks again while it waits, like in a real editor.

Stop the text after it from jumping

When words have different lengths, everything after them moves left and right. Add data-reserve, and the element keeps the width of its longest word.

We are <span data-typewriter="fast|friendly|affordable" data-reserve>fast</span> and ready.

Style the cursor

The cursor has the class tw-cursor. Give it your own colour or weight.

.tw-cursor { color: #22d3ee; font-weight: 300; }

Control it from your own code

var tw = Typewriter(document.querySelector('#status'));

tw.type('Sending your message...').then(function () {
  return tw.type('Sent. Thank you!');
});

tw.words(['new', 'word', 'list']);   // replace the rotating words
tw.stop();                           // freeze it

Good for Google and screen readers

• The first word is real text in your HTML. Search engines read a complete headline.
• Screen readers hear all the words once, as a plain list. They do not hear single letters appearing.
• With reduced motion switched on the first word is shown and nothing moves.

Common questions

Can I use it on several headlines?

Yes. Each element with data-typewriter runs on its own and starts when it is scrolled into view.

Can a word contain the | character?

No, that character separates the words. Use tw.words([...]) from JavaScript for such text.

How is this different from the Text Scramble kit?

Scramble changes all letters at once, like a code being cracked. The typewriter writes one letter at a time and has a cursor. Scramble fits tech brands, the typewriter fits almost everything.

What is in the download

• typewriter.js the script, about 4 KB. The cursor style is included.
• index.html and demo.css the demo page you see above
• README.txt and LICENSE.txt the short guide and the MIT licence

Licence

MIT licence. Use it in personal and commercial projects, change it as you like. A link back is welcome and not required.