1. Mechanisme — kopieer 1-op-1, geen styling-keuzes
// Mechanisme: gallery-webgl-mesh-transition-kinetic
// OGL displacement shader, snappy hi-contrast crossfade tussen 3 canvas-textures.
import { Renderer, Program, Mesh, Triangle, Texture } from 'https://esm.sh/ogl@1.0.10';
// auto-cycle elke 2500ms, 0.7s power4.out, hoge displacement-intensiteit. 2. Skeleton — DOM + class-namen, mag herschikken
<!-- Skeleton: gallery-webgl-mesh-transition-kinetic -->
<div class="mesh-gallery" data-mesh-gallery>
<canvas></canvas>
<div class="fallback" data-fallback>
<div class="slide" data-i="0"></div>
<div class="slide" data-i="1"></div>
<div class="slide" data-i="2"></div>
</div>
<div class="dots"><button data-dot="0"></button><button data-dot="1"></button><button data-dot="2"></button></div>
</div> 3. Styling-template — verplicht eigen invulling per merk
/* Styling: gallery-webgl-mesh-transition-kinetic */
.mesh-gallery{position:relative;width:100%;aspect-ratio:16/9;background:#0A0A0A;overflow:hidden;border-radius:4px}
.mesh-gallery canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mesh-gallery .dots button[aria-current="true"]{background:#FF4D2E}