Gallery Webgl Mesh Transition Minimal — Motion Lab

1. Mechanisme — kopieer 1-op-1, geen styling-keuzes

// Mechanisme: gallery-webgl-mesh-transition-minimal
// OGL displacement shader, subtiele monochroom crossfade tussen 3 canvas-textures.
import { Renderer, Program, Mesh, Triangle, Texture } from 'https://esm.sh/ogl@1.0.10';
// auto-cycle elke 5000ms, 1.6s sine.inOut, lage displacement-intensiteit.

2. Skeleton — DOM + class-namen, mag herschikken

<!-- Skeleton: gallery-webgl-mesh-transition-minimal -->
<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-minimal */
.mesh-gallery{position:relative;width:100%;aspect-ratio:16/9;background:#F4F1EB;overflow:hidden}
.mesh-gallery canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mesh-gallery .dots button[aria-current="true"]{background:#0A0A0A}