typing text

Typewriter effect with blinking cursor

Installation

Choose your preferred installation method. CLI is recommended for the fastest setup.

One command, zero configuration

$ npx @hritik-sharmaa/repeat-ui add text-effect-typing-text --variant ts-tailwind

Configuration options and properties for this component.

Prop	Type	Default	Description
`text`	`string`	`''`	The text content that will be typed out with animation effects
`speed`	`number`	`100`	Speed of typing in milliseconds per character (lower = faster)
`delay`	`number`	`0`	Initial delay before typing starts (in milliseconds)
`character`	`string`	`'\|'`	Custom cursor character to display while typing
`deleteSpeed`	`number`	`30`	Speed of deleting text in milliseconds per character
`pauseAfterComplete`	`number`	`1000`	Time to pause after completing typing before starting to delete (in milliseconds)
`className`	`string`	`''`	Additional CSS classes to apply to the component container
`showLetterAnimation`	`boolean`	`true`	Enable individual letter entrance animations with Framer Motion
`onComplete`	`() => void`	`undefined`	Callback function called when typing is completed
`onDeleteComplete`	`() => void`	`undefined`	Callback function called when deleting is completed