Blur Fade
Blur fade animation component with 5 different direction options and intersection observer support.
Pro Features
Unlock advanced capabilities with the Pro version
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 moonui-cli@latest add blur-fadeUsage
Blur Fade Effect
This content appears sliding up with blur effect.
Examples
Fade In
Simple blur fade-in animation
Fade In
Appearing with blur effect
Fade Up
Blur fade animation from bottom to top
Fade Up
From bottom to top with blur
Fade Left
Blur fade animation from right to left
Fade Left
From right to left with blur
Fade Right
Blur fade animation from left to right
Fade Right
From left to right with blur
Fade Down
Blur fade animation from top to bottom
Fade Down
From top to bottom with blur
Custom Blur
Animation with custom blur amount
Strong Blur
With 15px blur effect