Skip to main content

​
Overview

The Progressive Blur component creates a layered backdrop blur effect that gradually increases in intensity in a chosen direction. It’s perfect for creating depth, focus, and visual separation in your UI.

​
Usage

<ProgressiveBlur
  direction="bottom"
  :blurLayers="8"
  :blurIntensity="0.25"
>
  <div class="p-8">
    Your content with progressive blur
  </div>
</ProgressiveBlur>

​
Props

​
direction
'top' | 'right' | 'bottom' | 'left'
default:"bottom"
Direction in which the blur progressively increases.
​
blurLayers
number
default:"8"
Number of blur layers used to create the progressive effect.
​
blurIntensity
number
default:"0.25"
Blur strength multiplier per layer (in pixels).
​
class
string
default:""
Optional class applied to the wrapper container.
This component also accepts all valid motion-v props for a div.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us