TextBlur React Component

A simple, flexible, and beautiful React component for animating text with blur and reveal effects. Animate by words or letters, customize direction, timing, and even use gradients for stunning text presentations.

Features

• Animate text by words or letters
• Blur and fade-in effect from top or bottom
• Customizable delay, duration, and intersection trigger
• Supports solid colors and CSS gradients for text
• Callback for animation completion
• Easy to style and integrate

Installation

npm install animated-text-blur

or

yarn add animated-text-blur

Usage

import { TextBlur } from "animated-text-blur";

function Example() {
  return (
    <div>
      <TextBlur text="Hello Animated Text Blur!" animateBy="words" />
      <TextBlur
        text="Gradient Animated Text!"
        animateBy="words"
        color="linear-gradient(90deg, #ff8a00, #e52e71)"
      />
      <TextBlur
        text="Solid Color Animated Text!"
        animateBy="letters"
        color="#1e90ff"
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |-----------------------|---------------------|-------------|-----------------------------------------------------------------------------| | text | string | "" | The text content to animate. | | animateBy | "words" | "letters" | "words" | Animate by words or letters. | | direction | "top" | "bottom" | "top" | Direction from which the text appears. | | delay | number | 200 | Delay (ms) between each word/letter animation. | | stepDuration | number | 0.35 | Duration (seconds) for each word/letter animation. | | threshold | number | 0.1 | Intersection threshold for triggering the animation. | | rootMargin | string | "0px" | Root margin for the intersection observer. | | onAnimationComplete | () => void | undefined | Callback when all animations complete. | | color | string | undefined | Text color or CSS gradient. | | className | string | "" | Optional class for the wrapping element. | | animationFrom | object | undefined | Custom animation-from keyframes. | | animationTo | object[] | undefined | Custom animation-to keyframes. | | easing | (t: number) => number | (t) => t | Custom easing function. |

Customizing Text Color & Gradients

• For solid color: color="#1e90ff"
• For gradient: color="linear-gradient(90deg, #ff8a00, #e52e71)"

Example: Reload Animation

const [key, setKey] = useState(0);

<TextBlur key={key} text="Reload me!" />
<button onClick={() => setKey(k => k + 1)}>Reload Animation</button>

License

MIT