Vertical Cut Reveal New

<!-- Vertical Cut Reveal · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="vcr"><span class="vcr__kick">Webbureau · Rotterdam</span><h3 class="vcr__h">Nieuwe website binnen zes weken</h3><p class="vcr__sub">Vaste prijs vanaf € 4.500, inclusief teksten en hosting.</p><button class="vcr__re">Opnieuw</button></div>
</div>

/* Vertical Cut Reveal · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.vcr{position:absolute;inset:0;background:#fff;padding:18px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;container-type:size}
.vcr__kick{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#F5480F}
.vcr__h{margin:8px 0 10px;font:800 min(7.6cqw,13cqh)/1.25 'Boldonse','Switzer',system-ui,sans-serif;font-synthesis:none;color:#0a0a0a;max-width:13em}
.vcr__w{display:inline-block;white-space:nowrap}
.vcr__m{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.vcr__c{display:inline-block;transform:translateY(110%)}
.vcr.is-in .vcr__c{transform:none;transition:transform .7s cubic-bezier(.34,1.45,.5,1);transition-delay:calc(var(--i) * 22ms)}
.vcr__sub{margin:0;font-size:13px;color:rgba(10,10,10,.7);opacity:0;transform:translateY(6px)}
.vcr.is-in .vcr__sub{opacity:1;transform:none;transition:opacity .5s .7s,transform .5s .7s}
.vcr__re{position:absolute;right:12px;bottom:10px;border:1px solid #0a0a0a;background:none;border-radius:999px;padding:4px 10px;font:600 11px 'Switzer',system-ui,sans-serif;cursor:pointer;color:#0a0a0a}
@media(prefers-reduced-motion:reduce){.vcr__c{transform:none}.vcr__sub{opacity:1;transform:none}.vcr.is-in .vcr__c,.vcr.is-in .vcr__sub{transition:none}}

// Vertical Cut Reveal · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.vcr')||root;var h=root.querySelector('.vcr__h'),words=h.textContent.split(' '),k=0;h.setAttribute('aria-label',h.textContent);h.textContent='';
words.forEach(function(w,wi){var ws=document.createElement('span');ws.className='vcr__w';ws.setAttribute('aria-hidden','true');w.split('').forEach(function(ch){var m=document.createElement('span');m.className='vcr__m';var c=document.createElement('span');c.className='vcr__c';c.style.setProperty('--i',k++);c.textContent=ch;m.appendChild(c);ws.appendChild(m);});h.appendChild(ws);if(wi<words.length-1)h.appendChild(document.createTextNode(' '));});
function play(){root.classList.remove('is-in');void root.offsetWidth;root.classList.add('is-in');}
root.querySelector('.vcr__re').addEventListener('click',play);
if('IntersectionObserver' in window){var io=new IntersectionObserver(function(es){if(es[0].isIntersecting){play();io.disconnect();}},{threshold:.4});io.observe(root);}else play();
}
init(document.querySelector('.jouw-container'));