Shine Text
Animated React text with a metallic light sweep gliding across the letters on a loop, built with Motion and a clipped moving gradient.
Shipping soonA light sweep across the text.
Installation
npx smoothui-cli add shine-textFeatures
- A bright highlight band sweeps across the text on a continuous loop
- Clipped moving gradient (
background-clip: text) — works on any string - Configurable
duration,repeatDelay,baseColor, andshineColor - Theme-aware defaults (muted base, foreground shine)
- Accessible: respects
prefers-reduced-motion
Accessibility
Reduced Motion
Respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the text renders statically in baseColor with no sweeping gradient.
Props
Shimmer Sweep
Animated React whole-text entrance with a left-to-center slide and blur dissolve — a subtle sweep across a clean headline, built with Motion.
Short Slide Down
Each new word drops in from above into its own line and pushes the stack downward until a centered multi-line composition locks in place.