motion-typewriter

Types out its text content character by character when it scrolls into view. Supports looping, a blinking cursor, and configurable timing.

Preview

Motion that feels alive.

import 'motion-components/motion-typewriter'   // just this one
import 'motion-components'               // or the whole library

<motion-typewriter interval="0.05" loop>
  Hello, world.
</motion-typewriter>

Attribute	Property	Type	Default	Description
interval	interval	number	0.05	Time between characters while typing, in seconds
delay	delay	number	0	Delay before typing starts after viewport entry, in seconds
hold	hold	number	1.8	Time to hold the finished line before erasing, in seconds (loop only)
loop	loop	boolean	false	Erase and retype continuously
gap	gap	number	0.5	With loop, seconds the line stays empty after erasing before typing starts again
pause-on-hover	pauseOnHover	boolean	false	With loop, freeze the cycle while the pointer is over the text, resuming on leave
cursor	cursor	boolean	true	Show a blinking cursor. Set cursor="false" to hide it

Add pause-on-hover to freeze the typing cycle while the pointer is over the text. gap sets the empty pause between erasing and retyping.

Hover to hold the line

<motion-typewriter interval="0.06" loop hold="1.2" gap="0.8" pause-on-hover>
  Hover to hold the line
</motion-typewriter>

Control the typewriter programmatically with play(), pause(), finish(), and cancel().

JavaScript API demo

playState: –

Respects prefers-reduced-motion: when enabled, the typing animation is skipped, the full text appears immediately and loop never starts.