← All components
Typography / effect
Gradient Text
Flowing color with an optional matching gradient border.
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- The saturated gradient is intended for large display text on the shown black backplate. When placing the primitive on another background or using body-sized text, the caller must choose colors and check contrast for that context.
- The included Demo.tsx and shared/demo.css recreate the complete preview. Import the main component to compose your own design.
- No continuous work while idle, offscreen, or paused. Reduced motion renders a settled view.
- Heading preserves the original three-color palette; Status uses brighter small-text defaults. Each scene has exact scalar Color1/2/3 controls that serialize to the same ordered colors array.
- The original GradientText and Demo/defaults are unchanged. Both new contexts retain text through Pause/Replay and honor the original border, direction, yoyo and hover behavior.
React 19CSS
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children (required) | ReactNode | — (required) | Text |
colors | string[] | ["#5227FF", "#FF9FFC", "#B497CF"] | Gradient color stops; the first color is repeated for a seamless loop. |
animationSpeed | number seconds/cycle | 8 | Cycle duration |
showBorder | boolean | false | Gradient border |
direction | horizontal|vertical|diagonal | horizontal | Direction |
pauseOnHover | boolean | false | Pause on hover |
yoyo | boolean | true | Reverse each pass |
paused | boolean | false | Suspend decoration without changing caller state, retained text, local input or results. |
replayToken | number | 0 | Restart decoration while retaining caller state and local work in the new contexts. Legacy Thought/Lattice Demo explicitly restarts its synthetic interaction. |
className | string | | Additional classes for the outer element. |
colorA | string | #C9B8FF | Complete contexts: first scalar stop; primitive uses the safely serialized colors array. |
colorB | string | #FFBBEE | Complete contexts: second scalar stop. |
colorC | string | #BEEAE3 | Complete contexts: third scalar stop. |