Kinetic Center Build
Apple keynote-style word-by-word build — each new word enters from the right and pushes the line until the full phrase locks centered.
Words
Installation
npx smoothui-cli add kinetic-center-buildFeatures
- Word-by-word build with right-to-left entry and push reflow
- Layout-animated centering as words are added
- Soft blur entry and clean blur exit per word
- 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, the full phrase appears at once and swaps instantly. The current phrase is announced via aria-live="polite".
Props
Focus Blur Resolve
A premium focus pull from heavy blur to crisp text. Whole-text entrance with blur, upward drift, and scale settle — ideal for hero headlines and section titles.
Line-by-Line Slide
Animated React per-line text reveal where each line slides in from the left with a staggered entrance — inspired by Apple landing page subheads, built with Motion.