Text
GradientCycleText
Text with a rotating gradient that sweeps through colours continuously via background-position.
Installation
npm install @ai-animate/core
Usage
import { GradientCycleText } from '@ai-animate/core'
<GradientCycleText text="Infinite Possibility" colors={['#ff0080', '#7928ca', '#0070f3', '#00dfd8', '#ff0080']} />
Props
textstring—Text to display (required)
colorsstring[]['#ff0080', '#7928ca', '#0070f3', '#00dfd8', '#ff0080']Array of gradient colors. Repeat first color at end for smooth loop.
durationnumber4Duration of gradient cycle in seconds
fontSizestringclamp(2rem, 5vw, 4rem)Font size
fontWeightnumber800Font weight
backgroundstring#000Background color
classNamestringundefinedAdditional CSS class