text

RotateText

Word rotation carousel with multiple animation styles.

npx chaos add rotate-text

PREVIEW

WORDNEXT

USAGE

import { RotateText } from '@/components/chaos/text/rotate-text';

<RotateText prefix="I am" words={['CHAOS', 'DESTRUCTION', 'POWER']} />
<RotateText words={['BUILD', 'BREAK', 'REPEAT']} animation="flip" highlight />
<RotateText prefix="We" words={['CREATE', 'DESTROY']} suffix="." bracket />

PROPS

PropTypeDefault

prefixStatic text before rotating words

string-

suffixStatic text after rotating words

string-

wordsWords to rotate through

string[]-

animationRotation animation

durationDuration each word is shown (ms)

number2000

speedAnimation speed

"fast" | "normal" | "slow""normal"

highlightHighlight active word

booleanfalse

highlightColorHighlight color

string"#ff0040"

underlineShow underline on active

booleanfalse

bracketShow brackets around rotator

booleanfalse

pauseOnHoverPause on hover

booleanfalse

cursorShow typing cursor

booleanfalse

onChangeCallback when word changes

(word: string, index: number) => void-