Blur Fade
Pro
Blur fade animation component with 5 different direction options and intersection observer support.
Pro features
What the Pro version adds to this component.
Blur Fade Effect
Smooth appearance animation with blur effect
5 Animation Directions
Fade-in, up, down, left, right options
Delay and Duration
Full control over animation timing
Custom Blur Amount
Adjust blur intensity with CSS value
Intersection Observer
Automatic animation when entering viewport
Manual Control
Manual control with trigger and inView props
Installation
Install via CLI
npx @moontra/moonui-cli add blur-fadeUsage
Blur Fade Effect
This content appears sliding up with blur effect.
Examples
Fade In
Pro
Simple blur fade-in animation
Fade Up
Pro
Blur fade animation from bottom to top
Fade Left
Pro
Blur fade animation from right to left
Fade Right
Pro
Blur fade animation from left to right
Fade Down
Pro
Blur fade animation from top to bottom
Custom Blur
Pro
Animation with custom blur amount