Short Slide Right
The whole phrase glides in from the left as one compact move while words reveal in sequence through opacity — Keynote-style editorial restraint.
Movewithintent.
Installation
npx smoothui-cli add short-slide-rightFeatures
- Shared horizontal container translation with per-word opacity stagger
- Compact travel distance keeps motion editorial, not swishy
- Clean exit with slight rightward drift and blur
- Respects
prefers-reduced-motion - Announces updates via
aria-live="polite"
Accessibility
Reduced Motion
Respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, phrases swap instantly with no translation or opacity stagger. The current phrase is announced via aria-live="polite".
Props
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.
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.