Drijvend raster

<!-- Drijvend raster · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-sqr"><canvas class="ei-sqr__cv"></canvas><div class="ei-sqr__t"><span>Ingenieursbureau Raster</span><h3>Constructies op maat</h3></div></div>
</div>

/* Drijvend raster · NedDev · eigen werk. */
.ei-sqr{position:absolute;inset:0;overflow:hidden;background:#0a0a0a}
.ei-sqr__cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.ei-sqr__t{position:absolute;left:22px;bottom:20px;color:#fff;pointer-events:none}
.ei-sqr__t span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#F5480F}
.ei-sqr__t h3{margin:6px 0 0;font-family:'Switzer',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em}

// Drijvend raster · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-sqr'),cv=w.querySelector('.ei-sqr__cv'),ctx=cv.getContext('2d');var S=32,dpr=Math.min(2,window.devicePixelRatio||1),W=0,H=0,mx=-1,my=-1,heat={};
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
function size(){W=w.clientWidth;H=w.clientHeight;cv.width=W*dpr;cv.height=H*dpr;}size();if(window.ResizeObserver)new ResizeObserver(size).observe(w);
w.addEventListener('pointermove',function(e){var r=w.getBoundingClientRect();mx=e.clientX-r.left;my=e.clientY-r.top;});w.addEventListener('pointerleave',function(){mx=my=-1;});
var visible=true;if(window.IntersectionObserver)new IntersectionObserver(function(es){visible=es[0].isIntersecting;}).observe(w);
var off=0;
function frame(){if(!w.isConnected)return;if(visible){
  if(!reduce)off+=.25;var ox=off%S;
  ctx.setTransform(dpr,0,0,dpr,0,0);ctx.clearRect(0,0,W,H);
  if(mx>=0){var gx=Math.floor((mx-off)/S),gy=Math.floor((my-off)/S);heat[gx+','+gy]=1;}
  else if(!reduce&&Math.random()<.035){heat[Math.floor((Math.random()*W-off)/S)+','+Math.floor((Math.random()*H*.6-off)/S)]=.8;}
  for(var k in heat){heat[k]-=.02;if(heat[k]<=0){delete heat[k];continue;}var p=k.split(',');ctx.fillStyle='rgba(245,72,15,'+(heat[k]*.85).toFixed(3)+')';ctx.fillRect(+p[0]*S+off+1,+p[1]*S+off+1,S-2,S-2);}
  ctx.strokeStyle='rgba(255,255,255,.09)';ctx.lineWidth=1;ctx.beginPath();
  for(var x=ox-S;x<W+S;x+=S){ctx.moveTo(Math.round(x)+.5,0);ctx.lineTo(Math.round(x)+.5,H);}
  for(var y=ox-S;y<H+S;y+=S){ctx.moveTo(0,Math.round(y)+.5);ctx.lineTo(W,Math.round(y)+.5);}
  ctx.stroke();
}requestAnimationFrame(frame);}
requestAnimationFrame(frame);
}
init(document.querySelector('.jouw-container'));