Reveal Text
Animated React text reveal component with directional entrances, staggered character and word animations, and customizable timing.
Reveal Text Examples
Welcome to SmoothUI
Beautiful animations
Made with Framer Motion
Scroll down to see more examples!
Installation
npx smoothui-cli add reveal-textFeatures
- Enter animations from up, down, left, or right
- Character or word stagger options
- Delay and duration controls
- Built with Framer Motion
- Accessible and performant
Accessibility
Reduced Motion
This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the text is displayed immediately at full opacity without any directional slide animation.
Props
Per Word Crossfade
Animated React per-word text reveal with a calm fade and upward drift — keynote-style heading entrance, built with Motion.
Scale Down Fade
Animated React whole-text reveal with a subtle premium settle-in — the text enters slightly scaled up and settles to its natural size, built with Motion.