The FadeInUnblur component creates a smooth fade-in while unblurring animation for its children when they enter the viewport.
This content fades in while unblurring when it enters the viewport
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/fade-in-unblur.jsonEverything Fade In Unblur accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children (required) | React.ReactNode | No default | The content to be faded in unblurred |
| delay | number | 0 | Delay before the animation starts (in seconds) |
| duration | number | 0.5 | Duration of the animation (in seconds) |
| className | string | '' | Additional CSS classes for styling |
| once | boolean | true | Whether to trigger the animation only once |
Required.