Components
Progressive Blur
Component that creates a progressive blur effect in a specified direction.
Progressive Blur
The ProgressiveBlur component creates a progressive blur effect in a specified direction. It's perfect for creating visually appealing overlays and transitions with smooth gradient blur effects.
Usage
<template>
<div class="relative h-64">
<img
src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
alt="Mountain"
class="w-full h-full object-cover"
/>
<MProgressiveBlur class="absolute inset-0" />
</div>
</template>
Props
direction
'top' | 'right' | 'bottom' | 'left'
Direction of the blur effect.
blurLayers
number
Number of blur layers.
className
string
CSS classes to apply to the container.
blurIntensity
number
Intensity of the blur effect.
animate
string | object
Animation configuration.
variants
object
Animation variants.
transition
object
Transition configuration.
initial
string | object
Initial state configuration.
Examples
Basic Progressive Blur
Progressive Blur
Create depth and focus effects with progressive blur that intensifies towards the edges
Mountain Landscape
Focus effect with progressive blur
<template>
<div class="relative h-64">
<img
src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
alt="Mountain"
class="w-full h-full object-cover"
/>
<MProgressiveBlur class="absolute inset-0" />
</div>
</template>
Top Direction
<template>
<div class="relative h-64">
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
alt="Ocean"
class="w-full h-full object-cover"
/>
<MProgressiveBlur direction="top" class="absolute inset-0" />
</div>
</template>
Right Direction
<template>
<div class="relative h-64">
<img
src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
alt="Forest"
class="w-full h-full object-cover"
/>
<MProgressiveBlur direction="right" class="absolute inset-0" />
</div>
</template>
Bottom Direction
<template>
<div class="relative h-64">
<img
src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
alt="City"
class="w-full h-full object-cover"
/>
<MProgressiveBlur direction="bottom" class="absolute inset-0" />
</div>
</template>
Left Direction
<template>
<div class="relative h-64">
<img
src="https://images.unsplash.com/photo-1587614382346-4ec70e388b28?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
alt="Nature"
class="w-full h-full object-cover"
/>
<MProgressiveBlur direction="left" class="absolute inset-0" />
</div>
</template>
With Custom Intensity
<template>
<div class="relative h-64">
<img
src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
alt="Beach"
class="w-full h-full object-cover"
/>
<MProgressiveBlur :blur-intensity="0.5" :blur-layers="12" class="absolute inset-0" />
</div>
</template>