視聴者数・オンライン人数表示演出

<div class="d06-04-09-wrap">
          <span class="d06-04-09-live"><span class="d06-04-09-livedot"></span>LIVE</span>
          <span class="d06-04-09-count">128</span>
          <span class="d06-04-09-label">人が視聴中</span>
        </div>

.d06-04-09-wrap { display:flex; align-items:center; gap:8px; }
        .d06-04-09-live { display:flex; align-items:center; gap:4px; background:#111827; color:#fff; font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px; letter-spacing:.05em; }
        .d06-04-09-livedot { width:6px; height:6px; border-radius:50%; background:#ef4444; animation:d539blink 1.2s ease-in-out infinite; }
        @keyframes d539blink { 0%,100%{ opacity:1;} 50%{ opacity:.3;} }
        .d06-04-09-count { font-size:19px; font-weight:700; color:#1f2937; }
        .d06-04-09-count.d06-04-09-flash { animation:d539flash .4s ease; }
        @keyframes d539flash { 0%{ color:#3b82f6;} 100%{ color:#1f2937;} }
        .d06-04-09-label { font-size:12px; color:#9ca3af; }

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-04-09');
          var countEl = root.querySelector('.d06-04-09-count');
          var base = 128;
          function tick(){
            var next = Math.max(96, Math.min(168, base + Math.floor(Math.random()*11) - 5));
            base = next;
            countEl.textContent = next;
            countEl.classList.remove('d06-04-09-flash');
            void countEl.offsetWidth;
            countEl.classList.add('d06-04-09-flash');
            setTimeout(tick, 1100 + Math.random()*900);
          }
          setTimeout(tick, 1200);
        })();