react-text-animator

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

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

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:

• linear
• easeIn, easeOut, easeInOut
• easeInCubic, easeOutCubic, easeInOutCubic
• easeInQuad, easeOutQuad, easeInOutQuad
• easeInQuart, 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