shaderslisted

# Shaders (shaders.com) for React / Next.js Build GPU-accelerated visual effects with the [`shaders` npm package](https://shaders.com/docs/guide) using the same component-tree mental model as JSX. No GLSL, no render loop, no manual GPU plumbing — just 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](https://shaders.com/docs/components). ## When to use this skill - The user asks for a "shader background", "WebGPU hero", "aurora / plasma / swirl / cursor-trail / glass" effect, or any animated GPU-rendered visual in a React or Next.js app. - The user mentions **shaders.com**, the **`shaders`** package, the **`<Shader>`** component, or `shaders/react`. - The user wants to combine multiple effects (blend modes, masks, nested filters) inside a React tree. ## When NOT to use this skill - The user wants raw **GLSL / WebGL2 / WebGPU** code, or a custom fragment shader → that is a different domain entirely. - The user wants **Three.js**, **react-three-fiber**, or any 3D scene with cameras, meshes, lights → wrong tool. - The user wants a **post-processing pass over their own React tree** (DOM blur, CSS backdrop-filter) → CSS / `filter` properties first. - The project is a non-browser environment (pu