スクロールでピントが合う段落

<div class="d02-08-08-stage">
          <span class="d02-08-08-hint">↓ scroll</span>
          <div class="d02-08-08-scroll">
            <div class="d02-08-08-pad-top"></div>
            <div class="d02-08-08-block">
              <h4>デザイン</h4>
              <p>ブランドの世界観を、細部まで丁寧に設計します。</p>
            </div>
            <div class="d02-08-08-block">
              <h4>開発</h4>
              <p>表示速度と保守性を両立したWordPress実装を行います。</p>
            </div>
            <div class="d02-08-08-block">
              <h4>運用</h4>
              <p>公開後も数値を見ながら継続的に改善していきます。</p>
            </div>
            <div class="d02-08-08-pad-bottom"></div>
          </div>
        </div>

.prev.d02-08-08{padding:0;display:block}
        .d02-08-08-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f8fafc}
        .d02-08-08-hint{position:absolute;top:10px;right:14px;font-size:10px;letter-spacing:.1em;color:#94a3b8;pointer-events:none;z-index:2}
        .d02-08-08-scroll{position:absolute;inset:0;overflow-y:auto;padding:0 24px}
        .d02-08-08-pad-top{height:50px}
        .d02-08-08-pad-bottom{height:120px}
        .d02-08-08-block{
          margin:0 0 22px;padding:18px 20px;border-radius:12px;background:#fff;
          box-shadow:0 1px 3px rgba(0,0,0,.06);
          will-change:filter,transform;
        }
        .d02-08-08-block h4{margin:0 0 6px;font-size:16px;font-weight:800;color:#1a2333}
        .d02-08-08-block p{margin:0;font-size:12.5px;line-height:1.8;color:#64748b}

(function(){
        var stage = document.querySelector('#item-02-08-08 .d02-08-08-stage');
        var scroller = document.querySelector('#item-02-08-08 .d02-08-08-scroll');
        if(!stage || !scroller) return;
        var blocks = scroller.querySelectorAll('.d02-08-08-block');
        function update(){
          var stageRect = stage.getBoundingClientRect();
          var centerY = stageRect.top + stageRect.height / 2;
          for(var i = 0; i < blocks.length; i++){
            var rect = blocks[i].getBoundingClientRect();
            var blockCenter = rect.top + rect.height / 2;
            var dist = Math.abs(blockCenter - centerY);
            var norm = 1 - dist / (stageRect.height * 0.55);
            norm = Math.min(Math.max(norm, 0), 1);
            var blurPx = (1 - norm) * 9;
            var grayPct = (1 - norm) * 60;
            blocks[i].style.filter = 'blur(' + blurPx.toFixed(1) + 'px) grayscale(' + grayPct.toFixed(0) + '%)';
            blocks[i].style.transform = 'scale(' + (0.95 + norm * 0.05).toFixed(3) + ')';
          }
        }
        scroller.addEventListener('scroll', update, {passive:true});
        update();
      })();