Gradient text
A slow gradient flows through the letters on a seamless loop, clipped to real, selectable text.
Text, timeline, looping, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/gradient-text.tsx https://motion-brew.com/r/gradient-text.tsxOne self contained file for React and Tailwind CSS: gradient-text.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { GradientText } from "@/components/gradient-text";
export default function Page() {
return (
<GradientText as="h1" text="Color in motion" colors={["#8b5cf6", "#d6498f", "#f59e0b"]} className="text-6xl font-bold" />
);
}Props
| Prop | Type | Default | Description | ||||
|---|---|---|---|---|---|---|---|
| text | string | "Color in motion" | The text | ||||
| as | "h1" \ | "h2" \ | "h3" \ | "p" \ | "span" | "h2" | Element to render |
| colors | string[] | violet, pink, amber | Gradient stops; the first repeats at the end so the loop is seamless | ||||
| speed | number | 6 | Seconds per loop | ||||
| className | string | Font and size |
More text
- Highlight text: A marker sweeps behind key phrases one after another as the paragraph scrolls into view.
- Rotating text: Text set on a circle spins around an arrow badge.
- Shimmer text: The thinking sheen: a bright band sweeps across muted text on a loop, for AI and loading states.
- Annotation text: Hand-drawn pen marks draw themselves around words in view: circles, underlines, boxes and strikes, chained one after another.