paper-design/shaders

这是什么？

核心功能

• 01零依赖的 Canvas 着色器组件
• 02提供 React 与原生 JavaScript 两种 npm 包
• 03可在 Paper 中可视化设计并导出代码
• 04颜色、扭曲、漩涡、速度、缩放等参数可调
• 05动画可选开启

适用场景

• 为营销网站添加动态渐变背景
• 用着色器纹理遮罩图形或文字
• 在 Paper 中设计视觉风格并以代码形式交付

快速上手

1. 1

   安装 React 版本

   npm i @paper-design/shaders-react
2. 2

   或安装原生 JS 版本

   npm i @paper-design/shaders
3. 3

   固定依赖版本，因为破坏性更改会在 0.0.x 版本中发布

4. 4

   导入 MeshGradient 等着色器组件，并使用 colors 和 style 属性

使用前须知

• !项目处于 0.0.x 版本阶段，版本之间可能出现破坏性更改，应固定版本号。
• !目前仅支持 React 和原生 JS，尚不支持 Vue。

标签

常见问题

shaders 是什么？

零依赖的画布着色器库，可用于网页背景与纹理，支持 npm 安装（React 或原生 JS），也可在 Paper 中可视化设计。 Paper Shaders 是一组基于 Canvas 的着色器组件，可用于为网站添加动态或静态纹理，例如渐变背景，也可以用着色器效果遮罩图形和文字。项目以两个 npm 包发布：原生 JavaScript 用的 @paper-design/shaders，以及 React 用的 @paper-design/shaders-react，且没有运行时依赖。

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

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

shaders 还在维护吗？

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

shaders 适合用来做什么？

为营销网站添加动态渐变背景 用着色器纹理遮罩图形或文字 在 Paper 中设计视觉风格并以代码形式交付

shaders 怎么安装和运行？

安装 React 版本: npm i @paper-design/shaders-react 或安装原生 JS 版本: npm i @paper-design/shaders 固定依赖版本，因为破坏性更改会在 0.0.x 版本中发布 导入 MeshGradient 等着色器组件，并使用 colors 和 style 属性

在哪里获取 shaders？

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