Back
Blur Fade
Satu Visual Component
Fades and un-blurs its children up into place when scrolled in.
I fade in on scroll
Installation
Add it with the CLI:
Terminal
$
Or open the Code tab above and copy it in manually — it relies on the standard cn() helper from @/lib/utils.
Usage
Wrap any block. It animates once, the first time it enters the viewport.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content to reveal. |
| className | string | — | Extra classes. |
| duration | number | 0.4 | Animation duration, seconds. |
| delay | number | 0 | Delay before starting, seconds. |
| yOffset | number | 6 | Vertical travel in px. |
| blur | string | "6px" | Initial blur amount. |
Requirements
Install the npm dependencies:
Terminal
$