Depth Parallax Words
Animated React per-word text reveal with scale, vertical drift, and blur for layered depth — product landing page entrance, built with Motion.
Installation
npx smoothui-cli add depth-parallax-wordsFeatures
- Per-word depth motion: fade-in, upward drift (18 px), scale (0.92 → 1), and soft blur (3 px)
- Apple signature ease-out (
cubic-bezier(0.22, 1, 0.36, 1)) - Configurable delay and per-word stagger
- 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 depth animation. The full string is exposed to screen readers via aria-label, with the per-word spans aria-hidden.
Props
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.
Fade Through
Material-style phrase cycling animation — old text fades out, new text fades in with a soft delay. Ideal for hero headlines and rotating taglines.