Gradient Text
Text with a living highlight: a drifting shimmer or a pointer spotlight.
Gradient Text gives words a living highlight. In drift mode a soft glint of the signal color slides through the text on a loop; in spotlight mode the color sits under your pointer, as if you were lighting the line with a torch. The base color is always your foreground, so it reads on any theme, and the text stays real: selectable, translatable and indexed.
Preview
Interfaces with a signal.
Move your pointer across this line to light it like a torch.
drift · spotlightInstallation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/gradient-text.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/gradient-text.
Builds on: motion
Usage
import { GradientText } from "@/components/ui/gradient-text";
Interfaces with a <GradientText>signal</GradientText>.
<GradientText variant="spotlight">Hover me</GradientText>Motion
GSAP loops the highlight position (drift) or eases it to the pointer with quickTo (spotlight).
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
GradientText
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "drift" | "spotlight" | "drift" | Looping shimmer, or a highlight that follows the pointer. |
| color | string | signal, deepened | Highlight color. |
| duration | number | 3.2 | Seconds per drift sweep. |
| asChild | boolean | false | Use your own element. |
Accessibility
- The resting color is the foreground, so contrast never depends on the animation.
- With reduced motion or --cl-motion: 0 the effect stays still and the content remains fully usable.
FAQ
Also searched as: animated gradient text · shiny text react · text spotlight effect · text shimmer · aurora text