ColorShiftText

Text filled with a slowly flowing multi-colour gradient.

Make it unforgettable

bash
npx shadcn@latest add https://www.rad-ui.com/r/color-shift-text.json

React
import ColorShiftText from "@/components/fx/color-shift-text"

<h2>Make it <ColorShiftText>unforgettable</ColorShiftText></h2>

Text is never split.
Every colour in the gradient must meet contrast against the background, since any of them can sit under any letter.
Forced-colours mode falls back to plain text.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) freezes the gradient.

Prop	Type	Default	Description
children	ReactNode	—	The text. Never split.
as	'p' \| 'span' \| 'div' \| 'h1' \| 'h2' \| 'h3' \| 'h4'	'span'	Element to render.
colors	string[]	cyan, violet, pink	Colours that flow through the text.
duration	number	6	Seconds per cycle.