ai-animate

Text

MorphText

Smoothly crossfade between words with blur in and out effect.

Installation

npm install @ai-animate/core

Usage

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


<MorphText words={['Generate', 'Stream', 'Deploy', 'Scale']} />

Props

wordsstring[]['Generate', 'Stream', 'Deploy', 'Scale']Array of words to cycle through
holdMsnumber2000Time each word displays in milliseconds
transitionMsnumber600Duration of crossfade and blur transition in milliseconds
fontSizestringundefinedFont size
colorstring'#ffffff'Text color
fontWeightnumber700Font weight
loopbooleantrueWhether to loop continuously
classNamestringundefinedAdditional CSS class