fog at the page's edges

Scroll. The top fog arrives over the first 160px and the bottom one leaves over the last 140px, so the page opens and closes clean.

Neither is ever transitioned. A scrim that crossfades over 500ms is still crossfading while a smooth anchor scroll is flying, which is what read as a weird effect.

Linked to the scroll instead, it is simply where the scroll is: drag the scrollbar and the fog tracks your hand exactly.

A page with a sticky blurred header already HAS a top scrim. Turn this one off there, with top={false}.

On a page too short to scroll the timeline never runs, so both rest at zero and nothing fogs a page that cannot move.

It is a masked backdrop-blur over a gradient: no layout, no pointer events, and nothing for the content underneath to know about.