Components
Blur Out Up
Animated text where words blur and drift upward while fading out, staggered per word, with a smooth blur fade-in entrance.
"use client";
import { useEffect, useState } from "react";
import { BlurOutUp } from "@/components/ui/blur-out-up";
export default function BlurOutUpDemo() {
const [cycle, setCycle] = useState(0);
useEffect(() => {
const id = setInterval(() => setCycle((v) => v + 1), 3200);
return () => clearInterval(id);
}, []);
return (
<div className="relative flex h-[420px] w-full items-center justify-center overflow-hidden rounded-xl border">
<BlurOutUp key={cycle} text="Words fade and blur" />
</div>
);
}