scroll fog effect (credit to jhey)

scroll-fog.css

@supports (animation-timeline: scroll()) {
    :root {
      --scroll-fog-size: 120;
    }
    .scroll-fog {
      animation:
        mask-up both linear,
        mask-down both linear;
      animation-timeline: scroll(self);
      animation-range:
        0 calc(var(--scroll-fog-size) * 1px),
        calc(100% - (var(--scroll-fog-size) * 1px)) 100%;
      mask:
        linear-gradient(white, transparent) 0 0 / 100% 0 no-repeat,
        linear-gradient(white, white) 0 50% / 100% 100% no-repeat,
        linear-gradient(transparent, white) 0 100% / 100%
          calc(var(--scroll-fog-size) * 1px) no-repeat;
      mask-composite: exclude;
    }

    @keyframes mask-up {
      to {
        mask-size:
          100% calc(var(--scroll-fog-size) * 1px),
          100% 100%;
      }
    }

    @keyframes mask-down {
      100% {
        mask-size:
          100% calc(var(--scroll-fog-size) * 1px),
          100% 100%,
          100% 0;
      }
    }
  }

The main trick is lifted from jhey:

• x post
• codepen

Puts a mask over your element, reveals when scroll starts / stops.