shaders：200+ WebGPU 特效做成前端组件

AI 写页面越来越快，但生成的结果经常一眼能看出来：版式齐了，视觉亮点没有。给官网加一道动态渐变或者鼠标跟随的光效，过去要么手写 WGSL，要么接一个绑死单一框架的特效库。shaders（Shader Effects, Inc. 维护，MIT 协议，截至 2026-10-13 约 4.6k star）把 200 多个 WebGPU 特效做成了普通前端组件：<Shader> 画出画布，子组件一层层叠上去，由 GPU 混合。渲染引擎和全部组件在 2026-10-06 宣布 MIT 开源，个人和商业项目都能免费用。

核心功能

• 声明式组件，不写 shader 也能叠效果：<Shader> 渲染 canvas，<LinearGradient>、<CursorTrail> 这类子组件自上而下求值后在 GPU 上混合。官方把 200+ 组件分成几大类：渐变与光效（动态渐变、流光、光照）、玻璃与金属（折射、质感）、交互动效（鼠标跟随、波纹、扭曲）和视觉滤镜（模糊、噪点、转场），同类之间还能嵌套、遮罩和叠加；props 带类型，SSR 安全。
• 五个框架入口，一套 props：React、Vue、Svelte、Solid 和原生 JavaScript 各有一级入口，同一个 shaders npm 包（v4.0.4）覆盖；该包上月下载量约 127 万（npm 下载接口，2026-09-12 至 10-11）。
• 可视化编辑器免费导出代码：shaders.com 的设计编辑器是一块无限画布，堆组件、调参数、用光标或时间轴驱动，调好后点 Export Code 直接导出当前框架的组件树，免费账号即可用。
• Agent Skill 与 MCP：npx shaders skill（或 npx skills add shader-effects-inc/shaders）给编码智能体装上组件库知识；npx shaders@latest install-mcp 一次配好 Claude Code、Cursor、Codex 等客户端，agent 能查找、安装、修改你设计的特效。
• CLI 把设计稿落进代码库：npx shaders connect 把代码库关联到 Shaders 项目，之后 npx shaders install、npx shaders update 把编辑器里的改动写成真实的组件文件，lock 文件记录装了什么。
• 可以自己写组件：defineShader 定义新组件（名字、props、逐像素绘制），WGSL 直写是稳定路径，std 原语组合目前标为 experimental。

典型使用场景

• 产品官网、活动页、作品集要一道不撞衫的动态背景或光效，又不想为此养一个图形程序员。
• 设计侧在设计编辑器里把特效调到位，导出组件代码交给前端落库，少一轮「还原度」扯皮。
• 已经在用 AI 写页面的开发者：装好 Skill 和 MCP，可以直接对 Codex 说「用 Shaders 给 Vue 官网加动态渐变背景、玻璃质感和鼠标交互动效」。
• 长页面想要滚动驱动的特效：编辑器里可以用时间轴驱动 props，导出后就是普通组件状态，不需要自己写滚动监听。

快速上手

npm install shaders

React 里几行就能看到效果：

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

<Shader className="w-full h-64">
  <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
  <CursorTrail />
</Shader>;

跑起来是一道动态渐变背景加一条鼠标跟随光效。全部 200+ 组件在 shaders.com/docs/components 有实时预览和完整 props 文档，llms-full.txt 带了整份组件参考。

小结

适合想给页面加视觉亮点、又不想钻 WebGPU 的前端和设计工程师；只做后台系统的团队可以跳过。和自己写 WGSL 比，它省掉的是把逐像素代码包成组件、再处理响应式更新和 SSR 的那一层；和单框架特效库比，五个入口一套 props 意味着换框架不用重学。MIT 代码免费用，但 Pro 订阅的 1000+ 预设、55+ 个网页区块、无水印视频渲染仍然收费，设计编辑器是平台功能、另有服务条款，商用前读一眼 shaders.com/license。官方 README 自称已有 16000+ 设计工程师在使用（厂商表述，未见第三方核实）。WebGPU 的浏览器兼容性也要自己评估，老浏览器上要么降级要么兜一张静态图。想先把视觉方向定下来再动手，可以看看同站的 frontend-design；如果场景是 3D 建筑或产品展示而非平面特效，threejs-architecture-effects 更对口。