ShineFx creates a smooth, animated shine effect that sweeps across text. The effect uses a gradient that moves horizontally, creating a shimmering appearance ideal for drawing attention to important text.
Adjust the animation speed with the speed (milliseconds) prop. Higher values create slower animations, while lower values make the shine effect faster.
Use the inverse prop to invert the shine effect.
Control the base text visibility with the baseOpacity prop (0-1). Higher values improve readability and accessibility, while lower values create a more subtle effect.
Disable the animation with the disabled prop to show static text without the shine effect.
ShineFx works with all Text component variants and styling props.
ShineFx automatically detects low-end devices and the prefers-reduced-motion system setting. When either is detected, the shine animation is disabled (equivalent to disabled={true}). You can override this with the reducedMotion prop.
See useReducedMotion for details.