Shaders — WebGPU 视觉效果组件库，200+ 效果直接当组件用

Shaders 是一个基于 WebGPU 的开源视觉效果组件库。这个软件工具走 MIT 协议，用 TypeScript 写，提供 200 多种效果：渐变、噪声、玻璃、金属、光、扭曲、过渡、模糊、光标效果。作为一个开源软件，它让你把这些效果当组件嵌套、混合、遮罩着用，支持 React、Vue、Svelte、Solid 和原生 JavaScript。

场景痛点

想给网站加个好看的背景光效，手写 WebGL shader 又复杂又调不出来。找现成的效果要么是 Canvas 粒子库性能差，要么是 CSS 渐变不够炫。做设计工具和开发者工具的人想要的，不是一个要从零写 shader 的引擎，是一个把视觉效果拆成声明式组件、拖进去就能跑的 WebGPU 库。

主要功能特点

200+ 效果当组件用

每个效果都是一个组件。<Shader 渲染画布，子节点是图层，从下到上在 GPU 上混合。渐变、噪声、玻璃、金属、光、扭曲、过渡、模糊、光标效果都有。嵌套它们，混合它们，遮罩它们。

五套框架一套 API

React、Vue、Svelte、Solid、JavaScript 都有一等入口，props 一样。TypeScript 写的，类型化 props 响应式更新，SSR 安全。

设计编辑器导出代码

在shaders的无限画布上堆叠组件、调参数、用光标或时间线驱动 props，实时看效果。满意后导出你框架的组件树代码。这种AI应用级别的可视化，比手写快。

CLI 加 Agent Skill 加 MCP

npx shaders引导设置、找预设、打开编辑器。npx shaders skill 装一个 Agent Skill 教你的 AI 用这个库。npx shaders@latest install-mcp 配置 Claude Code、Cursor、Codex、Copilot 等。这种Skill工具级别的 AI 集成，比手动查文档方便。

自定义组件加 Pro 版

需要全新效果就用 defineShader 加 WGSL 自己写像素。Pro 版有 1000+ 生产级预设、55+ 网站区块、HD 渲染无水印、Framer 插件。这种数字生活级别的生态，比自己积累快。

简易使用教程

装好 Node.js 后 npm install shaders。
在 React 里 import { Shader, LinearGradient, CursorTrail } from ‘shaders/react’。
写 <Shader 标签，里面放效果组件。
Vue、Svelte、Solid 同理，从对应路径 import。
原生 JS 用 createShader 传组件数组。
想可视化设计就打开shaders的设计编辑器。
设计完点 Export Code 复制组件树到项目。
想让 AI 帮你写就 npxshadersskill 装 Agent Skill。
日常用下来加视觉效果都在组件里，想找类似工具推荐里的实用软件可以翻酷软趣站。

官方网站

官网访问

GitHub 访问

下载地址

https://pan.quark.cn/s/d406f41ba370

https://www.guangyapan.com/s/1957274715332710449_aeWhI5wocgzRgCO6 （光鸭新用户注册福利：永久免费空间：所有新用户注册即可解锁 2TB 永久免费存储空间，无需额外任务或付费）

Shaders — WebGPU 视觉效果组件库，200+ 效果直接当组件用

场景痛点