Progressive Blur

`<pura-progressive-blur>` wraps scrollable content and dissolves whatever leaves the reading area into a gradient blur instead of a hard cut, the premium finish seen in lists, feeds and sidebars. It stacks a few overlay layers per edge, each applying a stronger `backdrop-filter: blur()` and clipped by a `mask-image` gradient band, so the blur ramps smoothly from zero to the maximum at the edge. The effect is 100% CSS: no scroll listeners, no per-frame JS, and the SSR paint is identical to the live one. `edges` picks which sides get the zone, `blur` the maximum strength, `size` the zone depth and `layers` the ramp smoothness. Browsers without `backdrop-filter` fall back to a plain fade in `--pura-progressive-blur-fade` (transparent by default). The inner scroller is keyboard focusable; overlays are aria-hidden and click-through. Each instance registers in `window.__puraProgressiveBlurs` by `data-pura-id`.

Preview

<!-- vertical feed: content melts into blur at top and bottom -->
<pura-progressive-blur style="height: 420px;">
  <ul class="feed">
    <li>...</li>
    <li>...</li>
  </ul>
</pura-progressive-blur>

<!-- horizontal strip with a deeper, stronger zone on left and right -->
<pura-progressive-blur edges="horizontal" blur="16" size="6rem" style="height: 96px;">
  <div style="display: flex; gap: 24px; width: max-content; align-items: center;">
    <img src="/logos/a.svg" alt="Logo A" />
    <img src="/logos/b.svg" alt="Logo B" />
    <img src="/logos/c.svg" alt="Logo C" />
  </div>
</pura-progressive-blur>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/progressive-blur.js"></script>

import "./pura/lib/progressive-blur.js";