Installation
npx magicui-cli add blur-fadeExamples
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 |
| yOffset | number | Vertical offset for the animation | 6 |
| inView | boolean | Whether to trigger animation when component is in view | false |
| inViewMargin | string | Margin for triggering the in-view animation | "-50px" |
| blur | string | Amount of blur to apply during the animation | "6px" |