vocab.design

motion · ai

Typewriter effect

also called typing animation, text scramble, streaming text, typed text, text morph

Revealing text one character at a time, as if it were being typed, usually with a blinking caret trailing the last letter.

The typewriter effect adds a character at a time until the sentence is whole, with a caret blinking after the last letter so the line reads as being written rather than as being drawn. It came from terminals, moved to hero headlines as the decorative way to cycle a list of nouns, and then found a genuine job: tokens arriving from a language model look exactly like this, so the effect stopped being an ornament and became an honest report of a stream.

That is the distinction worth keeping. When the text is really arriving over time, the animation is a status indicator and its pace should follow the source. When the text is already there, the animation is a delay you invented, and a reader who wanted the sentence now has to wait for it. The second kind belongs in short, skippable places, never in front of an instruction someone needs, and never on a loop that deletes and retypes the same words while the page is being read.

Two implementation details matter more than the timing curve. The first is space: the text must be laid out at full length from the start, either by reserving its box or by rendering it and clipping, so the paragraph below does not creep upward line by line. The second is the accessibility of a partial sentence. Assistive technology should be given the complete string rather than sixty separate updates, so keep the animated copy out of a live region and let the finished text be what is announced. Under reduced motion, print the line and keep the caret still.

Which word?

If you wantsay
text should arrive as if being written right nowtypewriter effect
a number changing should be noticed and readcount-up animation
a changing value should read as mechanical rather than digitalsplit-flap animation
the type itself performs rather than sits stillkinetic typography

Related

See also: Streaming announcement

Sources