Progressive Blur
ProA blur that builds toward one edge, so content under a floating bar melts away instead of being cut off.
pnpm dlx shadcn@latest add @latheui/progressive-blurPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Progressive Blur is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
API reference
ProgressiveBlur
Also accepts native div attributes. It is absolutely positioned, so its parent needs position: relative.
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "bottom" | "left" | "right" | "bottom" | Edge the blur is strongest at. |
| strength | number | 16 | Blur radius in pixels at that edge. |
| layers | number | 6 | Stacked blur layers. More is smoother and costs more to paint. |
| tint | boolean | true | Also fades toward the background color, which keeps anything on top readable. |
| className | string | — | Sets the depth, for example h-28. Defaults to 6rem. |
ProgressiveBlurScroll
A scrolling area with blurred edges. Also accepts native div attributes; size it with className.
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "vertical" | "horizontal" | "vertical" | Scroll direction, and so which edges blur. |
| size | number | 64 | Depth of each blurred edge in px, and the scroll distance over which it fades in. |
| strength | number | 12 | Blur radius in pixels at the very edge. |
| layers | number | 6 | Stacked blur layers. |
| tint | boolean | true | Also fades toward the background color. |
| label | string | — | Names the scrolling area and makes it focusable for keyboard scrolling. |
| viewportClassName | string | — | Classes for the element that scrolls, such as padding. |
Accessibility
- ProgressiveBlurScroll with a label makes its scrolling area a named region that takes focus, so it can be scrolled with the keyboard.
- It is decoration: hidden from assistive tech and transparent to the pointer, so it never blocks what is underneath.
- Blurred content is hard to read by design. Leave padding at the end of the scrolling area so the last item can be scrolled clear of the blur.
- Anything placed on top of the blur still needs its own contrast against the content behind. The tint helps, a solid surface on the control helps more.
Motion
- Nothing animates on its own. The effect comes from content moving underneath it.
- ProgressiveBlurScroll's edges fade with the scroll position, so they follow the content rather than a timer.
Customization
A header that content scrolls under
<ProgressiveBlur side="top" strength={12} className="h-20" />A scrolling list with live edges
<ProgressiveBlurScroll label="Messages" size={56} className="h-80">
{messages}
</ProgressiveBlurScroll>Blur only, no tint
Over photos or video the tint can look like a haze. Turn it off and raise the strength.
<ProgressiveBlur tint={false} strength={24} layers={8} />Related
- MarqueeAn endless, seamless scroll of logos, quotes or cards, with a set speed, direction and hover behavior.
- CarouselScroll-snapping slides you move with buttons, dots, arrow keys or by dragging with the mouse.
- Focus RailA row of images with one in focus. The rest step back, smaller, dimmer and softer, with the gaps kept even at every size.