Reveal Text

Animated React text reveal component with directional entrances, staggered character and word animations, and customizable timing.

Installation

npx smoothui-cli add reveal-text

Features

• 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

Created by

Edu Calvo

Powered by

motion.dev