Animatetextwithstyle
The WordReveal component provides a beautiful text animation that reveals words one by one with a staggered motion effect. Perfect for hero sections, headings, and attention-grabbing text elements.
Installation
Examples
Sloweranimationwithcustomdelay
Customstyledanimation
Usage
Basic Usage
Custom Delay
You can adjust the animation timing by modifying the delay:
Custom Styling
The component accepts custom classes for styling:
Customization
Custom Text Size and Color
Custom Animation Timing
Custom Font Style
Notes
- The component uses Framer Motion for animations
- Each word is animated independently
- The animation includes opacity, blur, and vertical movement
- The component is responsive and adjusts text size based on screen width
- Custom styling can be applied through the className prop
Props
Prop | Type | Description | Default |
---|---|---|---|
text | string | The text content to animate | - |
delay | number | Delay between each word animation (in seconds) | 0.15 |
className | string | Additional CSS classes | - |