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.

Installation

npx smoothui-cli add stagger-from-center

Features

• Per-character center-out reveal with subtle blur and upward drift
• Delay computed by distance from center — not linear index
• Emphasizes the core of the word for product hero use cases
• 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

Created by

Eduardo Calvo

Improved by

Powered by

motion.dev