Gravity Tags Nieuw

<!-- Gravity Tags · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="grl"><div class="grl__head"><span class="grl__kick">Studio Noordzij · Haarlem</span><h3 class="grl__h">Wat we voor je maken</h3></div>
<span class="grl__b grl__b--o">Webdesign</span><span class="grl__b">SEO</span><span class="grl__b grl__b--w">Webshops</span><span class="grl__b grl__b--o">Google Ads</span><span class="grl__b">Hosting</span><span class="grl__b grl__b--w">Branding</span><span class="grl__b">Apps</span><span class="grl__b grl__b--o">Onderhoud</span><span class="grl__b grl__b--w">Fotografie</span>
<button class="grl__re">Opnieuw</button></div>
</div>

/* Gravity Tags · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.grl{position:absolute;inset:0;background:#f4f3f1;overflow:hidden;font-family:'Switzer',system-ui,sans-serif;user-select:none}
.grl__head{position:absolute;left:14px;top:12px;right:90px;pointer-events:none}
.grl__kick{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#F5480F}
.grl__h{margin:6px 0 0;font:800 clamp(16px,5vw,22px)/1.2 'Boldonse','Switzer',system-ui,sans-serif;font-synthesis:none;color:#0a0a0a}
.grl__b{position:absolute;left:0;top:0;padding:7px 13px;border-radius:999px;background:#0a0a0a;color:#fff;font-size:13px;font-weight:600;white-space:nowrap;cursor:grab;touch-action:none;will-change:transform;transform:translate(-999px,-999px)}
.grl__b--o{background:#F5480F}
.grl__b--w{background:#fff;color:#0a0a0a;box-shadow:inset 0 0 0 1px #0a0a0a}
.grl__b.is-drag{cursor:grabbing;z-index:2}
.grl__re{position:absolute;right:12px;top:12px;border:1px solid #0a0a0a;background:none;border-radius:999px;padding:4px 10px;font:600 11px 'Switzer',system-ui,sans-serif;cursor:pointer;color:#0a0a0a;z-index:3}

// Gravity Tags · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.grl')||root;var els=[].slice.call(root.querySelectorAll('.grl__b'));var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
var W,H,B=[],G=2200,E=.25,drag=null,vis=true,last=0;
function reset(){W=root.clientWidth;H=root.clientHeight;B=els.map(function(el,i){var w=el.offsetWidth,h=el.offsetHeight;return{el:el,w:w,h:h,x:((i*.618+.1)%1)*(W-w),y:-h-i*40,vx:0,vy:0};});}
function step(dt){B.forEach(function(b){if(b===drag)return;b.vy+=G*dt;b.x+=b.vx*dt;b.y+=b.vy*dt;});
for(var it=0;it<4;it++){for(var i=0;i<B.length;i++)for(var j=i+1;j<B.length;j++){var a=B[i],b=B[j];var ox=Math.min(a.x+a.w,b.x+b.w)-Math.max(a.x,b.x),oy=Math.min(a.y+a.h,b.y+b.h)-Math.max(a.y,b.y);if(ox<=0||oy<=0)continue;
var ma=a===drag?0:1,mb=b===drag?0:1,s=ma+mb;if(!s)continue;if(ox<oy){var dx=(a.x<b.x?-1:1)*ox;a.x+=dx*ma/s;b.x-=dx*mb/s;var vx=(a.vx+b.vx)/2;if(ma)a.vx=vx;if(mb)b.vx=vx;}
else{var top=a.y<b.y?a:b,bot=top===a?b:a,mt=top===a?ma:mb,mbt=top===a?mb:ma,st=mt+mbt;top.y-=oy*mt/st;bot.y+=oy*mbt/st;if(mt&&top.vy>bot.vy){top.vy=bot.vy*(1-E)-(top.vy-bot.vy)*E*.3;top.vx*=.9;}}}
B.forEach(function(b){if(b===drag)return;if(b.y+b.h>H){b.y=H-b.h;b.vy=b.vy>120?-b.vy*E:0;b.vx*=.88;}if(b.x<0){b.x=0;b.vx=Math.abs(b.vx)*E;}if(b.x+b.w>W){b.x=W-b.w;b.vx=-Math.abs(b.vx)*E;}});}}
function render(){B.forEach(function(b){b.el.style.transform='translate('+b.x.toFixed(1)+'px,'+b.y.toFixed(1)+'px) rotate('+Math.max(-12,Math.min(12,b.vx*.02)).toFixed(1)+'deg)';});}
function pt(e){var r=root.getBoundingClientRect();return{x:e.clientX-r.left,y:e.clientY-r.top};}
B=[];els.forEach(function(el,i){el.addEventListener('pointerdown',function(e){var b=B[i];if(!b)return;var p=pt(e);drag=b;b.ox=p.x-b.x;b.oy=p.y-b.y;b.lt=performance.now();b.vx=b.vy=0;el.classList.add('is-drag');el.setPointerCapture(e.pointerId);});
el.addEventListener('pointermove',function(e){var b=B[i];if(drag!==b)return;var p=pt(e),t=performance.now(),dt=Math.max(1,t-b.lt)/1000;var nx=Math.max(0,Math.min(W-b.w,p.x-b.ox)),ny=Math.min(H-b.h,p.y-b.oy);b.vx=(nx-b.x)/dt*.6;b.vy=(ny-b.y)/dt*.6;b.x=nx;b.y=ny;b.lt=t;if(reduce)render();});
function up(){if(drag===B[i]){drag=null;el.classList.remove('is-drag');}}el.addEventListener('pointerup',up);el.addEventListener('pointercancel',up);});
function start(){reset();if(reduce){for(var k=0;k<400;k++)step(1/60);render();}}
root.querySelector('.grl__re').addEventListener('click',start);
if('IntersectionObserver' in window)new IntersectionObserver(function(es){vis=es[0].isIntersecting;}).observe(root);
addEventListener('resize',function(){var w=root.clientWidth;if(Math.abs(w-W)>40)start();});
requestAnimationFrame(function(){start();if(reduce)return;(function loop(t){var dt=last?Math.min(1/30,(t-last)/1000):1/60;last=t;if(vis&&W){step(dt/2);step(dt/2);render();}requestAnimationFrame(loop);})(performance.now());});
}
init(document.querySelector('.jouw-container'));