design-infraReport a problem or share feedback← Catalog
Progressive Blur
curatedfreesmoothui/progressive-blur
A ProgressiveBlur component for SmoothUI.
$
npx shadcn@latest add @smoothui/progressive-blurnpm deps: motion
Our notes
♥ 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.- Source
- SmoothUI
- Kind
- component
- Categories
- scroll-effect
- Use as
- wrapper — wraps your existing element
- Applies to
- imagecarouselcard
- Motion
- on enter · subtle · motion · medium cost · respects reduced motion
- Tags
- spring, complexity-medium
- Licence
- MIT ("MIT License — Copyright (c) 2024 Eduardo Calvo", github.com/educlopez/smoothui).
- Live demo
- Interactive preview
- Docs
- smoothui.dev
Similar
Compare all 4 →- Smooth Scroll Slideroriginkit/smooth-scroll-slider
- Progressive Blurmotion-primitives/progressive-blurLayered backdrop-filter blur gradient for edges of scroll areas/images. Colourless; backdrop-filter costs GPU — keep blurLayers low.
- Progressive Blurmagicui/progressive-blurThe Progressive Blur component adds a smooth blur gradient effect to scrollable content, indicating more content below or above.