A blur with no hard edge
A single sheet of frosted glass ends in a line where the blur stops. Progressive blur stacks four layers of rising strength, each fading out sooner than the last, so the page is frosted at one side and sharp by the other. It fills its positioned parent, sits behind a header or a toolbar, and lets the pointer through. The site header on this page sits on one.
Sides
Anchor it to the top behind a header, or to the bottom behind a toolbar or a footer bar.
Tint
tinted lays the page surface over the blur, strongest at the anchored side. The tint fades when it changes and the blur never does, so a header can bring it in once the page has scrolled without the blur snapping. Point --ds-progressive-blur-tint at another surface when the blur sits over one.
// From the npm package
import { ProgressiveBlur } from 'rift-ds/components/ProgressiveBlur/ProgressiveBlur';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/progressive-blur.json