Text
TextType
A typewriter animation component for AI workflows. Supports cycling multiple strings, variable speed, cursor blinking, reverse mode, and start-on-visible.
Installation
npm install @ai-animate/core
Usage
import { TextType } from '@ai-animate/core'
<TextType
text={["Generating...", "Searching...", "Done."]}
typingSpeed={50}
loop
/>
Props
textstring | string[]—Text or array of strings to type
typingSpeednumber50Milliseconds per character
deletingSpeednumber30Milliseconds per deleted character
pauseDurationnumber2000Pause before deleting (ms)
loopbooleantrueLoop through text array
showCursorbooleantrueShow blinking cursor
cursorCharacterstring | ReactNode|Cursor character
cursorBlinkDurationnumber0.5Cursor blink speed (seconds)
hideCursorWhileTypingbooleanfalseHide cursor during typing
variableSpeed{ min, max }undefinedRandom speed range (ms)
textColorsstring[][]Color per string in array
reverseModebooleanfalseType text right to left
startOnVisiblebooleanfalseStart when scrolled into view
initialDelaynumber0Delay before first character (ms)
onSentenceCompletefunctionundefinedCallback per completed string
asElementTypedivHTML element to render as