ai-animate

Text

DroppingText

Smooth inline word-cycling with slide-up animation for a departures board effect.

Installation

npm install @ai-animate/core

Usage

import { DroppingText } from '@ai-animate/core'


<p>Built for <DroppingText words={['Developers', 'Designers', 'AI Teams']} /></p>

Props

wordsstring[]['Developers', 'Designers', 'AI Teams', 'Everyone']Words to cycle through
wordColorsstring[][]Per-word text color overrides
holdMsnumber2000How long each word holds visible in ms
inMsnumber520Slide-in transition duration in ms
outMsnumber380Slide-out transition duration in ms
onWordChange(index: number) => voidundefinedCalled when active word index changes
classNamestring''className on the outer wrapper span