Docs
Blur Reveal
Blur Reveal
A text component that reveals its content with a smooth blur-to-focus animation, activated by default when the text enters the viewport.
This is a Title And this is the amazing text that just can’t wait
to reveal itself! Watch it come to life with a blur.
to reveal itself! Watch it come to life with a blur.
Installation
pnpm dlx shadcn@latest add https://badtz-ui.com/r/blur-reveal.json
Usage
import { BlurReveal } from "@/components/ui/blur-reveal";<BlurReveal>This is a title</BlurReveal>Props
BlurReveal props.
| Prop | Type | Description | Default |
|---|---|---|---|
| className | string | Additional custom classes for styling. | - |
| children | React.ReactNode | Child elements to be rendered inside the component. | - |
| delay | number | Delay before the animation starts, in seconds. | 0 |
| duration | number | Duration of the animation effect, in seconds. | 1 |
Credits
This component is inspired by Linear