Blur Out Up
Animated React per-word text reveal — words arrive clean from a gentle blur and upward drift, Apple-style airy entrance, built with Motion.
Installation
npx smoothui-cli add blur-out-upFeatures
- Per-word fade-in with a gentle blur (6 px) and upward drift (10 px)
- Apple signature ease-out (
cubic-bezier(0.22, 1, 0.36, 1)) - Fast stagger (28 ms) keeps total duration tight
- Optional scroll-trigger via
triggerOnView - Accessible: respects
prefers-reduced-motion
Accessibility
Reduced Motion
Respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the text renders immediately at full opacity with no blur or movement. The full string is exposed to screen readers via aria-label, with the per-word spans aria-hidden.
Props
Magnetic Button
Animated React magnetic button that follows the cursor with spring physics, configurable strength, and reduced motion support.
Bottom Up Letters
Animated React per-character text reveal where letters rise from below in a pronounced staircase, one symbol at a time, with zero blur. Apple-style keynote typography, built with Motion.