Components

Progressive Blur

Pro

Apple-style scroll-edge blur: content dissolves into stacked backdrop layers that get progressively stronger toward the edge, with an optional tint and room for a floating header or toolbar inside.

YearsMonthsAll

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/progressive-blur

Unlock with Planes Pro

$99 once · 80 Pro components · lifetime updates.

I have a licenseGet Pro
<div className="relative h-96 overflow-y-auto">
  {items}
  <ProgressiveBlur side="bottom" size={120} blur={16} className="sticky bottom-0" />
</div>

Use cases

  • Scroll containers

    Lists and feeds whose last rows melt away instead of clipping against a hard edge.

  • Floating toolbars

    A bottom dock or tab bar that reads over any content scrolling beneath it.

  • Sticky headers

    A page title that stays legible over photos without an opaque bar.

  • Horizontal strips

    Carousels and marquees whose ends soften rather than fade to a color.