面向 React、Vue、Svelte、Solid 和原生 JavaScript 的 WebGPU 着色器特效组件库。 Shaders 是一个将 WebGPU 视觉特效封装为组件的库，涵盖渐变、噪点、玻璃质感、扭曲、转场、模糊和光标特效等。` ` 负责渲染画布，其子组件作为图层从上到下依次叠加，并在 GPU 上完成混合。React、Vue、Svelte、Solid 和原生 JavaScript 使用相同的 props。

shaders 可以免费使用吗？用的什么许可证？

shaders 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

shaders 还在维护吗？

活跃维护中。shaders 最近一次提交是在 2026年10月9日。

shaders 适合用来做什么？

为营销网站或落地页添加动态渐变或玻璃质感背景在浏览器编辑器中设计视觉特效，并导出到 React 或 Vue 应用让 AI 编程助手在现有项目中查找并安装着色器特效在 Svelte 或 Solid 前端中实现交互式光标或悬停特效

shaders 怎么安装和运行？

安装软件包: npm install shaders 在你的框架中（例如 React）导入 Shader 和组件并渲染

在哪里获取 shaders？

源代码和安装说明在 GitHub 上：https://github.com/shader-effects-inc/shaders

shader-effects-inc/shaders

面向 React、Vue、Svelte、Solid 和原生 JavaScript 的 WebGPU 着色器特效组件库。

在 GitHub 查看官网

Star: 5,108
Fork: 228
未关闭 Issue: 5
最近提交: 11天前

这是什么？

Shaders 是一个将 WebGPU 视觉特效封装为组件的库，涵盖渐变、噪点、玻璃质感、扭曲、转场、模糊和光标特效等。`<Shader>` 负责渲染画布，其子组件作为图层从上到下依次叠加，并在 GPU 上完成混合。React、Vue、Svelte、Solid 和原生 JavaScript 使用相同的 props。

除代码库外，项目还提供 shaders.com 上的可视化设计编辑器，可在画布上组合特效、调节参数并导出对应框架的组件代码。命令行工具可将本地代码库与 Shaders 项目关联，把选中的组件以文件形式写入项目，并记录在锁文件中。此外还提供 Agent skill 与 MCP 服务，方便 AI 编程助手检索、安装和修改特效。

引擎与框架绑定代码基于 MIT 协议开源。开发者也可以通过 WGSL 编写逐像素输出逻辑，自定义组件。

核心功能

01提供 200 多种 WebGPU 特效组件，如渐变、噪点、玻璃质感和转场
02React、Vue、Svelte、Solid 和 JavaScript 使用一致的 props 与 API
03可视化设计编辑器，支持导出框架组件代码
04命令行工具将所选组件写入代码库，并通过锁文件管理
05提供 MCP 服务和 Agent skill，供 AI 编程助手使用
06支持用 WGSL 编写逐像素逻辑来自定义组件

适用场景

为营销网站或落地页添加动态渐变或玻璃质感背景
在浏览器编辑器中设计视觉特效，并导出到 React 或 Vue 应用
让 AI 编程助手在现有项目中查找并安装着色器特效
在 Svelte 或 Solid 前端中实现交互式光标或悬停特效

快速上手

1
安装软件包
npm install shaders
2
在你的框架中（例如 React）导入 Shader 和组件并渲染

使用前须知

部分预设、页面区块和编辑器功能需要付费的 Pro 套餐。
设计编辑器和代码导出依赖 shaders.com 账户，与 MIT 许可的软件包是分开的。
效果依赖 WebGPU，因此需要浏览器支持该功能。

常见问题

shaders 是什么？: 面向 React、Vue、Svelte、Solid 和原生 JavaScript 的 WebGPU 着色器特效组件库。 Shaders 是一个将 WebGPU 视觉特效封装为组件的库，涵盖渐变、噪点、玻璃质感、扭曲、转场、模糊和光标特效等。`<Shader>` 负责渲染画布，其子组件作为图层从上到下依次叠加，并在 GPU 上完成混合。React、Vue、Svelte、Solid 和原生 JavaScript 使用相同的 props。
shaders 可以免费使用吗？用的什么许可证？: shaders 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
shaders 还在维护吗？: 活跃维护中。shaders 最近一次提交是在 2026年10月9日。
shaders 适合用来做什么？: 为营销网站或落地页添加动态渐变或玻璃质感背景在浏览器编辑器中设计视觉特效，并导出到 React 或 Vue 应用让 AI 编程助手在现有项目中查找并安装着色器特效在 Svelte 或 Solid 前端中实现交互式光标或悬停特效
shaders 怎么安装和运行？: 安装软件包: npm install shaders 在你的框架中（例如 React）导入 Shader 和组件并渲染
在哪里获取 shaders？: 源代码和安装说明在 GitHub 上：https://github.com/shader-effects-inc/shaders

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。