← Blurr Motion hero-webgl-displacement-gallery
Categorie heroes Tier 3 Techniek #26 Deps ogl, gsap
Maison du Verre — Atelier 14

Issue 14 · Spring 2026

Maison
du Verre

A warm-toned visual essay on craft, light and the patient hands behind a glass studio in southern France.

Move cursor — distortion responds
1. Mechanisme — kopieer 1-op-1, geen styling-keuzes 
// Mechanisme: hero-webgl-displacement-gallery
// OGL Triangle + custom shader op canvas-painted warme foto-collage texture
// mouse-tracked uMouse + auto-pulse via sin(time*0.6) op uStrength
// reduced-motion: static texture, geen displacement
import { Renderer, Program, Mesh, Triangle, Texture } from 'https://esm.sh/[email protected]';
2. Skeleton — DOM + class-namen, mag herschikken 
<!-- Skeleton: hero-webgl-displacement-gallery -->
<section class="hero hero-gallery">
  <canvas class="dz-canvas"></canvas>
  <div class="dz-fallback"></div>
  <div class="hero-frame">
    <p class="hero-issue">Issue 14 — Atelier</p>
    <h1 class="hero-title"><em>Maison</em><br/>du Verre</h1>
    <p class="hero-lede">A warm-toned visual essay on craft, light and patient hands.</p>
    <div class="hero-thumbs"><span class="thumb"></span><span class="thumb"></span><span class="thumb"></span></div>
  </div>
</section>
3. Styling-template — verplicht eigen invulling per merk 
/* Styling: hero-webgl-displacement-gallery */
:root{ --ga-paper:#EFE6D8; --ga-terracotta:#C8623A; --ga-ochre:#D9A14A; --ga-plum:#3A1F1F; }
.hero-gallery{background:var(--ga-paper);color:var(--ga-plum)}
.hero-gallery .hero-title{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(3rem,8vw,7rem);line-height:.92}
.hero-gallery .hero-title em{font-style:italic;color:var(--ga-terracotta)}