Blur Reveal Text

The BlurRevealText component animates text by revealing each character with a smooth blur effect. Characters cascade in sequentially, creating an elegant typing-like reveal animation. Perfect for hero headings, taglines, and impactful text moments.

Preview

You can just ship things.

Usage

Installation

$ pnpm dlx shadcn add https://klarden.vercel.app/r/blur-reveal.json

Basic Example

import { BlurRevealText } from "@/components/blur-reveal-text";

export default function App() {
  return <BlurRevealText>You can just ship things.</BlurRevealText>;
}

Custom Blur Strength

import { BlurRevealText } from "@/components/blur-reveal-text";

export default function App() {
  return (
    <BlurRevealText blurStrength={15} duration={1}>
      Build beautiful interfaces.
    </BlurRevealText>
  );
}

With Delay

import { BlurRevealText } from "@/components/blur-reveal-text";

export default function App() {
  return (
    <BlurRevealText delay={0.5} duration={0.8}>
      Design. Develop. Deploy.
    </BlurRevealText>
  );
}

Properties

Prop	Type	Default	Description
`children`	`string`	`—`	The text content to animate. Must be a string.
`delay`	`number`	`0`	Delay in seconds before the animation starts.
`duration`	`number`	`0.8`	Duration of the animation in seconds.
`className`	`string`	`—`	Additional CSS classes for the root container.
`blurStrength`	`number`	`10`	The initial blur strength in pixels.