尤雨溪宣布Shaders开源：200+ WebGPU组件免费，支持全框架

Evan You（尤雨溪）最近宣布，WebGPU效果组件库 Shaders 正式开源。

Shaders 把 WebGPU 能力封装成语义化组件。WebGPU 是浏览器访问 GPU 的新标准，网页可以直接调用显卡渲染。200多个效果，渐变、噪点、玻璃、金属、光效、扭曲、转场、模糊、光标特效，全部以组件形式提供，可以用在独立站、模板、产品、库等任何场景。支持 React、Vue、Svelte、Solid 和 JavaScript，props 完全一致。嵌套、混合、蒙版，都在 GPU 上完成。

官方视频，雪地场景：

安装：

npm install shaders

一个 React 示例：

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

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

配套的可视化设计器在 shaders.com。无限画布上堆叠组件、调整 props，光标和时间线都能驱动参数。设计完成导出，得到的是组件树，选好框架直接粘贴。设计器免费，需要注册账号。

如果不想在浏览器里拖拽，还有 CLI：

npx shaders connect
npx shaders install
npx shaders update

设计器里的效果会同步成项目里的组件文件，自动识别框架。

AI 工作流也覆盖了。官方 MCP server 支持 Claude Code、Cursor、Codex、Windsurf、Copilot，agent 能自己查找、安装、编辑设计好的效果。llms.txt 把完整组件参考（props、默认值、取值范围）喂给大模型，方便 agent 查阅。

许可证分两层。仓库代码，包括引擎、组件和框架绑定，MIT。设计编辑器、预设、网站区块这些平台功能是独立条款。核心能力开放，进阶工作流走订阅，Pro 提供 1000+ 预设、55+ 网站区块、无水印视频渲染、Framer 插件、无限版本历史。

想写自己的效果，用 defineShader 定义一个纯对象：名字、props、像素绘制逻辑。可以用标准库的图元组合，也可以直接写 WGSL。

import { defineShader, wgsl, transformColor, transformPosition } from 'shaders/std'

export const Halo = defineShader({
  name: 'Halo',
  props: {
    color: { default: '#ffd166', transform: transformColor },
    center: { default: { x: 0.5, y: 0.5 }, transform: transformPosition },
    radius: { default: 0.6 },
  },
  paint: wgsl`
    let d = length((uv - center) * vec2f(aspect, 1.0)) / radius;
    return vec4f(color.rgb, 1.0 - smoothstep(0.8, 1.0, d));
  `,
})

项目已有一万六千多名设计工程师在生产环境使用，TypeScript 编写，SSR 安全（服务端渲染）。200+ 组件完整列表见 https://shaders.com/docs/components

仓库：https://github.com/shader-effects-inc/shaders

关注公众号回复“进群”入群讨论