← Blurr Motion footer-noise-bg-editorial
Categorie footers Tier 2 Techniek #35 Deps
1. Mechanisme — kopieer 1-op-1, geen styling-keuzes
// Mechanisme: footer-noise-bg-editorial
import gsap from 'https://esm.sh/gsap@3.12.5';
// Pas toe op je eigen selector — geen stijlkeuzes hier.
if(window.matchMedia('(prefers-reduced-motion: reduce)').matches)return;
const cv=document.querySelector('.noise-canvas');if(!cv)return;const ctx=cv.getContext('2d');cv.width=cv.offsetWidth;cv.height=cv.offsetHeight;const d=ctx.createImageData(cv.width,cv.height);(function tick(){requestAnimationFrame(tick);for(let i=0;i<d.data.length;i+=4){const v=Math.random()*28|0;d.data[i]=d.data[i+1]=d.data[i+2]=v;d.data[i+3]=30;}ctx.putImageData(d,0,0);})();
2. Skeleton — DOM + class-namen, mag herschikken
<!-- Skeleton: footer-noise-bg-editorial -->
<div class="demo-block">
  <!-- DOM-structuur hier -->
</div>
3. Styling-template — verplicht eigen invulling per merk
/* Styling: footer-noise-bg-editorial */
:root {
  --block-bg: ;
  --block-fg: ;
  --block-accent: ;
}