Shiny Text
Shiny Text animates a moving gradient highlight across text. You can control the sweep speed, direction, spread angle, idle delay, and optional yoyo behavior for back-and-forth motion.
ShinyText
Animated gradient text, with all props on display.
Slow (Default)
Shining slowly
Fast & Gold
Premium Unlock
Yoyo - back & forth
Bouncing light ray
RTL - hover to pause
Hover me to pause
Delayed sweep
Slow reveal
Wide spread
Broad shimmer
Basic Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | required | Text content to render with the shine effect. |
disabled | boolean | false | Disables animation and keeps text static. |
speed | number | 5 | Sweep duration in seconds. |
className | string | "" | Additional classes for the text element. |
color | string | "#4b5563" | Base text color used in gradient stops. |
shineColor | string | "#ffffff" | Highlight color at the center of the sweep. |
spread | number | 120 | Gradient angle in degrees. |
yoyo | boolean | false | Reverses the sweep back after each pass. |
pauseOnHover | boolean | false | Pauses motion while hovered. |
direction | "left" | "right" | "left" | Controls sweep direction. |
delay | number | 0 | Idle delay in seconds between sweeps. |
Direction + Hover Pause
Loading...
Yoyo Sweep
Loading...
Tip: Use Alt + ← / → to navigate