# Motion Progressive Blur

Progressive blur at the bottom of a scrolling list.

- id: `motion-progressive-blur`
- Page: https://agentic-ui-kit.com/components/motion-progressive-blur
- Live preview: https://agentic-ui-kit.com/live/component/motion-progressive-blur?piece=motion-progressive-blur

## Install

```bash
agentic-ui add motion-progressive-blur
npx shadcn@4.17.0 add @agentic-ui/motion-progressive-blur
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** progressive-edge-blur, top-bottom-left-right-edges, stacked-backdrop-filter-layers, gradient-masks, tint-to-background, scroll-aware-edges, keyboard-scrollable-region, adjustable-strength, reduced-motion-fallback
- **Intents:** communicate, explore-detail
- **Suits domains:** marketing, saas, ecommerce, media, social, knowledge
- **Interaction:** scroll, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** progressive blur at the bottom of a scrolling list, gradient blur edge on a horizontal card carousel, variable blur overlay fading content at the top or bottom edge, ios style progressive blur under a header or above a footer
- **Avoid when:** Browsers without backdrop-filter, where only the fade to the background remains, Long lists with many layers on low-end devices (use fewer layers), A plain sticky header (a single backdrop blur is enough), Text that must stay readable at the edge
- **Preserve when adapting:** focusable-scroll-region, aria-hidden-layers, pointer-events-none, edge-state-on-scroll
- **Replace when adapting:** children, edges, size, strength, layers, tint, scroll, height
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion