design-infraReport a problem or share feedback← Catalog
Progressive Blur
curatedtheme-awarefreemotion-primitives/progressive-blur
A component that applies progressive blur effects to elements.
$
npx shadcn@latest add @motion-primitives/progressive-blurnpm deps: motion
Our notes
Layered backdrop-filter blur gradient for edges of scroll areas/images. Colourless; backdrop-filter costs GPU — keep blurLayers low.- Source
- Motion Primitives
- Kind
- component
- Categories
- scroll-effect
- Use as
- wrapper — wraps your existing element
- Applies to
- imagecarouselcard
- Motion
- on enter · subtle · motion · medium cost
- Tags
- motion
- Licence
- MIT (ibelick/motion-primitives). Motion Primitives Pro is a separate paid product — not catalogued.
- Live demo
- motion-primitives.com
- Docs
- motion-primitives.com
Similar
Compare all 4 →- Progressive Blursmoothui/progressive-blur♥ The user wants more interesting live homepage examples and shared this surface effect. Show it over a scrollable UI with readable controls outside the blur; it is a static surface effect, not a loading animation. — Layered CSS backdrop blur for fading scroll-container edges and decorative surfaces. It is not a loader or a continuous animation. Keep text, focus targets and controls outside the strongest blur; the decorative overlay must not intercept interaction. Hosted demo includes a real scroll container and blur controls.
- Smooth Scroll Slideroriginkit/smooth-scroll-slider
- Progressive Blurmagicui/progressive-blurThe Progressive Blur component adds a smooth blur gradient effect to scrollable content, indicating more content below or above.