Hero Video Shader Kinetic — Motion Lab

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

// Mechanisme: hero-video-shader-kinetic
// WebGL2 fragment shader — black bg met acid yellow / coral cycling sin-wave
// reduced-motion: single-render at u_t=0
// title-words stagger via gsap power4.out 0.7s, last word = acid accent

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

<!-- Skeleton: hero-video-shader-kinetic -->
<section class="hero hero-kinetic">
  <canvas class="shader-canvas"></canvas>
  <header class="hero-bar">
    <span>BLURR / MOTION</span>
    <span>LIVE</span>
  </header>
  <div class="hero-content">
    <p class="hero-tag">[ Now playing — 04 / 26 ]</p>
    <h1 class="hero-title">
      <span class="kw">Loud</span>
      <span class="kw">on</span>
      <span class="kw kw-accent">purpose.</span>
    </h1>
    <a class="hero-cta" href="#">Watch the reel →</a>
  </div>
</section>

3. Styling-template — verplicht eigen invulling per merk

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

Loud on purpose.