Podcast Flip Counter — Live CSS Playground

{CF} CodeFronts Back to CSS Number Counter Animations Podcast Flip Counter CSS + JS

HTML

<div class="cnc-pod">
  <div class="cnc-pod-block">
    <div class="cnc-pod-show-name">The Deep Dive · Episode 312</div>
    <div class="cnc-pod-flip-row">
      <div class="cnc-pod-flip-digit" data-pos="0"><span class="cnc-pod-digit-val">0</span></div>
      <div class="cnc-pod-flip-digit" data-pos="1"><span class="cnc-pod-digit-val">0</span></div>
      <div class="cnc-pod-flip-digit" data-pos="2"><span class="cnc-pod-digit-val">0</span></div>
      <span class="cnc-pod-sep">,</span>
      <div class="cnc-pod-flip-digit" data-pos="3"><span class="cnc-pod-digit-val">0</span></div>
      <div class="cnc-pod-flip-digit" data-pos="4"><span class="cnc-pod-digit-val">0</span></div>
      <div class="cnc-pod-flip-digit" data-pos="5"><span class="cnc-pod-digit-val">0</span></div>
    </div>
    <div class="cnc-pod-unit-label">Total Plays · All Time</div>
    <div class="cnc-pod-wave">
      <div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div>
      <div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div>
      <div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div>
      <div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div>
      <div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div><div class="cnc-pod-wave-bar"></div>
    </div>
    <div class="cnc-pod-milestone">● LIVE · 312 listening now</div>
  </div>
</div>

CSS

.cnc-pod { display: grid; place-items: center; padding: 48px 16px; background: #0e0e0e; font-family: 'Syne Mono', monospace; }
.cnc-pod *, .cnc-pod *::before, .cnc-pod *::after { box-sizing: border-box; }
.cnc-pod-block { width: 560px; text-align: center; padding: 24px; font-family: 'Syne Mono', monospace; opacity: 0; animation: cnc-pod-fadeIn 0.5s ease 0.1s forwards; }
.cnc-pod-show-name { font-family: 'Syne', sans-serif; font-size: 11px; letter-spacing: 6px; text-transform: uppercase; color: #555; margin-bottom: 52px; font-weight: 700; }
.cnc-pod-flip-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; }
.cnc-pod-flip-digit { width: 72px; height: 96px; background: #171717; border-radius: 10px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 #000, 0 0 0 1px rgba(255,255,255,0.04); }
.cnc-pod-flip-digit::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,0.6); z-index: 10; }
.cnc-pod-digit-val { font-family: 'Syne', sans-serif; font-size: 72px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -2px; user-select: none; }
.cnc-pod-flip-digit.is-flip .cnc-pod-digit-val { animation: cnc-pod-flipNum 0.22s ease-in-out; }
@keyframes cnc-pod-flipNum { 0% { transform: scaleY(1); opacity: 1; } 45% { transform: scaleY(0); opacity: 0; } 55% { transform: scaleY(0); opacity: 0; } 100% { transform: scaleY(1); opacity: 1; } }
.cnc-pod-sep { font-family: 'Syne', sans-serif; font-size: 48px; font-weight: 800; color: #2a2a2a; line-height: 96px; user-select: none; }
.cnc-pod-unit-label { font-size: 9px; letter-spacing: 5px; text-transform: uppercase; color: #333; margin-top: 28px; }
.cnc-pod-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 32px; margin: 36px auto 0; }
.cnc-pod-wave-bar { width: 3px; border-radius: 2px; background: #ff3b3b; animation: cnc-pod-wave 1.1s ease-in-out infinite; opacity: 0.7; }
.cnc-pod-wave-bar:nth-child(1) { animation-delay: 0.0s; height: 8px; }
.cnc-pod-wave-bar:nth-child(2) { animation-delay: 0.1s; height: 18px; }
.cnc-pod-wave-bar:nth-child(3) { animation-delay: 0.2s; height: 28px; }
.cnc-pod-wave-bar:nth-child(4) { animation-delay: 0.3s; height: 20px; }
.cnc-pod-wave-bar:nth-child(5) { animation-delay: 0.4s; height: 14px; }
.cnc-pod-wave-bar:nth-child(6) { animation-delay: 0.5s; height: 24px; }
.cnc-pod-wave-bar:nth-child(7) { animation-delay: 0.6s; height: 32px; }
.cnc-pod-wave-bar:nth-child(8) { animation-delay: 0.7s; height: 22px; }
.cnc-pod-wave-bar:nth-child(9) { animation-delay: 0.8s; height: 16px; }
.cnc-pod-wave-bar:nth-child(10) { animation-delay: 0.9s; height: 26px; }
.cnc-pod-wave-bar:nth-child(11) { animation-delay: 1.0s; height: 12px; }
.cnc-pod-wave-bar:nth-child(12) { animation-delay: 0.55s; height: 20px; }
.cnc-pod-wave-bar:nth-child(13) { animation-delay: 0.35s; height: 28px; }
.cnc-pod-wave-bar:nth-child(14) { animation-delay: 0.15s; height: 14px; }
.cnc-pod-wave-bar:nth-child(15) { animation-delay: 0.75s; height: 8px; }
@keyframes cnc-pod-wave { 0%, 100% { transform: scaleY(0.3); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }
.cnc-pod-milestone { margin-top: 32px; display: inline-flex; align-items: center; gap: 10px; background: rgba(255,59,59,0.08); border: 1px solid rgba(255,59,59,0.18); border-radius: 100px; padding: 8px 20px; font-size: 11px; color: #ff3b3b; letter-spacing: 2px; }
.cnc-pod-milestone::before { content: ''; width: 6px; height: 6px; background: #ff3b3b; border-radius: 50%; box-shadow: 0 0 8px #ff3b3b; animation: cnc-pod-blip 1s ease-in-out infinite; }
@keyframes cnc-pod-blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes cnc-pod-fadeIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cnc-pod-block, .cnc-pod-wave-bar, .cnc-pod-milestone::before { animation: none; opacity: 1; }
}

(function () {
  var root = document.querySelector('.cnc-pod');
  if (!root) return;
  var TARGET = 847312, DURATION = 2600;
  var digits = root.querySelectorAll('.cnc-pod-flip-digit');
  function setDigits(num) {
    var str = String(num).padStart(6, '0');
    digits.forEach(function (el, i) {
      var span = el.querySelector('.cnc-pod-digit-val');
      var newChar = str[i];
      if (span.textContent !== newChar) {
        span.textContent = newChar;
        el.classList.remove('is-flip');
        void el.offsetWidth;
        el.classList.add('is-flip');
      }
    });
  }
  function ease(t) { return 1 - Math.pow(1 - t, 3); }
  setTimeout(function () {
    var start = performance.now();
    function tick(now) {
      var t = Math.min((now - start) / DURATION, 1);
      setDigits(Math.round(ease(t) * TARGET));
      if (t < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }, 500);
})();