Typewriter Effect

The Typewriter Effect component allows you to display text with a typewriter animation, either one by one or multiple at once. Ideal for presentations, headings, or attention-grabbing texts.

Install

pnpm dlx shadcn@latest add https://www.katestroyui.com/r/type-writer-effect

Usage

1import TypewriterEffect from "@/components/ui/type-writer-effect";
2
3export default function Demo() {
4  return (
5    <TypewriterEffect
6      texts={["Hello, world!", "Text animation with Typewriter Effect."]}
7      speed={80}
8      deleteSpeed={40}
9      delayBetween={1500}
10      loop
11      showCursor
12      cursorChar="|"
13      className="text-xl font-mono text-primary"
14    />
15  );
16}

Props

Prop	Type	Description	Default
text	string	To display a single text.	-
texts	string[]	To display multiple texts sequentially.	[]
speed	number	Typing speed (ms).	100
deleteSpeed	number	Deletion speed (ms).	50
delayBetween	number	Time between texts (ms).	2000
loop	boolean	Texts loop continuously.	true
showCursor	boolean	Should the cursor blink?	true
cursorChar	string	Cursor character.	"\|"
className	string	Extra Tailwind/custom classes.	-
onComplete	() => void	Called when animation is complete.	-
onTextChange	(currentText: string, index: number) => void	Called on every text change.	-
startDelay	number	Delay before animation starts (ms).	0
preserveHeight	boolean	Should height be preserved?	false
randomSpeed	boolean	Should speed be random for each character?	false
pauseOnHover	boolean	Should animation pause on hover?	false
enableCharBounce	boolean	Should characters animate with bounce?	true