What problem does it solve? Adding an animated shader background behind a hero section often breaks Core Web Vitals, violates a hash-based Content Security Policy, and fails WCAG motion requirements. This Skill encodes the renderer choice, shader pattern, lazy-loading path, accessibility controls, and runtime cost caps so the atmosphere survives performance budgets and audits. ## Core Features & Use Cases - Renderer decision with vendored helper: Defaults to a zero-dependency raw WebGL2 helper, with OGL and twgl as documented alternatives and WebGPU ruled out for a single decorative draw call. - Copy-ready fbm domain-warp shader: A GLSL ES 3.0 flow-field shader with declared precision, bounded loops, and token-driven colors, plus the boundary where a CSS gradient is the better choice. - LCP/CLS-safe lazy init and CSP parity: Initializes via requestIdleCallback plus IntersectionObserver, reserves the canvas box, and relies on Astro's hash-emitted script-src with shaders as template literals. - Accessibility and fallback: A mandatory keyboard-operable pause control (WCAG SC 2.2.2), reduced-motion static fallback, context-loss handling, and a software-GL guard that refuses SwiftShader rendering. - Use Case: You want an animated gradient-mesh atmosphere behind your Astro hero. The Skill gives you the vendored helper, the shader, the lazy-init wiring, the pause button, and the scroll-to-uniform driver without adding any dependency. ## Quick Start Use the webgl-atmosfera skill to add a lazy-loaded WebGL2 shader atmosphere behind my Astro hero with a pause control and static fallback.
