← Blurr Motion hero-shader-fullscreen-brutalist
Categorie heroes Tier 3 Techniek #36 Deps webgl2

Motion Lab / Heroes / shader fullscreen / brutalist

ENERGY.
MOTION.
IMPACT.

1. Mechanisme — kopieer 1-op-1, geen styling-keuzes 
// Mechanisme: hero-shader-fullscreen-brutalist
// WebGL2 fullscreen quad + GLSL fragment shader (hard-stepped 4-level noise)
const canvas = document.querySelector('#shader-canvas-brutalist');
const gl = canvas.getContext('webgl2', { antialias: false, alpha: false });
// compile vs/fs, draw fullscreen triangle, animate uTime + uMouse
// fragment: floor(fbm*4)/4 mapped to {ink, cream*0.7, orange, cream}
2. Skeleton — DOM + class-namen, mag herschikken 
<!-- Skeleton: hero-shader-fullscreen-brutalist -->
<section class="shader-hero-wrap">
  <canvas id="shader-canvas-brutalist"></canvas>
  <div class="shader-hero-content">
    <p class="eyebrow">Shader / Brutalist</p>
    <h1>ENERGY. MOTION. IMPACT.</h1>
  </div>
</section>
3. Styling-template — verplicht eigen invulling per merk 
/* Styling: hero-shader-fullscreen-brutalist */
.shader-hero-wrap{position:relative;width:100vw;height:100vh;overflow:hidden;background:#0A0A0A}
.shader-hero-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.shader-hero-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(2rem,5vw,5rem);pointer-events:none;z-index:2}