Text Reveal Animation

A beautiful text reveal animation component that creates a smooth, word-by-word reveal effect with blur and fade transitions. Perfect for hero sections, quotes, and attention-grabbing text content.

Preview

Don’twaitfortheperfectmoment.Takethemomentandmakeitperfect.Consistenteffort,evenwhennooneiswatching,iswhatbuildsgreatnessovertime.

Features

✨ Smooth Animation: Word-by-word reveal with staggered timing
🌫️ Blur Effect: Elegant blur-to-clear transition for each word
🎯 Customizable: Easy to modify timing, text, and styling
� Responsive: Works perfectly on all screen sizes
⚡ Performance: Optimized with Framer Motion for smooth 60fps animations
🎨 Flexible: Supports any text content and styling

Installation

You can add this component to your project using the CLI or by manually copying the code.

npx shadcn@latest add textreveal.json

Dependencies

This component requires framer-motion for animations. Install it if you haven't already:

Basic Usage

Import and use the TextReveal component in your React application:

Customization

Custom Text Content

You can easily customize the text content by modifying the textToAnimate variable:

Animation Timing

Adjust the animation timing by modifying these values:

Styling Options

Customize the appearance by modifying the className and styles:

Advanced Examples

Hero Section Implementation

Quote Display

Animation Properties

Property	Type	Default	Description
staggerChildren	number	0.1	Delay between each word animation
delayChildren	number	0.04	Initial delay before animations start
duration	number	0.8	Duration of each word's animation
ease	string	easeInOut	Easing function for smooth transitions
blur	string	10px → 0px	Blur effect transition
y	number	20 → 0	Vertical movement distance

Browser Support

This component works in all modern browsers that support:

CSS filter: blur()
CSS Flexbox
ES6+ JavaScript features
Framer Motion (React 16.8+)

Performance Tips

The component automatically optimizes animations for 60fps
Uses transform and filter properties for hardware acceleration
Minimal DOM manipulation for smooth performance
Consider using will-change: transform for very long text content

Accessibility

The component maintains accessibility by:

Preserving text content for screen readers
Not interfering with keyboard navigation
Maintaining semantic HTML structure
Supporting reduced motion preferences (can be enhanced with prefers-reduced-motion)

Troubleshooting

Animation not working?

Ensure framer-motion is properly installed
Check that the component is wrapped in a client component ('use client')
Verify CSS classes are available in your styling system

Performance issues?

Reduce the number of words for very long text
Adjust staggerChildren timing for faster reveals
Consider using transform3d for better GPU acceleration