1. Mechanisme — kopieer 1-op-1, geen styling-keuzes
// Mechanisme: gallery-webgl-mesh-transition-gallery
// OGL displacement shader transitie tussen 3 canvas-textures.
import { Renderer, Program, Mesh, Triangle, Texture } from 'https://esm.sh/ogl@1.0.10';
const root = document.querySelector('[data-mesh-gallery]');
const canvas = root.querySelector('canvas');
const renderer = new Renderer({ canvas, dpr: Math.min(devicePixelRatio, 2), alpha: true });
// fragment: smooth displacement crossfade tussen tex0 en tex1 met progress 0..1.
// auto-cycle elke 3500ms, 1.2s power3.out fade. 2. Skeleton — DOM + class-namen, mag herschikken
<!-- Skeleton: gallery-webgl-mesh-transition-gallery -->
<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-gallery */
.mesh-gallery{position:relative;width:100%;aspect-ratio:16/9;background:#0A0A0A;overflow:hidden;border-radius:12px}
.mesh-gallery canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mesh-gallery .dots{position:absolute;left:0;right:0;bottom:1.25rem;display:flex;gap:.5rem;justify-content:center;z-index:2}
.mesh-gallery .dots button{width:24px;height:3px;border:0;background:rgba(244,241,235,.35);cursor:pointer;transition:background .3s}
.mesh-gallery .dots button[aria-current="true"]{background:#F4F1EB}