Blur Text

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/blur-text

Usage

import { BlurText } from "@reactbytes/blur-text";

export default function Example() {
  return (
    <BlurText />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | text | string | BLURRY MOTION | The text to be broken down and animated. | | animateBy | select | letters | Whether to animate each word or each letter individually. | | direction | select | top | The direction from which the text elements appear. | | duration | number | 0.5 | The duration of the animation for each individual element. | | stagger | number | 0.05 | Stagger delay between each element in seconds. | | delay | number | 0 | Base delay before the animation sequence starts. | | loop | boolean | false | Whether the animation should loop continuously (pulsing effect). | | blurAmount | number | 10 | The peak blur intensity in pixels. | | uppercase | boolean | true | Whether to force the text to uppercase. | | className | string | text-3xl sm:text-5xl font-bold tracking-[0.1em] sm:tracking-[0.2em] text-rb-accent-2 | Additional wrapper CSS classes. |

Presets

This component includes the following design presets:

• Soft Reveal (soft-reveal)
• Infinite Fog (infinite-fog)
• Smoky Entrance (smoky)

Credits & Inspiration

Component Source

• React Bytes - Collection

Open Source Libraries

• React - UI Framework
• Framer Motion - Animation

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Blur Text.