Get everything for $99, lifetime

Components

Progressive Blur

Pro
YearsMonthsAll

Installation

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

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 161 Pro components · lifetime updates.

I have a licenseGet Pro
import { ProgressiveBlur } from "@/components/ui/ProgressiveBlur";

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