Blur Out Up

Text 33

About

Animated text where words blur and drift upward while fading out, staggered per word, with a smooth blur fade-in entrance.

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

Code

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

Usage.tsx

"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>
  );
}