Text Reveal
Animated text component with multiple reveal effects including slide, fade, scale, blur, and typewriter animations.
Pro Features
Unlock advanced capabilities with the Pro version
Multiple Animation Effects
Choose from 8 different animation styles including slide, fade, scale, blur, and typewriter effects
Granular Control
Animate entire text blocks, individual words, or character-by-character for precise visual control
Advanced Timing
Fine-tune animation timing with custom delays, durations, and stagger effects between elements
Viewport Triggering
Smart scroll-based animation triggering that starts when text enters the user's viewport
Repeating Animations
Create attention-grabbing effects with configurable repeating animations and custom intervals
Custom Variants
Build unique effects with custom Framer Motion variants for unlimited creative possibilities
Installation
Install via CLI
npx moonui-cli@latest add text-revealUsage
Examples
Basic Text Animation
Simple text reveal with slide up effect.
Different Animation Effects
Compare various text reveal animations side by side.
Word-by-Word Animation
Animate text word by word for dramatic effect.
Character-by-Character Animation
Fine-grained character-level animation for maximum impact.
Typewriter Effect
Classic typewriter animation that reveals text character by character.
Speed Variations
Control animation speed with different presets.
Slow Speed
Normal Speed
Fast Speed
Repeating Animation
Text that continuously repeats its animation with customizable delay.
Perfect for attention-grabbing headers
Custom Animation Variants
Create your own animation effects with custom variants.
Hero Section Example
Real-world usage in a hero section with multiple text elements.