Blur Fade

Docs

Blur Fade

Blur fade in and out animation. Used to smoothly fade in and out content.

Installation

npx shadcn@latest add "https://magicui.design/r/blur-fade"

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

Contribute