React Random Text Reveal Animation

An interactive text animation component that creates a mesmerizing random character scrambling effect before revealing the actual text. Perfect for hover effects, loading animations, and creating engaging text interactions that capture user attention.

Preview

Hover over this text to see the magic!

Features

✨ Interactive Animation: Hover or click-triggered random character scrambling
🎲 Random Scrambling: Letters randomly cycle through alphabet before revealing
🎯 Customizable: Control duration, trigger events, and styling
📱 Responsive: Works perfectly on all screen sizes and devices
⚡ Performance: Optimized with Framer Motion for smooth 60fps animations
🎨 Flexible: Supports any text content and custom styling
🔧 Easy Integration: Simple props-based API for quick setup

Installation

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

npx shadcn@latest add randomtextreveal.json

Dependencies

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

Basic Usage

Import and use the RandomTextReveal component in your React application:

Customization

Custom Text Content

You can easily customize the text content by passing the text prop:

Animation Duration

Control the speed of the scrambling animation by adjusting the duration prop:

Trigger Events

Choose how the animation is triggered with the onHover or onScroll props:

Custom Styling

Apply custom styles using the className prop:

Click Handler

Add click functionality with the onClick prop:

Advanced Examples

Hero Section with Hover Effect

Loading Animation

Component Props

Prop	Type	Default	Description
text	string	required	The text content to be animated
duration	number	50	Duration in milliseconds between character changes
onHover	boolean	true	Whether to trigger animation on hover (true) or click (false)
onScroll	boolean	false	Trigger animation when the element enters the viewport
className	string	undefined	Additional CSS classes for styling
onClick	function	undefined	Click handler function

Animation Properties

Property	Type	Default	Description
iteration speed	number	0.5	Speed of character iteration (higher = faster)
character set	string	A-Z	Alphabet used for random characters
space handling	boolean	preserved	White spaces are preserved during animation
trigger event	string	hover/click/viewport	User interaction that starts animation

Browser Support

This component works in all modern browsers that support:

ES6+ JavaScript features
Framer Motion (React 16.8+)
CSS transforms and transitions
Modern event handling

Performance Tips

The component uses efficient interval-based animations
Automatically clears intervals when animation completes
Minimal DOM manipulation for smooth performance
Optimized character generation using pre-defined alphabet
Consider reducing duration for better performance on slower devices

Accessibility

The component maintains accessibility by:

Preserving original text content for screen readers
Maintaining semantic HTML structure
Supporting keyboard navigation
Not interfering with assistive technologies
Text remains selectable and copyable

Troubleshooting

Animation not working?

Ensure framer-motion is properly installed
Check that the component is wrapped in a client component ('use client')
Verify that text prop is provided and not empty

Animation too fast/slow?

Adjust the duration prop (lower values = faster animation)
Test different values to find the optimal speed for your use case

Text not visible?

Check CSS classes and ensure text color contrasts with background
Verify that the component has proper dimensions and positioning
Ensure no parent elements are hiding the content

Performance issues?

Reduce duration for faster completion
Avoid using very long text strings
Consider using the component sparingly on a single page

React Random Text Reveal Animation Copy Page