text

TypingText

Typewriter animation with customizable cursor and looping.

npx chaos add typing-text

PREVIEW

TYPE

USAGE

import { TypingText } from '@/components/chaos/text/typing-text';

<TypingText text="Hello World" />
<TypingText text="Loading..." variant="terminal" loop />
<TypingText text="SYSTEM ONLINE" speed={100} cursorStyle="line" />

PROPS

PropTypeDefault

textText to type out

string-

speedTyping speed in ms per character

number50

delayDelay before starting in ms

number0

showCursorShow cursor

booleantrue

cursorStyleCursor style

"block" | "line" | "underscore""block"

variantVisual variant

"default" | "terminal" | "hacker" | "cyber" | "ghost""default"

loopLoop the animation

booleanfalse

loopDelayPause between loops in ms

number2000

deleteSpeedDelete speed when looping

number30

onCompleteCallback when typing completes

() => void-