Text Animation
The Text Animation - a component that brings your text to life with smooth, customizable animations. Whether you want to animate characters, words, or entire lines, this component has got you covered. It's like having a personal animator for your text content!
Installation
First, make sure you have the required dependencies:
npx vynk add text-animation
yarn vynk add text-animation
pnpm dlx vynk add text-animation
bunx --bun vynk add text-animation
Usage
Here's how to bring your text to life:
import { TextAnimation } from "@/components/ui/text-animation"
// Your component
const MyComponent = () => {
return (
<TextAnimation
text="Hello, World!"
by="chars"
direction="bottom"
blur={true}
fade={true}
/>
)
}Props
The component comes with a variety of animation options:
| Prop | Type | Required | Description |
|---|---|---|---|
text | string | Yes | The text content to animate |
className | string | No | Additional CSS classes for custom styling |
delay | number | No | Initial delay before animation starts (in seconds) |
duration | number | No | Duration of the animation (in seconds) |
startDelay | number | No | Delay before the animation sequence begins |
staggerChildren | number | No | Delay between each element's animation |
by | 'words' | 'chars' | 'lines' | 'none' | No | How to split the text for animation |
blur | boolean | No | Whether to include blur effect in animation |
fade | boolean | No | Whether to include fade effect in animation |
ease | 'easeInOut' | 'easeIn' | 'easeOut' | No | Animation easing function |
direction | 'top' | 'bottom' | 'right' | 'left' | No | Direction of the animation |
animationDirection | 'default' | 'reverse' | No | Whether to animate from start to end or vice versa |
Animation Variations
Here are some examples of different animation styles you can create:
Word-by-Word Animation
Character-by-Character Animation
Line-by-Line Animation
No Animation Split
Features
- Multiple Animation Modes: Animate by characters, words, lines, or as a whole
- Customizable Effects: Combine blur and fade effects for stunning results
- Directional Control: Animate from any direction
- Timing Control: Fine-tune delays and durations
- Responsive Design: Looks great on all screen sizes
Common Issues
-
"The animation isn't starting!" - Check if you've provided the required
textprop -
"The animation looks choppy!" - Try adjusting the
durationandstaggerChildrenvalues -
"The text is not splitting correctly!" - Verify the
byprop matches your intended animation style
Contributing
Found a bug or have an improvement in mind? We welcome your contributions! Just make sure your code follows our standards and includes appropriate tests.
The Text Animation component is your go-to solution for adding that extra flair to your text content! ✨