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.
Installation
npx smoothui-cli add shimmer-sweepFeatures
- Whole-text fade-in with a left-to-center slide and blur dissolve
- Smooth ease-out curve (
cubic-bezier(0.22, 1, 0.36, 1)) - Configurable delay
- Optional scroll-trigger via
triggerOnView - 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 immediately at full opacity with no slide or blur. The full string is exposed to screen readers via aria-label, with the animated span aria-hidden.
Props
Shared Axis Z
Scale-based phrase transition inspired by Google Material shared axis (Z) — incoming text scales up from depth while the outgoing phrase scales out and fades.
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.