Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA horizontal color band sweeps across text with a gradient shine, then settles on your theme foreground color.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Override colors for a shorter or softer palette on a single line of text.
Pass text as an array and set repeat to cycle strings after each sweep. You can place static words in the same <h1> (or paragraph) before the component—no extra layout wrappers are required for basic inline use.
Use fixedWidth when the strings differ a lot in length and you want to avoid horizontal layout shift (not shown in this example).
Slow the sweep with duration, or add a short delay before the band moves.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | string[] | — | Text to display. Use an array to rotate between strings when repeat is on. |
colors | string[] | ["#c679c4", "#fa3d1d", "#ffb005", "#e1e1fe", "#0358f7"] | Colors in the sweeping gradient band. |
textColor | string | var(--foreground) | Solid text color after the animation (matches your theme by default). |
duration | number | 1.5 | Sweep duration in seconds. |
delay | number | 0 | Delay before the sweep starts, in seconds. |
repeat | boolean | false | When text is an array, advance to the next string after each cycle. |
repeatDelay | number | 0.5 | Pause in seconds before replaying or advancing (when repeat is true). |
startOnView | boolean | true | Start the animation when the element enters the viewport. |
once | boolean | true | Play only the first time (when startOnView is used). |
className | string | — | Additional CSS classes on the root span. |
fixedWidth | boolean | false | Lock width to the widest string when text is an array to reduce layout shift. |