Text Chroma Reveal
A chromatic ribbon sweep that paints each of your headlines cleanly into view.
textchromarevealgradientspectrumheadlineanimationtypography
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | string[] | - | Phrase or rotating phrases to reveal. |
as | "span" | "p" | "div" | "h1"–"h6" | "span" | Tag rendered as the outer element. |
colors | string[] | spectrum | Chromatic ribbon colors across the reveal band. |
textColor | string | "currentColor" | Final revealed text color. |
direction | "ltr" | "rtl" | "ltr" | Sweep direction across the text. |
duration | number | 1.5 | Reveal sweep duration in seconds. |
delay | number | 0 | Delay before the sweep starts, in seconds. |
repeat | boolean | false | Cycle phrases / replay after hold + fade. |
holdDuration | number | 1 | Hold fully revealed before fading, in seconds. |
fadeDuration | number | 0.6 | Fade-out duration between cycles, in seconds. |
repeatDelay | number | 0.5 | Pause after fade before the next sweep, in seconds. |
fixedWidth | boolean | false | Lock width to the longest phrase so rotating text does not shift layout. |
startOnView | boolean | true | When true, wait for viewport entry. When false, play on mount. |
once | boolean | true | Play only once when using viewport trigger. |