Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

Blur Fade

Blur Fade

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

Random stock image 1
Random stock image 2
Random stock image 3
Random stock image 4
Random stock image 5
Random stock image 6
Random stock image 7
Random stock image 8
Random stock image 9


npx magicui-cli add blur-fade



childrenReact.ReactNodeThe content to be animated
classNamestringThe class name to be applied to the component
variantobjectCustom animation variants for motion component
durationnumberDuration (seconds) for the animation0.4
delaynumberDelay (seconds) before the animation starts0
yOffsetnumberVertical offset for the animation6
inViewbooleanWhether to trigger animation when component is in viewfalse
inViewMarginstringMargin for triggering the in-view animation"-50px"
blurstringAmount of blur to apply during the animation"6px"