アウトライン塗りつぶしテキスト

<div class="d02-08-12-stage">
          <span class="d02-08-12-hint">↓ scroll</span>
          <div class="d02-08-12-scroll">
            <div class="d02-08-12-pad-top"></div>
            <p class="d02-08-12-text">確かな品質を、この手でひとつずつ仕上げていきます。</p>
            <div class="d02-08-12-pad-bottom"></div>
          </div>
        </div>

.prev.d02-08-12{padding:0;display:block}
        .d02-08-12-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#fff}
        .d02-08-12-hint{position:absolute;top:10px;right:14px;font-size:10px;letter-spacing:.1em;color:#94a3b8;pointer-events:none;z-index:2}
        .d02-08-12-scroll{position:absolute;inset:0;overflow-y:auto;padding:0 24px}
        .d02-08-12-pad-top{height:80px}
        .d02-08-12-pad-bottom{height:160px}
        .d02-08-12-text{margin:0;font-size:18px;font-weight:800;line-height:2;letter-spacing:.02em}
        .d02-08-12-text .ch{
          display:inline-block;color:transparent;
          -webkit-text-stroke:1px #cbd5e1;
          transition:color .15s ease, -webkit-text-stroke-color .15s ease;
        }
        .d02-08-12-text .ch.cur{-webkit-text-stroke:1px #6a5cff;color:transparent}
        .d02-08-12-text .ch.on{color:#6a5cff;-webkit-text-stroke:0 #6a5cff}

(function(){
        var root = document.getElementById('item-02-08-12');
        if(!root) return;
        var scroller = root.querySelector('.d02-08-12-scroll');
        var textEl = root.querySelector('.d02-08-12-text');
        if(!scroller || !textEl) return;
        var text = textEl.textContent;
        textEl.textContent = '';
        var chars = [];
        for(var i = 0; i < text.length; i++){
          var s = document.createElement('span');
          s.className = 'ch';
          s.textContent = text[i] === ' ' ? ' ' : text[i];
          textEl.appendChild(s);
          chars.push(s);
        }
        function update(){
          var max = scroller.scrollHeight - scroller.clientHeight;
          var progress = max > 0 ? Math.min(Math.max(scroller.scrollTop / max, 0), 1) : 0;
          var idx = Math.floor(progress * chars.length);
          for(var i = 0; i < chars.length; i++){
            if(i < idx){ chars[i].className = 'ch on'; }
            else if(i === idx){ chars[i].className = 'ch cur'; }
            else{ chars[i].className = 'ch'; }
          }
        }
        scroller.addEventListener('scroll', update, {passive:true});
        update();
      })();