Hero Video Shader Editorial — Motion Lab

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

// Mechanisme: hero-video-shader-editorial
// WebGL2 fragment shader — monochroom cream/ink wave, single-render bij reduced-motion
const cv = document.querySelector('.shader-canvas');
const gl = cv.getContext('webgl2');
// fs: sin/cos noise → smoothstep mix(cream, ink) — subtle wave
// rAF render-loop, gsap entry expo.out 1.4s op title-lines (split via mask)

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

<!-- Skeleton: hero-video-shader-editorial -->
<section class="hero hero-editorial">
  <canvas class="shader-canvas" aria-hidden="true"></canvas>
  <div class="hero-grain"></div>
  <div class="hero-content">
    <p class="hero-eyebrow">Volume I — Spring</p>
    <h1 class="hero-title">
      <span class="t-line">A quiet</span>
      <span class="t-line"><em>study</em> in motion,</span>
      <span class="t-line">unhurried.</span>
    </h1>
    <p class="hero-lede">An editorial on stillness, rhythm and the spaces between frames.</p>
  </div>
</section>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: hero-video-shader-editorial */
:root{ --ed-cream:#F4F1EB; --ed-ink:#0A0A0A; --ed-rule:rgba(10,10,10,.18); }
.hero-editorial{position:relative;min-height:90vh;background:var(--ed-cream);color:var(--ed-ink);overflow:hidden}
.hero-editorial .hero-title{font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:clamp(3.2rem,9vw,8rem);line-height:.96;letter-spacing:-.025em}
.hero-editorial .hero-title em{font-style:italic;font-weight:400}
.hero-editorial .t-line{display:block;overflow:hidden}

A quiet study in motion, unhurried.