Components
Animated Blur Text
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.
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 }