Respects prefers-reduced-motion: the animation is disabled and the final state is shown.
What is a Typewriter?
A typewriter surfaces a phrase one character at a time, with a caret blinking at the end — it reads as 'being written' and pulls the eye to a headline or a value prop. Reveal it with a stepped clip (not width, which reflows) so the line stays put, then loop or hold. Use it for one hero phrase, never a paragraph.
Animation Specimen
Trigger
load
Tech
css
Duration
3.4s
Easing
steps(12, end)
Performance
clip-path, opacity
When to use
A single hero headline or value prop
Terminal / coding brand voices
Avoid when
Long copy — typing more than one line feels slow
As the only way to read critical info
Reveal with clip-path, not width — width animation reflows the whole line and stutters.