Spring Scale In
Animated React per-word text reveal with a soft overshoot scale — iOS app icon-style pop, built with Motion.
Installation
npx smoothui-cli add spring-scale-inFeatures
- Per-word scale-in with a soft overshoot (
cubic-bezier(0.34, 1.56, 0.64, 1)) - iOS home screen / Dock-inspired bounce pop
- Configurable delay and per-word stagger
- 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 scale animation. The full string is exposed to screen readers via aria-label, with the per-word spans aria-hidden.
Props
Soft Blur In
Animated React per-character text reveal with a gentle blur and upward motion — Apple's signature hero-title entrance, built with Motion.
Stagger From Center
Animated React per-character text reveal where characters emerge from the center outward, emphasizing the keyword core. Built with Motion for product hero typography.