Progressive Blur - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/progressive-blur

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { ProgressiveBlur } from "@/components/ui/progressive-blur"

<ProgressiveBlur
  className="pointer-events-none absolute inset-0"
  direction="bottom"
  blurIntensity={0.5}
/>

Examples

Hover Effect

Progressive blur that reveals content on hover.

Directions

Directional variants: top, right, bottom, left.

Custom Intensity

Low and high blur intensity examples.

API Reference

Prop	Type	Default	Description
`direction`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Blur gradient orientation.
`blurLayers`	`number`	`8`	Number of blur layers (minimum 2 for smooth gradient).
`blurIntensity`	`number`	`0.25`	Blur intensity multiplier per layer (in pixels).
`className`	`string`	—	Additional CSS classes.
`...props`	`HTMLMotionProps`	—	All Framer Motion div props (animate, variants, etc.).

Mountain Vista

A progressive blur effect