← All effects
Typewriter Text
▍
-- fps
prefers-reduced-motion detected — full text shown, no typing
X-ray · layers
letters appear one by one
blinking caret
delete & type next phrase
Parameters
Your phrases
separate phrases with |
Type speed12 ch/s
Delete speed30 ch/s
Pause1.2 s
your version · updates as you tinker
How this effect works
A typewriter is a counter pretending to be a person. The whole effect is one number — how many characters are currently visible — that grows at TYPE_SPEED per second. Every frame we show phrase.slice(0, count) and that's the entire trick.
The loop layer is a small state machine: typing → pause → deleting → next phrase. Deleting is just the same counter shrinking, usually faster than it grew — that asymmetry (slow to write, quick to erase) is what makes it feel human. The cursor layer blinks by flipping opacity on a half-second clock, exactly like a real terminal.
Production notes: respects prefers-reduced-motion (shows the first phrase complete, no animation) · effectively free — it updates one string per frame · keep phrases short: readers wait for the whole phrase before moving on · the copied snippet is self-contained HTML + CSS + JS.