Inline text with a shifting multi-stop gradient fill from kit color tokens. Glyphs stay still; only the clipped background moves. Configurable colors and speed.
Install with the CLI, or copy the component source into your project.
Add spectrum-text (npm)
npx --yes -p github:itsvigneshv/default-file-ui#main df-ui add spectrum-text
Default kit spectrum: rose-470, violet-670, blue-530, azure-330. Text stays still.
Neutral ink ramp from kit tokens. CSS variables paint via a CSS gradient fallback.
speed multiplies the base 10s loop. Higher values run faster.
Slow
Default
Fast
Exported stops: var(--spectrum-text-color-1), var(--spectrum-text-color-2), var(--spectrum-text-color-3), var(--spectrum-text-color-4).
SpectrumText
Inline text with a shifting multi-stop gradient fill built from SVG gradient code (data URI, not an external file). Glyphs stay still; only the clipped background moves. Screen readers get a plain copy; the animated layer is aria-hidden.
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Text or inline content to paint with the gradient fill. |
| colors | string[] | DEFAULT_SPECTRUM_COLORS | Gradient stops for the fill. Rendered as inline SVG linearGradient markup when colors are hex or rgb. CSS variables fall back to a CSS gradient. The first color is appended again so the loop stays seamless. |
| speed | number | 1 | Animation speed multiplier. 1 is the base loop (10s). 2 runs twice as fast (5s). |
| className | string | - | Additional styles on the host span. |
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --spectrum-text-color-1 | CSS color | var(--df-rose-470) | First stop. Closest kit match to magenta: rose-470. |
| --spectrum-text-color-2 | CSS color | var(--df-violet-670) | Second stop. Closest kit match to violet: violet-670. |
| --spectrum-text-color-3 | CSS color | var(--df-blue-530) | Third stop. Closest kit match to blue: blue-530. |
| --spectrum-text-color-4 | CSS color | var(--df-azure-330) | Fourth stop. Closest kit match to sky: azure-330. |
| --spectrum-text-duration | time | 10s | Base loop duration at speed 1. The component overrides this from the speed prop. |
| --spectrum-text-ease | easing | ease-in-out | Timing function for the spectrum loop. |
| --spectrum-text-background-size | background-size | 200% auto | Gradient size so position shifts read clearly. |