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.

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 2023

Oil on linen. 40cm by 30cm

Progressive blur with hover

John Martin

Pandemonium

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://components.dylanwlim.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.

Morphing Popover Components

On This Page

Progressive blur Examples Progressive blur basic Progressive blur with hover Progressive blur with slider and different directions Installation Component API ProgressiveBlur

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.