Design Openbook

Text Reveal Effects

What are the names of text animation effects like typewriter and count-up? Common text effects are Typewriter, Count-up, Text scramble, Blur-in and Staggered word reveal, chosen by whether the text is a number, a sentence or an emphasis.

The ways text can appear have names too. Choose by whether it is a number, a sentence or an emphasis.

Terms and previews

Tap a preview to pause it; tap again to play.

  1. Typewriter effect

    Characters appear one at a time as if being typed

  2. Count-up

    A number rises from 0 to the target value

  3. Text scramble

    Random characters shuffle and then settle into place

  4. Blur-in

    Blurry text becomes sharp

  5. Staggered word reveal

    Words rise in one after another with small delays

How to use it

  • Use count-up only on a single number where the size matters. On every number in a table, it cannot be read.
  • Use typewriter only when it means "this is being generated now," like an AI reply. On a headline it only slows reading.
  • The final text after the effect must be what screen readers read. The scrambled in-between characters must not be read.
  • Use only one text effect per screen.

Prompts to copy

Key metric count-up

Add a Count-up animation to the 3 key metrics at the top of the dashboard.
- From 0 to the target value in 800ms, ease-out, keep thousands separators.
- Apply tabular-nums so the number width does not shift.
- Run once, when it first becomes visible.
- If reduce motion is on, show the final value immediately.

Source posts: @uxwoodytips

All cards (27)