Beautiful text animations for React - typewriter, particle effects, morphing, and more. Zero dependencies, TypeScript support, highly customizable.
npm install react-text-animator


Beautiful text animations for React with zero dependencies. Make your text come alive with typewriter effects, particle explosions, morphing text, glitch effects, and more!
- 🎨 9 Animation Types - Typewriter, particles, slide, fade, morph, scramble, glitch, wave, blur
- 🚀 Zero Dependencies - No external dependencies, lightweight bundle (~4KB gzipped)
- 💪 TypeScript Support - Full type definitions included
- ⚡ Performance Optimized - Smooth 60fps animations using CSS and Canvas
- 🎯 Flexible Triggers - Auto, hover, click, scroll into view, or manual
- 🎛️ Highly Customizable - Control duration, delay, easing, and more
- 📦 Easy to Use - Simple API, one component does it all
``bash`
npm install react-text-animator
`bash`
yarn add react-text-animator
`bash`
pnpm add react-text-animator
`tsx
import { TextAnimate } from 'react-text-animator';
function App() {
return (
Hello World!
);
}
`
`tsx`
This text types out character by character
`tsx`
particleCount={100}
particleSize={16}
>
Watch me explode!
`tsx`
Sliding into view
`tsx`
Fading in smoothly
`tsx`
morphTexts={["Hello", "World", "React"]}
morphInterval={2000}
>
Morphing
`tsx`
Decode this message
`tsx`
Cyber Text
`tsx`
Wavy Text
`tsx`
Coming into focus
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| animation | AnimationType | required | Type of animation to use |trigger
| | 'auto' \| 'hover' \| 'click' \| 'view' \| 'manual' | 'auto' | When to trigger the animation |duration
| | number | 1000 | Animation duration in milliseconds |delay
| | number | 0 | Delay before animation starts (ms) |stagger
| | number | 50 | Delay between each character/word (ms) |easing
| | EasingType | 'easeOutCubic' | Easing function for animation |className
| | string | '' | Additional CSS classes |style
| | CSSProperties | {} | Inline styles |onComplete
| | () => void | - | Callback when animation finishes |repeat
| | boolean \| number | false | Repeat animation (true = infinite) |reverse
| | boolean | false | Play animation in reverse |
#### Particle Animation
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| particleCount | number | 100 | Number of particles |particleSize
| | number | 16 | Size of each particle |particleColor
| | string | (inherited) | Color of particles (inherits text color if not specified) |
#### Morph Animation
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| morphTexts | string[] | - | Array of texts to morph between |morphInterval
| | number | 3000 | Time between morphs in milliseconds |
#### Wave Animation
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| waveAmplitude | number | 20 | Height of the wave motion |
#### Glitch Animation
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| glitchIntensity | number | 0.5 | Intensity of glitch effect (0-1) |
`tsx`
Animates immediately
`tsx`
Hover over me!
`tsx`
Click to animate
`tsx`
Scroll to see me animate
tsx
First line types out
Then this slides in
And this fades in last
`$3
`tsx
animation="glitch"
className="my-custom-class"
style={{
fontSize: '3rem',
fontWeight: 'bold',
color: '#00ffff',
}}
>
Styled glitch text
`$3
`tsx
animation="scramble"
onComplete={() => console.log('Decoded!')}
>
Secret message
`$3
`tsx
Loops forever
Animates 3 times
`$3
`tsx
animation="morph"
morphTexts={[
"Loading...",
"Processing...",
"Almost there...",
"Done!"
]}
morphInterval={1500}
>
Loading
`🎛️ Easing Functions
Available easing options:
-
linear
- easeIn, easeOut, easeInOut
- easeInCubic, easeOutCubic, easeInOutCubic
- easeInQuad, easeOutQuad, easeInOutQuad
- easeInQuart, easeOutQuart, easeInOutQuart`tsx
Custom easing
`🌐 Browser Support
Works in all modern browsers:
- Chrome, Edge (latest)
- Firefox (latest)
- Safari (latest)
For older browsers, the component will gracefully fallback to displaying static text.
💡 Performance Tips
1. Use CSS animations when possible (fadeIn, slideUp, blur) - they're GPU accelerated
2. Limit particle count for better performance on lower-end devices
3. Use
trigger="view" for animations below the fold to delay rendering
4. Avoid too many simultaneous animations on the same page
5. Wave animation runs continuously - use sparingly for best performance📝 TypeScript
Full TypeScript support with type definitions included:
`tsx
import { TextAnimate, TextAnimateProps, AnimationType } from 'react-text-animator';const animation: AnimationType = 'typewriter';
const props: TextAnimateProps = {
animation: 'fadeIn',
duration: 1000,
children: 'Hello',
};
``Contributions are welcome! Please feel free to submit a Pull Request to https://github.com/hichamcc/react-text-animator
MIT © HICHAM
Built with React, TypeScript, and Canvas API. Zero external dependencies!
---
Made with ❤️ for the React community