Progressive blur
A Progressive Blur component creates a layered blur effect using motion and gradient masks. It progressively blurs layers based on direction and intensity, adding visual depth.
Examples
Progressive blur basic
Benjamin Spiers
Moonlight 2023Oil on linen. 40cm by 30cm
Progressive blur with hover
John Martin
PandemoniumProgressive blur with slider and different directions
You can change the direction of the blur effect with the direction prop.
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
Installation
npx shadcn add "https://motion-primitives.com/c/progressive-blur.json"Component API
ProgressiveBlur
| Prop | Type | Default | Description |
|---|---|---|---|
| direction | 'top' | 'right' | 'bottom' | 'left' | 'top' | The direction of the blur effect. |
| blurLayers | number | 8 | The number of blur layers. |
| className | string | '' | The class name to apply to the component. |
| blurIntensity | number | 0.25 | The intensity of the blur effect. |