Animates children with a smooth spring blur and fade transition as they enter viewport.
Animation delay in seconds
Animation duration in seconds
Y-axis offset translation at start
Starting CSS blur filter amount
Trigger the viewport animation only once
import { BlurFade } from "nexoreui"
<BlurFade />| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The elements to animate. |
| delay | number | 0 | Time delay before trigger starts (in seconds). |
| duration | number | 0.4 | Time duration of transition (in seconds). |
| yOffset | number | 6 | Distance in pixels the element translates from on Y-axis. |
| blur | string | "4px" | Starting CSS blur amount (e.g. "8px"). |
| inView | boolean | true | Whether to trigger animation when the element is visible on screen. |
| once | boolean | true | Trigger the transition once only upon viewport entry. |
| margin | string | "-50px" | Intersection Observer offset threshold margin. |