Word Cut Staircase
Per-word hard-cut staircase transition — each word flips in and out with stepped timing for sharp, editorial phrase swaps.
Layerednavigation.
Installation
npx smoothui-cli add shared-axis-yFeatures
- 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
Shared Axis X
Horizontal shared-axis phrase transition inspired by Google Material — outgoing phrase slides left as the next slides in from the right.
Shared Axis Z
Scale-based phrase transition inspired by Google Material shared axis (Z) — incoming text scales up from depth while the outgoing phrase scales out and fades.