Components
/
Progressive Blur
Progressive Blur
A progressive blur effect that creates a smooth gradient blur transition using multiple backdrop-filter layers.
Preview
Mountain Vista
Nature PhotographyCaptured at golden hour
Installation
Copy and paste the component code into your project.
Examples
Basic
Mountain Vista
Nature PhotographyHover Effect
Mountain Vista
Hover to revealDirections
top
right
bottom
left
Custom Intensity
Low (0.5)
High (1.0)
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| direction | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | Direction of the blur gradient |
| blurLayers | number | 8 | Number of blur layers (minimum 2 for smooth gradient) |
| blurIntensity | number | 0.25 | Blur intensity multiplier per layer (in pixels) |
| className | string | - | Additional CSS classes |
| ...props | HTMLMotionProps | - | All Framer Motion div props (animate, variants, etc.) |