Installation
Examples
Hello World 👋
Nice to meet you
Usage
import { BlurFade } from "@/components/magicui/blur-fade";<BlurFade>
<img src="https://picsum.photos/300/200?random=1" alt="Sample 1" />
<img src="https://picsum.photos/300/200?random=2" alt="Sample 2" />
<img src="https://picsum.photos/300/200?random=3" alt="Sample 3" />
</BlurFade>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 |