Stagger From Edges
Animated React per-character text reveal where characters start from both edges and converge toward the center. Built with Motion for modern product hero typography.
Installation
npx smoothui-cli add stagger-from-edgesFeatures
- Per-character edges-in reveal with subtle blur and upward drift
- Delay computed by distance from the nearest edge — characters converge to center
- Directional emphasis for modern product hero systems
- Configurable delay and per-step 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 blur or movement. The full string is exposed to screen readers via aria-label, with the per-character spans aria-hidden.
Props
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.
Top Down Letters
Animated React per-character text reveal where letters descend from above in a pronounced staircase, one symbol at a time, with zero blur. The top-down counterpart to Bottom Up Letters, built with Motion.