Shiny Text
Text Effects
Animated shine sweep effect across text with speed, direction, spread, and yoyo controls.
Loading preview...
Customize
Direction:
Text
Speed (s)2
Spread (deg)120
Yoyo
Pause on Hover
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | required | Text to render with the shine effect. |
disabled | boolean | false | Pauses the shine animation. |
speed | number | 2 | Duration (seconds) of one sweep. |
className | string | '' | Additional classes for the text span. |
color | string | '#b5b5b5' | Base text color in the gradient. |
shineColor | string | '#ffffff' | Bright highlight color. |
spread | number | 120 | Gradient angle in degrees. |
yoyo | boolean | false | Runs back-and-forth animation cycle. |
pauseOnHover | boolean | false | Pauses sweep while hovering. |
direction | 'left' | 'right' | 'left' | Direction of the sweep. |
delay | number | 0 | Delay (seconds) after each cycle. |