Blur Fade
Blur fade in and out animation. Used to smoothly fade in and out content.
Installation
CLI Manual
Examples
Preview Code
components/ui/blur-fade-text-demo.tsx
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children |
React.ReactNode |
- |
The content to be animated |
className |
string |
- |
The class name to be applied to the component |
variant |
object |
- |
Custom animation variants for motion component |
duration |
number |
0.4 |
Duration (seconds) for the animation |
delay |
number |
0 |
Delay (seconds) before the animation starts |
offset |
number |
6 |
Offset for the animation |
direction |
string |
"down" |
Direction for the animation (up, down, left, right) |
inView |
boolean |
false |
Whether to trigger animation when component is in view |
inViewMargin |
MarginType |
"-50px" |
Margin for triggering the in-view animation |
blur |
string |
"6px" |
Amount of blur to apply during the animation |