Reveal Text

Animate text into view from different directions with staggered characters.

Open in v0~0.4 kB

Last updated: March 7, 2026

Reveal Text Examples

Welcome to SmoothUI
Beautiful animations
Made with Framer Motion
Scroll down to see more examples!

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

Magnetic Button

Button that subtly follows the cursor with a magnetic effect.

Scramble Hover

Animated text scramble effect on hover for React. Creates playful, Matrix-style character animations with customizable speed and duration. Built with Motion.

On this page

Installation
Features
Accessibility
Reduced Motion
Props

Created by

Edu Calvo's avatar
Edu Calvo

Powered by

motion.dev