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!

✨ Features

- 🎨 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

📦 Installation

``bash
npm install react-text-animator
`

`bash
yarn add react-text-animator
`

`bash
pnpm add react-text-animator
`

🚀 Quick Start

`tsx
import { TextAnimate } from 'react-text-animator';

function App() {
return (

Hello World!

);
}
`

🎭 Available Animations

$3

Classic character-by-character typing effect with optional cursor.

`tsx

This text types out character by character

`

$3

Text explodes into particles and reforms - uses Canvas for smooth animation.

`tsx
animation="particle"
particleCount={100}
particleSize={16}
>
Watch me explode!

`

$3

Characters slide up from below with staggered timing.

`tsx

Sliding into view

`

$3

Smooth opacity transition with optional stagger.

`tsx

Fading in smoothly

`

$3

Smoothly transitions between different text strings.

`tsx
animation="morph"
morphTexts={["Hello", "World", "React"]}
morphInterval={2000}
>
Morphing

`

$3

Random characters gradually resolve to actual text.

`tsx

Decode this message

`

$3

Cyberpunk-style glitch reveal with RGB split effect.

`tsx

Cyber Text

`

$3

Characters animate in continuous wave pattern.

`tsx

Wavy Text

`

$3

Text goes from blurry to sharp with smooth transition.

`tsx

Coming into focus

`

📖 API Reference

$3

| 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 |

$3

#### 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) |

🎯 Trigger Types

$3

Animation starts immediately when component mounts.

`tsx

Animates immediately

`

$3

Animation triggers when user hovers over the element.

`tsx

Hover over me!

`

$3

Animation triggers when user clicks the element.

`tsx

Click to animate

`

$3

Animation triggers when element scrolls into view (uses Intersection Observer).

`tsx

Scroll to see me animate

`

🎨 Advanced Examples

$3


`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',
};
``

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request to https://github.com/hichamcc/react-text-animator

📄 License

MIT © HICHAM

🙏 Acknowledgments

Built with React, TypeScript, and Canvas API. Zero external dependencies!

---

Made with ❤️ for the React community