← DOCS
text

FallingText

Letters that fall in cascade with staggered animation.

npx chaos add falling-text

PREVIEW

FALLING

USAGE

import { FallingText } from '@/components/chaos/text/falling-text';

<FallingText>FALLING</FallingText>
<FallingText direction="up" stagger={50}>RISING</FallingText>
<FallingText loop={false}>ONCE</FallingText>

PROPS

PropTypeDefault
childrenThe text to display
string-
durationFall duration in seconds
number2
staggerDelay between letters in ms
number100
loopLoop the animation
booleantrue
directionFall direction
"down" | "up""down"