Text filled with a gradient that sweeps across it in a seamless loop.
npx shadcn@latest add https://hyperblur.dev/r/gradient-text.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/gradient-text.tsx.
import { GradientText } from "@/components/hyperblur/gradient-text"
<GradientText text="HYPERBLUR" speed={1} />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. |
| colors | string[] | ["#2f7bff", "#7fb3ff", "#ffffff", "#2f7bff"] | Gradient stops. End with the first color for a seamless loop. |
| speed | number | 1 | Animation speed multiplier. |
| angle | number | 90 | Gradient angle in degrees. |
| animate | boolean | true | Sweep the gradient. When false, shows it static. |