Text Type

Typewriter effect with blinking cursor and adjustable typing cadence.

Default

Every prop is wired to the controls underneath. Any change restarts the typing from the first sentence.

Cursor Character

Typing Speed75ms

Pause Duration1500ms

Deleting Speed50ms

Cursor Blink Duration0.5s

Show CursorVariable Speed

Variable Speed Min60ms

Variable Speed Max120ms

Prop	Type	Default	Description
`text`	`string \| string[]`	-	Text or array of texts to type out.
`as`	`string`	`"div"`	HTML tag to render the component as.
`typingSpeed`	`number`	`50`	Speed of typing in milliseconds.
`initialDelay`	`number`	`0`	Initial delay before typing starts.
`pauseDuration`	`number`	`2000`	Time to wait between typing and deleting.
`deletingSpeed`	`number`	`30`	Speed of deleting characters.
`loop`	`boolean`	`true`	Whether to loop through texts array.
`showCursor`	`boolean`	`true`	Whether to show the cursor.
`hideCursorWhileTyping`	`boolean`	`false`	Hide cursor while typing.
`cursorCharacter`	`string`	`"\|"`	Character to use as cursor.
`cursorBlinkDuration`	`number`	`0.5`	Animation duration for cursor blinking.
`cursorClassName`	`string`	`""`	Optional class name for cursor styling.
`textColors`	`string[]`	`[]`	Array of colors for each sentence.
`variableSpeed`	`{ min: number, max: number }`	`undefined`	Random typing speed within range for human-like feel.
`startOnVisible`	`boolean`	`false`	Start typing when component is visible in viewport.
`reverseMode`	`boolean`	`false`	Type backwards (right to left).

Prop	Type	Default	Description
`sentence-complete`	`(sentence: string, index: number) => void`	-	Emitted after each sentence is finished and deleted.

Keyboard shortcuts and ARIA behavior.

Screen readers read whatever has been typed so far, so a long sentence is announced in pieces. For critical copy, render the full text visually hidden next to it.