Blur Reveal
A component to smoothly blur fade in content.
This component uses the nuxt-only syntax with the <ClientOnly>. If you are not using Nuxt, you can simply remove it.
Install using CLI
Install Manually
Copy and paste the following code
BlurReveal.vue
API
| Prop Name | Type | Default | Description |
|---|---|---|---|
duration | number | 1 | Duration of the blur fade in animation. |
delay | number | 1 | Delay between child components to reveal |
blur | string | 10px | Amount of blur to apply to the child components. |
yOffset | number | 20 | Specifies the vertical offset distance (yOffset) for the entrance animation. |
Credits
- Credits to Magic UI for this fantastic component.