Hero Webgl Displacement Kinetic — Motion Lab

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

// Mechanisme: hero-webgl-displacement-kinetic
// OGL Triangle full-screen pass, abstract acid/coral texture (canvas-painted)
// mouse → uMouse + uStrength scales met afstand-tot-center (0.25 → 0.9)
// chromatic split + sin/cos UV displace, snappy power4.out 0.7s entry
import { Renderer, Program, Mesh, Triangle, Texture } from 'https://esm.sh/[email protected]';

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

<!-- Skeleton: hero-webgl-displacement-kinetic -->
<section class="hero hero-disp-k">
  <canvas class="dz-canvas"></canvas>
  <div class="dz-fallback"></div>
  <header class="hero-bar"><span>distortion engine</span><span>cursor → strength</span></header>
  <div class="hero-content">
    <p class="hero-tag">[ Move cursor anywhere ]</p>
    <h1 class="hero-title">
      <span class="kw">Drop</span>
      <span class="kw kw-accent">the</span>
      <span class="kw">filter.</span>
    </h1>
    <div class="hero-row"><span class="meter"><span class="meter-fill"></span></span><span class="meter-label">strength · 0.20</span></div>
  </div>
</section>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: hero-webgl-displacement-kinetic */
:root{ --kk-black:#0A0A0A; --kk-acid:#FFE600; --kk-coral:#FF4D2E; }
.hero-disp-k{background:var(--kk-black);color:#fff}
.hero-disp-k .hero-title{font-family:'Archivo Black',sans-serif;font-weight:900;font-size:clamp(4rem,15vw,15rem);text-transform:uppercase;line-height:.85;letter-spacing:-.04em}
.hero-disp-k .kw-accent{color:var(--kk-acid)}

Drop the filter.