Package Exports

animated-text-blur
animated-text-blur/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (animated-text-blur) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

TextBlur Demo

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

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"`
`direction`	`"top"	"bottom"`	`"top"`
`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