shaders - 以组件形式在 React、Vue、Svelte、Solid 中使用的 WebGPU 特效库

shaders 是一个把 WebGPU 特效封装成前端组件的开源库，由 shader-effects-inc 维护。它要解决的问题是：在网页上做渐变、噪点、玻璃、金属、光效、扭曲、转场、模糊、光标拖尾这类视觉效果，通常需要直接写着色器代码，门槛高、与框架集成麻烦。shaders 的做法是把每一种特效做成一个组件，开发者像使用普通 UI 组件一样把它们叠起来、混合、遮罩，由库在 GPU 上完成渲染。据项目说明，它提供 React、Vue、Svelte、Solid 和原生 JavaScript 五种入口，同一套 props 在各框架间保持一致。适合需要在营销页、产品官网、作品集等场景中加入高质量视觉特效的前端开发者，也适合希望用可视化方式设计特效、再导出代码的设计工程师。

维护者与状态

仓库由 GitHub 组织 shader-effects-inc 维护，许可证为 MIT。仓库创建于 2026-09-29，最后一次提交在 2026-10-21，同日发布了最新版本 v4.0.5。截至 2026-10-28，仓库星标数为 5636。项目另有官网 shaders.com，设计编辑器与平台功能托管在该站点上。

主要能力

以下内容据项目 README 自述整理，属于维护者对自身能力的描述：

• 声明式组件 API：README 称提供 200 多个特效组件，覆盖渐变、噪点、玻璃、金属、光效、扭曲、转场、模糊与光标特效，可以嵌套、混合与遮罩。渲染容器组件负责绘制画布，其子节点作为图层自上而下求值并在 GPU 上混合。
• 多框架统一入口：React、Vue、Svelte、Solid 与 JavaScript 各有独立入口，README 示例中分别从 shaders/react、shaders/vue、shaders/svelte、shaders/solid 导入组件，原生 JavaScript 则使用 shaders/js 提供的 createShader 函数。
• 可视化设计编辑器：在 shaders.com 的无限画布上堆叠组件、调节属性、用光标或时间线驱动属性，并实时预览；完成后通过 Export Code 导出对应框架的组件树。README 称设计与导出对注册账户免费，作品以项目形式保存。
• CLI 工作流：命令行工具可把代码库与 Shaders 账户关联，把设计好的特效以真实组件文件写入项目并保持同步，同时用 lock 文件记录已安装内容；它会自动识别框架并写入组件目录，无需全局安装。
• 面向 AI 编码代理的工具：README 称提供 agent skill 与 MCP server 两种方式，让编码代理了解组件库、图层组合方式与 CLI 流程，并能查找、安装和编辑设计好的特效；此外站点提供 llms.txt 与 llms-full.txt 索引文档与完整组件参考。
• 自定义组件：需要全新特效时可以自行编写。README 说明一个组件就是传给 defineShader 的普通对象，包含名称、属性定义以及逐像素绘制逻辑；像素部分既可以由 std 原语组合（README 标注为实验性），也可以直接写 WGSL（标注为稳定）。

README 还提到 TypeScript 支持、带类型且可响应式更新的 props、SSR 安全，以及引擎位于 packages/core、各框架包由它生成等仓库结构信息。

使用入口

源码与问题反馈入口在 GitHub 仓库：shader-effects-inc/shaders。设计编辑器与平台功能在官网：shaders.com。

据 README，安装方式为：

npm install shaders

随后按所用框架从对应子路径导入组件。以 React 为例：

import { Shader, LinearGradient, CursorTrail } from 'shaders/react'

不使用框架时，可通过 createShader 挂载到 DOM 元素，并以组件数组描述图层与属性。CLI 通过 npx shaders 启动引导流程，另有 connect、install、search、preview、update 等子命令。若要让编码代理接入，README 给出 npx shaders skill 与 npx shaders@latest install-mcp 两条命令。参与贡献时，仓库使用 pnpm，提供 pnpm install、pnpm lib:build 与 pnpm test。

许可与限制

仓库许可证为 MIT。README 进一步说明：本仓库与 shaders npm 包中的引擎、全部组件及框架绑定均以 MIT 授权；而 shaders.com 上的设计编辑器、预设、区块及其他平台功能独立于该包，适用各自的条款。因此使用官网平台功能前，应另行阅读其条款，不能仅凭仓库的 MIT 许可推断平台侧的全部权利。

关于边界与前置条件，README 提到以下几点：自定义组件的像素逻辑若采用 std 原语组合方式，目前标注为实验性，直接编写 WGSL 才是稳定路径；CLI 与设计编辑器需要与 Shaders 账户关联，导出与设计需注册账户；README 中列出的 1000 多个预设、55 个以上网站区块、无水印高清视频与图片渲染、Framer 插件一键安装、无限版本历史等属于 Shaders Pro 付费内容，不在免费范围内。此外，项目以 WebGPU 为基础，实际可用性取决于运行环境对 WebGPU 的支持情况，README 未列出具体浏览器或硬件清单，部署前应自行确认目标环境。