Metallic sheen sweeps across text producing a reflective highlight.
Every prop is wired to the controls underneath. Hover the text with Pause on Hover on to freeze the shine.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | - | The text to be displayed with the shiny effect. |
color | string | "#b5b5b5" | The base color of the text. |
shineColor | string | "#ffffff" | The color of the shine/highlight effect. |
speed | number | 2 | Duration of one animation cycle in seconds. |
delay | number | 0 | Pause duration (in seconds) between animation cycles. |
spread | number | 120 | The angle (in degrees) of the gradient spread. |
yoyo | boolean | false | If true, the animation reverses direction instead of looping. |
pauseOnHover | boolean | false | Pauses the animation when the user hovers over the text. |
direction | 'left' | 'right' | "left" | The direction the shine moves across the text. |
disabled | boolean | false | Disables the shiny effect when set to true. |
Keyboard shortcuts and ARIA behavior.