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

Motion Lab / Heroes / shader fullscreen / quiet

Movement begins with intention
and ends with clarity.

— quiet shader
1. Mechanisme — kopieer 1-op-1, geen styling-keuzes 
// Mechanisme: hero-shader-fullscreen-quiet
// WebGL2 fullscreen quad + subtle organic noise (sub-10% contrast)
const canvas = document.querySelector('#shader-canvas-quiet');
const gl = canvas.getContext('webgl2', { antialias: false, alpha: false });
// ... compile vs/fs, draw fullscreen triangle, animate uTime + uMouse
// fragment: smooth fbm noise mapped to F4F1EB ± 0.04 luminance
2. Skeleton — DOM + class-namen, mag herschikken 
<!-- Skeleton: hero-shader-fullscreen-quiet -->
<section class="shader-hero-wrap">
  <canvas id="shader-canvas-quiet"></canvas>
  <div class="shader-hero-content">
    <p class="eyebrow">Shader / Quiet</p>
    <h1>Movement begins with intention.</h1>
  </div>
</section>
3. Styling-template — verplicht eigen invulling per merk 
/* Styling: hero-shader-fullscreen-quiet */
.shader-hero-wrap{position:relative;width:100vw;height:100vh;overflow:hidden;background:#F4F1EB}
.shader-hero-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.shader-hero-content{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(2rem,5vw,5rem);pointer-events:none;z-index:2}