Full-Viewport WebGL Shader Hero

What this builds

A full-screen hero section backed by a single <canvas> running a WebGL2 fragment shader. The shader receives time, scroll position, pointer coordinates, and resolution as uniforms, producing a procedural animated background (noise field, raymarched geometry, or domain-warped gradient). No textures, no models, no 3D library. The entire visual lives in one fragment shader.

• Raw WebGL2 context: no Three.js, no OGL, no dependencies
• Full-viewport canvas with DPR-capped rendering (max 2x)
• Uniforms: uTime, uResolution, uScroll, uPointer, uDpr
• Context loss recovery (WebGL contexts get killed by the OS under memory pressure)
• rAF loop with visibility-based pause (Page Visibility API)
• Three shader recipes included: fbm noise, raymarched sphere, domain-warped gradient