Installation
npx shadcn@latest add "https://magicui.design/r/blur-fade"Examples
Hello World 👋
Nice to meet you
Props
| Prop | Type | Description | Default |
|---|---|---|---|
| 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 | Duration (seconds) for the animation | 0.4 |
| delay | number | Delay (seconds) before the animation starts | 0 |
| offset | number | Offset for the animation | 6 |
| direction | string | Direction for the animation (up, down, left, right) | "down" |
| inView | boolean | Whether to trigger animation when component is in view | false |
| inViewMargin | MarginType | Margin for triggering the in-view animation | "-50px" |
| blur | string | Amount of blur to apply during the animation | "6px" |