Perspective Tunnel

<!-- Perspective Tunnel · NedDev · eigen werk. -->
<!-- benodigd, één keer per pagina: -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>

<div class="jouw-container">
<div class="pt-tunnel"></div><div class="pt-core">&#8734;</div>
</div>

/* Perspective Tunnel · NedDev · eigen werk. */
.pt-stage{position:relative;width:100%;height:100%;background:radial-gradient(circle at 50% 50%,#161616,#0a0a0a 70%);overflow:hidden;perspective:600px}
.pt-tunnel{position:absolute;inset:0;transform-style:preserve-3d;display:grid;place-items:center}
.pt-ring{position:absolute;width:60%;aspect-ratio:1;border:2px solid rgba(245,72,15,.5);border-radius:50%;will-change:transform,opacity}.pt-ring:nth-child(even){border-color:rgba(255,255,255,.22)}
.pt-core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:300 clamp(40px,10vw,90px)/1 'Switzer',sans-serif;color:#F5480F;pointer-events:none}

// Perspective Tunnel · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root.classList.add('pt-stage');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;var tun=root.querySelector('.pt-tunnel');var COUNT=8,rings=[];
for(var i=0;i<COUNT;i++){var r=document.createElement('div');r.className='pt-ring';tun.appendChild(r);rings.push(r);}
function place(p){rings.forEach(function(r,i){var z=((i/COUNT)+p)%1;var tz=-700+z*900;var op=z<.12?z/.12:(z>.85?(1-z)/.15:1);r.style.transform='translateZ('+tz+'px) scale('+(.4+z*1.1)+')';r.style.opacity=op.toFixed(2);});}
place(0);
if(window.gsap&&window.ScrollTrigger&&!reduce){gsap.registerPlugin(ScrollTrigger);var o={p:0};gsap.to(o,{p:1,ease:'none',scrollTrigger:{trigger:root,start:'top bottom',end:'bottom top',scrub:true,onUpdate:function(){place(o.p);}}});}else if(!reduce){var p=0;(function loop(){p=(p+.0025)%1;place(p);requestAnimationFrame(loop);})();}
}
init(document.querySelector('.jouw-container'));