Number Flow Price New

<!-- Number Flow Price · Bron: SmoothUI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="nfp"><div class="nfp__tg" role="radiogroup" aria-label="Betaalperiode"><span class="nfp__pill"></span><button type="button" role="radio" aria-checked="true" class="is-on" data-k="m">Per maand</button><button type="button" role="radio" aria-checked="false" data-k="y">Per jaar</button></div><div class="nfp__card"><div class="nfp__top"><span class="nfp__plan">Webshop Groei</span><span class="nfp__save">2 maanden gratis</span></div><div class="nfp__price"><span class="nfp__cur">€</span><span class="nfp__num" aria-hidden="true"></span><span class="nfp__per">/maand</span><span class="nfp__sr" aria-live="polite"></span></div><p class="nfp__note">Excl. btw · tot 500 producten · maandelijks opzegbaar</p></div></div>
</div>

/* Number Flow Price · Bron: SmoothUI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.nfp{font-family:'Switzer',system-ui,sans-serif;width:290px;max-width:88%;display:flex;flex-direction:column;align-items:center;gap:12px}
.nfp__tg{position:relative;display:inline-flex;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:999px;padding:3px}
.nfp__tg button{position:relative;z-index:1;font:600 12px/1 'Switzer',system-ui,sans-serif;background:none;border:0;padding:9px 16px;border-radius:999px;color:#0a0a0a;cursor:pointer;transition:color .3s}
.nfp__tg button.is-on{color:#fff}
.nfp__tg button:focus-visible{outline:2px solid #F5480F;outline-offset:1px}
.nfp__pill{position:absolute;top:3px;bottom:3px;left:3px;border-radius:999px;background:#0a0a0a;transition:transform .45s cubic-bezier(.65,0,.2,1),width .45s cubic-bezier(.65,0,.2,1)}
.nfp__card{width:100%;box-sizing:border-box;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:6px;padding:16px 18px}
.nfp__top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.nfp__plan{font-size:14px;font-weight:700;color:#0a0a0a}
.nfp__save{font:500 9px/1 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#F5480F;border:1px solid #F5480F;border-radius:999px;padding:4px 7px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.nfp.is-y .nfp__save{opacity:1;transform:none}
.nfp__price{display:flex;align-items:baseline;margin:10px 0 6px;color:#0a0a0a;position:relative}
.nfp__cur{font-size:22px;font-weight:600;margin-right:4px}
.nfp__num{display:inline-flex;font-size:46px;font-weight:700;letter-spacing:-.03em;line-height:1;height:1em;font-variant-numeric:tabular-nums}
.nfp__slot{display:inline-block;height:1em;overflow:hidden;width:.6em;transition:width .5s cubic-bezier(.65,0,.2,1),opacity .4s}
.nfp__slot.is-off{width:0;opacity:0}
.nfp__col{display:flex;flex-direction:column;transition:transform .7s cubic-bezier(.65,0,.2,1)}
.nfp__col span{height:1em;line-height:1;text-align:center}
.nfp__per{font-size:13px;color:rgba(10,10,10,.55);margin-left:6px}
.nfp__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nfp__note{margin:0;font-size:11px;color:rgba(10,10,10,.55)}
@media(prefers-reduced-motion:reduce){.nfp__col,.nfp__slot,.nfp__pill{transition:none}}

// Number Flow Price · Bron: SmoothUI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.nfp'); if (!w) return;
    var num = w.querySelector('.nfp__num'), per = w.querySelector('.nfp__per'), sr = w.querySelector('.nfp__sr'), pill = w.querySelector('.nfp__pill'), bts = w.querySelectorAll('.nfp__tg button');
    var P = { m: { v: 89, per: '/maand' }, y: { v: 854, per: '/jaar' } }, N = 4, slots = [];
    for (var i = 0; i < N; i++) {
      var s = document.createElement('span'); s.className = 'nfp__slot is-off';
      var c = document.createElement('span'); c.className = 'nfp__col';
      for (var d = 0; d < 10; d++) { var g = document.createElement('span'); g.textContent = d; c.appendChild(g); }
      s.appendChild(c); num.appendChild(s); slots.push(s);
    }
    function show(k) {
      var str = String(P[k].v), off = N - str.length;
      slots.forEach(function (s, i) {
        var ch = str[i - off]; var col = s.firstChild;
        s.classList.toggle('is-off', ch === undefined);
        col.style.transitionDelay = ((N - i) * 60) + 'ms';
        col.style.transform = 'translateY(' + (ch === undefined ? 0 : -(+ch) * 10) + '%)';
      });
      per.textContent = P[k].per; sr.textContent = '€ ' + P[k].v + ' ' + P[k].per.slice(1);
      w.classList.toggle('is-y', k === 'y');
      bts.forEach(function (b) { var on = b.dataset.k === k; b.classList.toggle('is-on', on); b.setAttribute('aria-checked', String(on)); if (on) { pill.style.width = b.offsetWidth + 'px'; pill.style.transform = 'translateX(' + (b.offsetLeft - 3) + 'px)'; } });
    }
    bts.forEach(function (b) { b.addEventListener('click', function () { show(b.dataset.k); }); });
    w.querySelector('.nfp__tg').addEventListener('keydown', function (e) { if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') { var k = w.classList.contains('is-y') ? 'm' : 'y'; show(k); w.querySelector('[data-k="' + k + '"]').focus(); } });
    show('m');
    if (document.fonts && document.fonts.ready) document.fonts.ready.then(function () { show(w.classList.contains('is-y') ? 'y' : 'm'); });
}
init(document.querySelector('.jouw-container'));