Typing Animation

TypingAnimation types out text character by character — a classic typewriter effect with optional blinking cursor and loop support.

ExamplesCodeUsageChangelog

Basic usage

|

Tailwind v4

<TypingAnimation text="Hello, world!" />

Custom speed

|

Tailwind v4

<TypingAnimation text="Typing fast!" :speed="20" />

With loop

|

Tailwind v4

<TypingAnimation text="This text loops forever..." :loop="true" />

Custom cursor character

_

Tailwind v4

<TypingAnimation text="Custom cursor below" cursor-char="_" />

No cursor

Tailwind v4

<TypingAnimation text="No cursor shown here" :cursor="false" />

With delay

|

Tailwind v4

<TypingAnimation text="Starts after 1 second" :delay="1000" />

Props

Prop	Type	Default	Description
text	string	—	The text to type out
speed	number	50	Milliseconds per character
delay	number	0	Initial delay in ms before typing begins
loop	boolean	false	Restart animation after completion
cursor	boolean	true	Show blinking cursor
cursorChar	string	`'	'`