shaderslisted

Guides building GPU-accelerated visual effects in React / Next.js with the `shaders` npm package from shaders.com — declarative `<Shader>` component trees, composition (stacking, nesting, blend modes, masking), reactive props, dynamic prop drivers (`auto-animate`, `mouse-position`, `map`), shape (SDF) effects, color space, performance budget (RTT / generator vs filter), and SSR safety. Use when the user asks to add a "shader background", "WebGPU effect", "aurora / plasma / swirl / glass / cursor-trail" hero, mentions shaders.com, the `shaders/react` package, the `<Shader>` component, or wants animated GPU-rendered visuals in a React or Next.js app. Not for raw GLSL / WebGL / Three.js / react-three-fiber work — those use different APIs.
Firzus/agent-skills · ★ 1 · Web & Frontend · score 72

Install: claude install-skill Firzus/agent-skills

# 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 — 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). 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 wra