Shaders 开源 200+ WebGPU 组件，AI 写网页特效不用再从零写 WGSL 这个标题可以，信息量够，也有传播点。下面给你一版更适合直接发布的正文，风格偏技术媒体/公众号，保留核心信息，同时把“为什么值得关注”讲清楚。 --- **Shaders 开源 200+ WebGPU 组件，AI 写网页特效不用再从零写 WGSL** WebGPU 正在成为下一代 Web 图形与计算的关键接口，但真正落地到网页特效时，开发者依然面临一个现实问题：**底层能力有了，上层组件生态却远远不够。** 尤其是 WGSL。它强大、直接、性能好，但对大多数前端和 AI 生成代码场景来说，门槛仍然偏高。很多时候，你只是想让页面有一个流体背景、粒子光效、噪声渐变、后处理辉光，却不得不从零写 shader、调 uniform、处理管线状态、兼容不同浏览器和 GPU。 最近开源的 **Shaders** 项目，试图解决的就是这个问题。 它提供了 **200+ WebGPU 组件**，把常见网页视觉特效封装成可复用模块，让开发者，尤其是 AI 编程工具，不必每次从零生成 WGSL，而是直接组

动察 Beating AI News Flash: The web effects tool Shaders has announced it is going open source. It is mainly used to create GPU dynamic effects such as gradients, fluids, glass, metal, and distortion, allowing developers to add complex visual effects to websites without writing graphics code from the ground up.

This time, Shaders has released more than 200 WebGPU effect components, the core rendering engine, and adaptation code for multiple front-end frameworks under the MIT license. Developers can use it for free in personal and commercial projects. They can also first fine-tune effects in its web editor, then freely export code that can be used directly in React, Vue, Svelte, and other projects.

This set of tools is also very practical for AI Coding. Agents such as Claude Code, Cursor, and Codex can directly search for and invoke these components through MCP. Previously, when Agents wanted to create complex web effects, they often needed to temporarily generate low-level WGSL code, and both the results and performance were unstable. Now they can directly modify existing components, eliminating a large amount of work involved in writing code from scratch and tuning performance.

However, Shaders has not open-sourced the entire product. The visual editor is still operated by the official team, and some advanced presets, complete web page blocks, and capabilities such as image and video rendering remain in the paid Pro version.