Typewriter animation with customizable typing and deleting effects.
Installation
Usage
import { TextType } from "Viora-ui";import { TextType } from "Viora-ui";
export default function TextTypeDemo() {
return (
<div className="flex min-h-[350px] w-full items-center justify-center p-6">
<TextType />
</div>
);
}API Reference
TextType
| Prop | Type | Default | Description |
|---|---|---|---|
| className? | string | "" | Additional CSS classes for custom styling. |
| showCursor? | boolean | false | Configuration for showCursor. |
| hideCursorWhileTyping? | boolean | false | Configuration for hideCursorWhileTyping. |
| cursorCharacter? | string | React.ReactNode | - | Configuration for cursorCharacter. |
| cursorBlinkDuration? | number | - | Configuration for cursorBlinkDuration. |
| cursorClassName? | string | - | Configuration for cursorClassName. |
| text | string | string[] | [] | Configuration for text. |
| as? | ElementType | - | Configuration for as. |
| typingSpeed? | number | - | Configuration for typingSpeed. |
| initialDelay? | number | - | Configuration for initialDelay. |
| pauseDuration? | number | - | Configuration for pauseDuration. |
| deletingSpeed? | number | - | Configuration for deletingSpeed. |
| loop? | boolean | false | Configuration for loop. |
| textColors? | string[] | [] | Configuration for textColors. |
| variableSpeed? | { min: number; max: number } | - | Configuration for variableSpeed. |
| onSentenceComplete? | (sentence: string, index: number) => void | - | Callback fired on sentencecomplete event. |
| startOnVisible? | boolean | false | Configuration for startOnVisible. |
| reverseMode? | boolean | false | Configuration for reverseMode. |
Built by Otis
Last updated: 9/13/2026