BadtzUIBeta
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.

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.

PropTypeDescriptionDefault
classNamestringAdditional custom classes for styling.-
childrenReact.ReactNodeChild elements to be rendered inside the component.-
delaynumberDelay before the animation starts, in seconds.0
durationnumberDuration of the animation effect, in seconds.1

Credits

  • This component is inspired by Linear

  • Hyperspace BackgroundSwipe Button