Progressive Blur

Layered backdrop blur that softens the edge of scrollable content — place it inside a relative overflow container and pick top, bottom, or both.

Default

Bottom-edge fade over a scrollable list — position="bottom" and height="40%".

Loading…

Installation

CLI

npx @sonojs/ui@latest add progressive-blur

Usage

page.tsx

"use client"

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

export default function ProgressiveBlurDemo() {
  return (
    <div className="relative w-full overflow-hidden rounded-[12px] border border-border/70">
      <ScrollArea className="relative h-[400px] overflow-hidden">
        <div className="flex flex-col gap-2 p-4">
          {Array.from({ length: 20 }).map((_, index) => (
            <div
              key={index}
              className="flex h-20 w-full items-center justify-center rounded-[12px] border border-border/70 bg-card"
            >
              {index}
            </div>
          ))}
        </div>
        <ProgressiveBlur position="bottom" height="40%" />
      </ScrollArea>
    </div>
  )
}

Props

Prop	Type	Default	Description
className	string	-	Extra classes on the blur overlay container.
height	string	"30%"	Height of the blur band when position is top or bottom.
position	"top" · "bottom" · "both"	"bottom"	Which edge(s) receive the progressive blur.
blurLevels	number[]	[0.5, 1, 2, 4, 8, 16, 32, 64]	Blur radii in px for each stacked layer.
children	React.ReactNode	-	Optional content rendered inside the blur overlay.