Progressive Blur - Saturation UI

Installation

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

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

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

Progressive blur that reveals content on hover.

Directional variants: top, right, bottom, left.

Low and high blur intensity examples.

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

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

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

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

Mountain Vista

Hover to reveal

Progressive blur that reveals content on hover.

top

right

bottom

left

Directional variants: top, right, bottom, left.

Low (0.5)

High (1.0)

Low and high blur intensity examples.

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.).