Installation
Usage
import { ProgressiveBlur } from "@/components/magicui/progressive-blur";<div className="relative h-[400px] w-full overflow-auto">
{/* Your scrollable content */}
<div className="p-4 space-y-4">{/* Content items */}</div>
<ProgressiveBlur height="50%" position="bottom" />
</div>Props
ProgressiveBlur
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional classes to apply to the blur container. |
height | string | "30%" | Height of the blur effect container. |
position | "top" | "bottom" | "both" | "bottom" | Position of the blur effect. |
blurLevels | number[] | [0.5, 1, 2, 4, 8, 16, 32, 64] | Array of blur values (in px) for progressive effect. |
children | React.ReactNode | - | Optional content to render within the blur container. |