Blur Reveal

Characters or words materialise from a soft blur — the cinematic text entrance used in top SaaS hero sections.

UniqueUI CLI

npx uniqueui add blur-reveal

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/blur-reveal.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Build stunning interfaces.Animatedcomponentsthatmakeusersstopandstare.

Usage

"use client";
import { BlurReveal } from "@/components/ui/blur-reveal";

export default function Hero() {
  return (
    <h1 className="text-4xl font-bold text-white">
      <BlurReveal
        text="The future of UI is here."
        animateBy="words"
        delay={0.1}
        className="text-4xl font-bold text-white"
      />
    </h1>
  );
}

Props

Prop	Type	Description
`text`	`string`	The text to animate.
`animateBy`	`"characters" \| "words"`	Whether to stagger individual characters or whole words.
`delay`	`number`	Extra delay before the animation starts (seconds).
`duration`	`number`	Spring duration per item.
`once`	`boolean`	Only animate on first scroll-enter.
`className`	`string`	Extra Tailwind classes.
`theme`	`"light" \| "dark"`	Theme context.