いいね数カウントアップ演出

<div class="d06-04-01-wrap">
          <button class="d06-04-01-heart" type="button" aria-label="いいね">
            <svg viewBox="0 0 24 24" width="36" height="36"><path d="M12 21s-7.5-4.6-10-9.1C0.5 8.5 2 5 5.5 5c2 0 3.5 1.2 4.5 2.6C11 6.2 12.5 5 14.5 5 18 5 19.5 8.5 18 11.9 15.5 16.4 12 21 12 21z"/></svg>
          </button>
          <span class="d06-04-01-count">128</span>
          <span class="d06-04-01-label">いいね</span>
        </div>

.d06-04-01-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; }
        .d06-04-01-heart { position:relative; border:none; background:none; cursor:pointer; padding:8px; color:#9ca3af; line-height:0; }
        .d06-04-01-heart svg { fill:currentColor; transition:color .2s; }
        .d06-04-01-heart.d06-04-01-liked { color:#f43f5e; }
        .d06-04-01-heart.d06-04-01-pop { animation:d531pop .4s ease; }
        @keyframes d531pop { 0%{transform:scale(1);} 35%{transform:scale(1.35);} 100%{transform:scale(1);} }
        .d06-04-01-count { font-size:20px; font-weight:700; color:#1f2937; }
        .d06-04-01-label { font-size:12px; color:#9ca3af; }
        .d06-04-01-particle { position:absolute; width:10px; height:10px; color:#f43f5e; pointer-events:none; animation:d531fly .8s ease-out forwards; }
        .d06-04-01-particle::before { content:"♥"; font-size:12px; }
        @keyframes d531fly { to { transform:translate(var(--d06-04-01-x), var(--d06-04-01-y)) scale(.3); opacity:0; } }

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-04-01');
          var btn = root.querySelector('.d06-04-01-heart');
          var countEl = root.querySelector('.d06-04-01-count');
          var wrap = root.querySelector('.d06-04-01-wrap');
          var count = 128;
          var liked = false;
          btn.addEventListener('click', function(){
            liked = !liked;
            count += liked ? 1 : -1;
            countEl.textContent = count;
            btn.classList.remove('d06-04-01-pop');
            void btn.offsetWidth;
            btn.classList.add('d06-04-01-pop');
            btn.classList.toggle('d06-04-01-liked', liked);
            if(liked){ spawnParticles(); }
          });
          function spawnParticles(){
            for(var i=0;i<6;i++){
              var p = document.createElement('span');
              p.className = 'd06-04-01-particle';
              var angle = Math.random()*100-50;
              var dist = 28+Math.random()*22;
              p.style.setProperty('--d06-04-01-x', (Math.sin(angle*Math.PI/180)*dist)+'px');
              p.style.setProperty('--d06-04-01-y', (-dist-Math.random()*18)+'px');
              p.style.left = '46%';
              p.style.top = '4px';
              wrap.appendChild(p);
              p.addEventListener('animationend', function(){ this.remove(); });
            }
          }
        })();