Shared Axis X

Horizontal shared-axis phrase transition inspired by Google Material — outgoing phrase slides left as the next slides in from the right.

Installation

npx smoothui-cli add shared-axis-x

Features

• Smooth horizontal enter/exit transitions between cycling phrases
• Material-inspired directional continuity
• 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 scale. The current phrase is announced via aria-live="polite".

Props

Created by

Eduardo Calvo

Improved by

Powered by

motion.dev