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"