Skip to main content
Create smooth blur fade-in animations for your content with customizable duration and delay.

​
Usage

<BlurReveal
  :duration="1"
  :delay="1"
  blur="10px"
  :yOffset="20"
>
  <p>Your content here</p>
</BlurReveal>

​
Props

​
duration
number
default:"1"
Duration of the blur fade in animation.
​
delay
number
default:"1"
Delay between child components to reveal.
​
blur
string
default:"10px"
Amount of blur to apply to the child components.
​
yOffset
number
default:"20"
Specifies the vertical offset distance (yOffset) for the entrance animation.

​
Credits

Credits to Magic UI for this fantastic component.

Build docs developers (and LLMs) love

Get started for freeTalk to us