フォロワー数リアルタイム風カウンター

<div class="d06-04-03-wrap">
          <span class="d06-04-03-dot"></span>
          <div class="d06-04-03-info">
            <span class="d06-04-03-count">2,048</span>
            <span class="d06-04-03-label">フォロワー</span>
          </div>
        </div>

.d06-04-03-wrap { display:flex; align-items:center; gap:10px; }
        .d06-04-03-dot { width:10px; height:10px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 rgba(34,197,94,.6); animation:d533ping 1.8s ease-out infinite; }
        @keyframes d533ping { 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5);} 70%{ box-shadow:0 0 0 8px rgba(34,197,94,0);} 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0);} }
        .d06-04-03-info { display:flex; flex-direction:column; }
        .d06-04-03-count { font-size:22px; font-weight:700; color:#1f2937; }
        .d06-04-03-count.d06-04-03-bump { animation:d533bump .4s ease; }
        @keyframes d533bump { 0%{ color:#22c55e; transform:translateY(0);} 30%{ transform:translateY(-3px);} 100%{ color:#1f2937; transform:translateY(0);} }
        .d06-04-03-label { font-size:12px; color:#9ca3af; }

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-04-03');
          var countEl = root.querySelector('.d06-04-03-count');
          var count = 2048;
          function tick(){
            count += 1 + Math.floor(Math.random()*4);
            countEl.textContent = count.toLocaleString();
            countEl.classList.remove('d06-04-03-bump');
            void countEl.offsetWidth;
            countEl.classList.add('d06-04-03-bump');
            setTimeout(tick, 1400 + Math.random()*1400);
          }
          setTimeout(tick, 1500);
        })();