Premium & Brand

Progressive Blur

Server Component

A stacked backdrop-blur that fades content out toward an edge.

Import

tsx

import { ProgressiveBlur } from "@cronus-ui/ui";

bash

npx cronus-ui add progressive-blur

Examples

Edge fade

Stacked backdrop-blur that fades a scroll region into the chrome. Place it over overflowing content.

Scroll under the blur. The band is decorative and sits on the edge of the region.

More copy so the panel actually scrolls.

Keep going — the fade holds the last lines.

Last line of the stack.

tsx

<div className="relative h-48 w-full overflow-hidden rounded-2xl border border-border bg-surface-raised">
  <div className="h-full overflow-y-auto p-4 pb-16">
    <p className="text-sm text-fg-secondary">
      Scroll under the blur. The band is decorative and sits on the edge of the region.
    </p>
    <p className="mt-4 text-sm text-fg-secondary">More copy so the panel actually scrolls.</p>
    <p className="mt-4 text-sm text-fg-secondary">Keep going — the fade holds the last lines.</p>
    <p className="mt-4 text-sm text-fg-secondary">Last line of the stack.</p>
  </div>
  <ProgressiveBlur side="bottom" />
</div>

API Reference

Generated from the component's exported types.

ProgressiveBlurProps

Extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof progressiveBlurVariants>

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	—
`height`	`string`	`"6rem"`	Height of the blur band.
`side`	`"top" \| "bottom"`	`"bottom"`	—