Letters buigen als gras Nieuw

<!-- Letters buigen als gras · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="t7b">
<h3 class="t7b__h">Tuinen die meebewegen</h3>
<p class="t7b__p">Hovenier Van Rijn, voor tuinen in Leiden en Oegstgeest. Beweeg langs de kop.</p>
</div>
</div>

/* Letters buigen als gras · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.t7b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 20px;container-type:size;font-family:'Switzer',sans-serif;touch-action:pan-y;box-sizing:border-box}
.t7b__h{margin:0;max-width:100%;font-weight:400;font-size:clamp(28px,10cqi,52px);line-height:1.1;letter-spacing:-.02em;color:#0a0a0a;text-align:center;cursor:default}
.t7b__wd{display:inline-block;white-space:nowrap}
.t7b__c{display:inline-block;transform-origin:50% 92%}
.t7b__c.is-g{color:#F5480F}
.t7b__p{margin:0;max-width:30em;font-size:clamp(12px,3.3cqi,15px);line-height:1.45;color:#4a4a4a;text-align:center}

// Letters buigen als gras · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.t7b'),h=w.querySelector('.t7b__h'),txt=h.textContent;h.textContent='';h.setAttribute('aria-label',txt);
var C=[];txt.split(' ').forEach(function(word,wi){if(wi)h.appendChild(document.createTextNode(' '));var ws=document.createElement('span');ws.className='t7b__wd';ws.setAttribute('aria-hidden','true');word.split('').forEach(function(ch){var s=document.createElement('span');s.className='t7b__c';s.textContent=ch;ws.appendChild(s);C.push({el:s,a:0,v:0,wt:400});});h.appendChild(ws);});
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches,px=-9999,py=-9999,pvx=0,lastX=null,raf=0,gust=null;
function tick(now){raf=0;var R=Math.max(90,h.offsetWidth*.22),live=false;
if(gust){var p=(now-gust)/1500;if(p>1){gust=null;px=-9999;}else{var b=h.getBoundingClientRect();px=b.left-60+p*(b.width+120);py=b.top+b.height/2;pvx=8;}}
C.forEach(function(c){var r=c.el.getBoundingClientRect(),dx=r.left+r.width/2-px,dy=r.top+r.height*.6-py,d=Math.sqrt(dx*dx+dy*dy),f=Math.max(0,1-d/R);f=f*f;
var tgt=(dx>=0?1:-1)*f*30+pvx*f*1.4;tgt=Math.max(-26,Math.min(26,tgt));c.v=(c.v+(tgt-c.a)*.11)*.8;c.a+=c.v;
var wt=Math.round((400+Math.min(1,Math.abs(c.a)/26)*500)/100)*100;if(wt!==c.wt){c.wt=wt;c.el.style.fontWeight=wt;}
c.el.style.transform=Math.abs(c.a)<.05?'':'rotate('+c.a.toFixed(2)+'deg) skewX('+(-c.a*.35).toFixed(2)+'deg)';c.el.classList.toggle('is-g',Math.abs(c.a)>12);
if(Math.abs(c.a)>.05||Math.abs(c.v)>.05||f>0)live=true;});pvx*=.9;if((live||gust)&&w.isConnected)raf=requestAnimationFrame(tick);}
function go(){if(!raf&&!reduce)raf=requestAnimationFrame(tick);}
w.addEventListener('pointermove',function(e){if(lastX!==null)pvx=Math.max(-14,Math.min(14,e.clientX-lastX));lastX=e.clientX;px=e.clientX;py=e.clientY;go();});
w.addEventListener('pointerleave',function(){px=py=-9999;lastX=null;go();});
if(!reduce&&'IntersectionObserver' in window){var io=new IntersectionObserver(function(en){if(!en[0].isIntersecting)return;io.disconnect();setTimeout(function(){gust=performance.now();go();},400);},{threshold:.6});io.observe(w);}
}
init(document.querySelector('.jouw-container'));