Text Writer

The TextWriter component creates a typing animation effect for text, where characters appear one by one to mimic real-time typing.

This content will bounce when visible

Installation

Add the following code into your project

Update the import paths according to your project setup

Prop	Type	Default	Description
text	string	-	The text to be animated (required)
delay	number	0.05	Time delay between each character (in seconds)
className	string	''	Additional CSS classes for styling
animationConfig	AnimationProps	{}	Custom Framer Motion animation configuration
cursorColor	string	'#000'	Color of the typing cursor
cursorWidth	string	'2px'	Width of the typing cursor
cursorStyle	string	'solid'	CSS border-style of the cursor
onComplete	() => void	() => {}	Callback function executed when typing is complete
eraseOnComplete	boolean	false	Whether to erase the text after completion
eraseDelay	number	2000	Delay before erasing starts (in milliseconds)
loop	boolean	false	Whether to loop the writing and erasing effect