❤️ Support our project - Your donation helps us continue developing awesome tools!


Docs
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

Installation

npx nyxbui add blur-fade

Examples

Props

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