Shaders (shaders.com) for React / Next.js

Build GPU-accelerated visual effects with the shaders npm package using the same component-tree mental model as JSX. No GLSL, no render loop, no manual GPU plumbing — stack <Shader> children, pass props, and treat the canvas like any other CSS-sized block.

This skill teaches the mental model, composition patterns, gotchas, and aesthetic discipline for the library. It does not mirror the component reference — for the full prop list of each component, defer to shaders.com/docs/components.

Out of scope: custom GLSL/WebGPU code, Three.js / react-three-fiber scenes, and DOM post-processing (use CSS filter / backdrop-filter first). Shaders needs a real GPU and a real <canvas> — it cannot run in pure SSR, Node, or Workers.

Mental model

1. One <Shader> = one <canvas> element. No matter how many children you nest, the output is always a single DOM canvas you size with normal CSS.
2. Children are visual layers, evaluated top-to-bottom, blended on the GPU. Same intuition as stacking divs with z-index.
3. Two component families:
   • Generators create pixels from scratch (SolidColor, LinearGradient, RadialGradient, Plasma, Aurora, Swirl, Circle, noise patterns…). Very cheap.
   • Filter / effect components read pixels from below (Blur, Glow, Glass, GlassTiles, Dither, CursorTrail, etc.). When wrapped around children, they apply only to those children (a "nesting boundary").
4. Sibling order = paint order. Nesting = scope of effect.