Glin UI
Radix UIBase UI
Primitive / AtomAdapted from Motion Primitivesbeta

Progressive Blur

Edge overlay that blurs content progressively using stacked masked backdrop filters.

Edit on GitHub
  • Activity entry 1: deploy finished in 40s
  • Activity entry 2: deploy finished in 43s
  • Activity entry 3: deploy finished in 46s
  • Activity entry 4: deploy finished in 49s
  • Activity entry 5: deploy finished in 52s
  • Activity entry 6: deploy finished in 55s
  • Activity entry 7: deploy finished in 58s
  • Activity entry 8: deploy finished in 61s
  • Activity entry 9: deploy finished in 64s
  • Activity entry 10: deploy finished in 67s
  • Activity entry 11: deploy finished in 70s
  • Activity entry 12: deploy finished in 73s
  • Activity entry 13: deploy finished in 76s
  • Activity entry 14: deploy finished in 79s

Installation

Install from
pnpm dlx @glinui/cli@latest add progressive-blur

Credits. Adapted from Motion Primitives (MIT, (c) 2024 ibelick). motion/react removed (CSS and Web Animations API), tokens, accessibility, reduced motion levels, RTL Attribution details.

Prefer the package?

Usage

Place it inside a `relative` scroll container, or above a sticky header, and size it with `size`. Add `isolate` to a rounded `overflow-hidden` parent so the blur is clipped to its corners. It never receives pointer events.

Each layer is a `backdrop-filter`, which is expensive over large areas. Keep overlays small (under about 160px thick) and use fewer layers on low-end devices.

Variants

All four edges.

  • Activity entry 1: deploy finished in 40s
  • Activity entry 2: deploy finished in 43s
  • Activity entry 3: deploy finished in 46s
  • Activity entry 4: deploy finished in 49s
  • Activity entry 5: deploy finished in 52s
  • Activity entry 6: deploy finished in 55s
  • Activity entry 7: deploy finished in 58s
  • Activity entry 8: deploy finished in 61s
  • Activity entry 9: deploy finished in 64s
  • Activity entry 10: deploy finished in 67s
  • Activity entry 11: deploy finished in 70s
  • Activity entry 12: deploy finished in 73s
  • Activity entry 13: deploy finished in 76s
  • Activity entry 14: deploy finished in 79s
  • Activity entry 1: deploy finished in 40s
  • Activity entry 2: deploy finished in 43s
  • Activity entry 3: deploy finished in 46s
  • Activity entry 4: deploy finished in 49s
  • Activity entry 5: deploy finished in 52s
  • Activity entry 6: deploy finished in 55s
  • Activity entry 7: deploy finished in 58s
  • Activity entry 8: deploy finished in 61s
  • Activity entry 9: deploy finished in 64s
  • Activity entry 10: deploy finished in 67s
  • Activity entry 11: deploy finished in 70s
  • Activity entry 12: deploy finished in 73s
  • Activity entry 13: deploy finished in 76s
  • Activity entry 14: deploy finished in 79s
  • Activity entry 1: deploy finished in 40s
  • Activity entry 2: deploy finished in 43s
  • Activity entry 3: deploy finished in 46s
  • Activity entry 4: deploy finished in 49s
  • Activity entry 5: deploy finished in 52s
  • Activity entry 6: deploy finished in 55s
  • Activity entry 7: deploy finished in 58s
  • Activity entry 8: deploy finished in 61s
  • Activity entry 9: deploy finished in 64s
  • Activity entry 10: deploy finished in 67s
  • Activity entry 11: deploy finished in 70s
  • Activity entry 12: deploy finished in 73s
  • Activity entry 13: deploy finished in 76s
  • Activity entry 14: deploy finished in 79s
  • Activity entry 1: deploy finished in 40s
  • Activity entry 2: deploy finished in 43s
  • Activity entry 3: deploy finished in 46s
  • Activity entry 4: deploy finished in 49s
  • Activity entry 5: deploy finished in 52s
  • Activity entry 6: deploy finished in 55s
  • Activity entry 7: deploy finished in 58s
  • Activity entry 8: deploy finished in 61s
  • Activity entry 9: deploy finished in 64s
  • Activity entry 10: deploy finished in 67s
  • Activity entry 11: deploy finished in 70s
  • Activity entry 12: deploy finished in 73s
  • Activity entry 13: deploy finished in 76s
  • Activity entry 14: deploy finished in 79s
<ProgressiveBlur direction="start" size={56} />

States

Fewer, stronger layers or many soft ones.

  • Activity entry 1: deploy finished in 40s
  • Activity entry 2: deploy finished in 43s
  • Activity entry 3: deploy finished in 46s
  • Activity entry 4: deploy finished in 49s
  • Activity entry 5: deploy finished in 52s
  • Activity entry 6: deploy finished in 55s
  • Activity entry 7: deploy finished in 58s
  • Activity entry 8: deploy finished in 61s
  • Activity entry 9: deploy finished in 64s
  • Activity entry 10: deploy finished in 67s
  • Activity entry 11: deploy finished in 70s
  • Activity entry 12: deploy finished in 73s
  • Activity entry 13: deploy finished in 76s
  • Activity entry 14: deploy finished in 79s
  • Activity entry 1: deploy finished in 40s
  • Activity entry 2: deploy finished in 43s
  • Activity entry 3: deploy finished in 46s
  • Activity entry 4: deploy finished in 49s
  • Activity entry 5: deploy finished in 52s
  • Activity entry 6: deploy finished in 55s
  • Activity entry 7: deploy finished in 58s
  • Activity entry 8: deploy finished in 61s
  • Activity entry 9: deploy finished in 64s
  • Activity entry 10: deploy finished in 67s
  • Activity entry 11: deploy finished in 70s
  • Activity entry 12: deploy finished in 73s
  • Activity entry 13: deploy finished in 76s
  • Activity entry 14: deploy finished in 79s
<ProgressiveBlur blurLayers={3} blurIntensity={2} />
<ProgressiveBlur blurLayers={8} blurIntensity={0.6} size={96} />

In a layout

Content blurs as it slides under a sticky header.

Changelogv2
  • Activity entry 1: deploy finished in 40s
  • Activity entry 2: deploy finished in 43s
  • Activity entry 3: deploy finished in 46s
  • Activity entry 4: deploy finished in 49s
  • Activity entry 5: deploy finished in 52s
  • Activity entry 6: deploy finished in 55s
  • Activity entry 7: deploy finished in 58s
  • Activity entry 8: deploy finished in 61s
  • Activity entry 9: deploy finished in 64s
  • Activity entry 10: deploy finished in 67s
  • Activity entry 11: deploy finished in 70s
  • Activity entry 12: deploy finished in 73s
  • Activity entry 13: deploy finished in 76s
  • Activity entry 14: deploy finished in 79s
<div className="relative overflow-hidden">
  <ProgressiveBlur direction="top" size={56} />
  <header className="absolute inset-x-0 top-0 z-30">...</header>
  <List />
</div>

Accessibility

  • Decorative: aria-hidden and pointer-events-none, so links and scrolling underneath keep working.
  • Do not rely on it to hide content from users; the text underneath stays readable by assistive tech.
  • Hidden under forced-colors.

ARIA Attributes

  • `aria-hidden="true"`
  • `data-mode` is `blur` or `fade`

Reduced Motion

The blur itself is static. At motion level none the overlay becomes a single gradient fade with no backdrop-filter, which also helps low-power devices.

Affected properties

backdrop-filter layers

API Reference

PropTypeRequiredDefaultDescription
direction"top" | "bottom" | "start" | "end"NobottomEdge the overlay hugs. Blur is strongest at that edge.
blurLayersnumberNo8Stacked blur layers, clamped to 2 through 8.
blurIntensitynumberNo1Extra blur in pixels per layer.
sizenumber | stringNo6remThickness along the axis. Numbers are pixels.
variant"default" | "plain" | "glass"NodefaultFade color used at motion none.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { ProgressiveBlur } from "@glinui/ui"

Source Files

Dependencies

@glinui/ui@glinui/motionclass-variance-authority

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/progressive-blur.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

ProgressiveBlurProps

ProgressiveBlurProps

PropTypeRequiredDefaultDescription
blurIntensitynumberNo1Extra blur in pixels added per layer (the strongest layer blurs by `(layers - 1) * blurIntensity`).
blurLayersnumberNoMAX_LAYERSNumber of stacked backdrop-filter layers, clamped to 2..8.
direction"top" | "bottom" | "start" | "end"No"bottom"Variant option from progressiveBlurVariants.
sizenumber | stringNo-Thickness of the overlay along its axis. A number is pixels, a string is any CSS length.
variant"default" | "plain" | "glass"No"default"Variant option from progressiveBlurVariants.