Word Cut Staircase

Per-word hard-cut staircase transition — each word flips in and out with stepped timing for sharp, editorial phrase swaps.

Installation

npx smoothui-cli add shared-axis-y

Features

• Hard-cut per-word opacity flips with staircase stagger timing
• Sharp, editorial feel with no easing curves
• 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 stagger. The current phrase is announced via aria-live="polite".

Props

Created by

Eduardo Calvo

Improved by

Powered by

motion.dev