Animated Blur Text

Text 124

About

BlurText is a lightweight, customizable React animated text component that reveals content with smooth blur effects and dynamic text scroll animation. Ideal for modern React landing pages, hero sections, and interactive UIs, it supports both letter-by-letter and word-by-word animation using Framer Motion. Built-in Intersection Observer support ensures animations trigger only when text enters the viewport, making it perfect for react intersection observer animation use cases. Whether you're building a sleek portfolio or an engaging website, BlurText delivers responsive, performant, and eye-catching text reveal effects for React.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Blur Text to your project and fits it to your theme.

Code

How Animated Blur Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react"
import { BlurText } from "@/components/ui/animated-blur-text"

function FromTop() {
  return (
<div className="flex justify-center items-center h-screen bg-black">
<BlurText
  text="Isn't this so cool?! From top"
  delay={150}
  animateBy="words"
  direction="top"
  className="text-[40px] mb-8 text-white"
/>
</div>
  );
}

function FromBottom() {
  return (
<div className="flex justify-center items-center h-screen bg-black">
<BlurText
  text="Isn't this so cool?! From bottom"
  delay={150}
  animateBy="words"
  direction="bottom"
  className="text-[40px] mb-8 text-white"
/>
</div>
  );
}


function LongDelay() {
  return (
<div className="flex justify-center items-center h-screen bg-black">
<BlurText
  text="Isn't this so cool?! Long Delay"
  delay={500}
  animateBy="words"
  direction="bottom"
  className="text-[40px] mb-8 text-white"
/>
</div>
  );
}

function ByLetter() {
  return (
<div className="flex justify-center items-center h-screen bg-black">
<BlurText
  text="Isn't this so cool?! by Letter"
  delay={150}
  animateBy="letter"
  direction="bottom"
  className="text-[40px] mb-8 text-white"
/>
</div>
  );
}

export default { FromTop, FromBottom, LongDelay, ByLetter }