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	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"

Contribute