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

Nadia Haddad

Tide study, 2025

Gouache on paper. 40 cm by 30 cm

Progressive blur with hover

Kofi Boateng

Harbour at dusk

Progressive blur with slider and different directions

You can change the direction of the blur effect with the direction prop.

Installation

npx shadcn@latest add https://ui.ndekocode.dev/r/motion-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.