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!
๐ฎ Live Demo
๐ View Live Demo - See all animations in action!
โจ 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โฆ
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!
๐ฎ Live Demo
๐ View Live Demo - See all animations in action!
โจ 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
npm install react-text-animator
yarn add react-text-animator
pnpm add react-text-animator
๐ Quick Start
import { TextAnimate } from 'react-text-animator';
function App() {
return (
<TextAnimate animation="typewriter">
Hello World!
</TextAnimate>
);
}
๐ญ Available Animations
Typewriter
Classic character-by-character typing effect with optional cursor.
<TextAnimate animation="typewriter" duration={2000} stagger={80}>
This text types out character by character
</TextAnimate>
Particle Explosion
Text explodes into particles and reforms - uses Canvas for smooth animation.
<TextAnimate
animation="particle"
particleCount={100}
particleSize={16}
>
Watch me explode!
</TextAnimate>
Slide Up
Characters slide up from below with staggered timing.
<TextAnimate animation="slideUp" stagger={50}>
Sliding into view
</TextAnimate>
Fade In
Smooth opacity transition with optional stagger.
<TextAnimate animation="fadeIn" duration={1000} stagger={30}>
Fading in smoothly
</TextAnimate>
Text Morph
Smoothly transitions between different text strings.
<TextAnimate
animation="morph"
morphTexts={["Hello", "World", "React"]}
morphInterval={2000}
>
Morphing
</TextAnimate>
Scramble
Random characters gradually resolve to actual text.
<TextAnimate animation="scramble" duration={1500}>
Decode this message
</TextAnimate>
Glitch
Cyberpunk-style glitch reveal with RGB split effect.
<TextAnimate animation="glitch" glitchIntensity={0.7}>
Cyber Text
</TextAnimate>
Wave
Characters animate in continuous wave pattern.
<TextAnimate animation="wave" waveAmplitude={20}>
Wavy Text
</TextAnimate>
Blur
Text goes from blurry to sharp with smooth transition.
<TextAnimate animation="blur" duration={1200}>
Coming into focus
</TextAnimate>
๐ API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
animation | AnimationType | required | Type of animation to use |
trigger | `โautoโ | โhoverโ | โclickโ |
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 |
reverse | boolean | false | Play animation in reverse |
Animation-Specific Props
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
Auto
Animation starts immediately when component mounts.
<TextAnimate animation="fadeIn" trigger="auto">
Animates immediately
</TextAnimate>
Hover
Animation triggers when user hovers over the element.
<TextAnimate animation="slideUp" trigger="hover">
Hover over me!
</TextAnimate>
Click
Animation triggers when user clicks the element.
<TextAnimate animation="typewriter" trigger="click">
Click to animate
</TextAnimate>
View
Animation triggers when element scrolls into view (uses Intersection Observer).
<TextAnimate animation="particle" trigger="view">
Scroll to see me animate
</TextAnimate>
๐จ Advanced Examples
Chained Animations
<div>
<TextAnimate animation="typewriter" duration={2000}>
First line types out
</TextAnimate>
<TextAnimate animation="slideUp" delay={2200} stagger={50}>
Then this slides in
</TextAnimate>
<TextAnimate animation="fadeIn" delay={3000}>
And this fades in last
</TextAnimate>
</div>
Custom Styling
<TextAnimate
animation="glitch"
className="my-custom-class"
style={{
fontSize: '3rem',
fontWeight: 'bold',
color: '#00ffff',
}}
>
Styled glitch text
</TextAnimate>
With Callback
<TextAnimate
animation="scramble"
onComplete={() => console.log('Decoded!')}
>
Secret message
</TextAnimate>
Repeating Animation
<TextAnimate animation="wave" repeat={true}>
Loops forever
</TextAnimate>
<TextAnimate animation="particle" repeat={3}>
Animates 3 times
</TextAnimate>
Dynamic Text Morphing
<TextAnimate
animation="morph"
morphTexts={[
"Loading...",
"Processing...",
"Almost there...",
"Done!"
]}
morphInterval={1500}
>
Loading
</TextAnimate>
๐๏ธ Easing Functions
Available easing options:
lineareaseIn,easeOut,easeInOuteaseInCubic,easeOutCubic,easeInOutCubiceaseInQuad,easeOutQuad,easeInOutQuadeaseInQuart,easeOutQuart,easeInOutQuart
<TextAnimate animation="slideUp" easing="easeOutQuart">
Custom easing
</TextAnimate>
๐ 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
- Use CSS animations when possible (fadeIn, slideUp, blur) - theyโre GPU accelerated
- Limit particle count for better performance on lower-end devices
- Use
trigger="view"for animations below the fold to delay rendering - Avoid too many simultaneous animations on the same page
- Wave animation runs continuously - use sparingly for best performance
๐ TypeScript
Full TypeScript support with type definitions included:
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