ruucm/shadergradient

这是什么？

核心功能

• 01支持 plane、sphere、waterPlane 三种网格类型渲染动态 3D 渐变。
• 02可通过 props 配置颜色、动画速度、扭曲强度和频率。
• 03可直接加载官网定制器复制出的 URL 配置。
• 04通过 @shadergradient/vue 支持 Vue 3 和 Nuxt，并提供 SSR 安全的画布。
• 05提供 Figma 插件和 Framer 组件，便于在设计工具中使用。

适用场景

• 为 React 或 Next.js 落地页添加动态渐变首屏背景。
• 在 Vue 或 Nuxt 应用中复用官网设计好的渐变效果。
• 在 Figma 或 Framer 设计稿中制作渐变视觉素材。

快速上手

1. 1

   安装 React 渲染器及其对等依赖

   npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
2. 2

   安装 Three.js 类型定义

   npm i -D @types/three
3. 3

   在应用中把 ShaderGradient 放入 ShaderGradientCanvas 进行渲染，参见 README 中的用法示例

使用前须知

• !项目未声明许可证，复用权限不明确。
• !Next.js 15 App Router 需要 React 19 和 @react-three/fiber v9，v8 不兼容。

标签

常见问题

shadergradient 是什么？

基于 Three.js 的可定制 3D 动态渐变组件，支持 React，并提供 Vue、Framer 和 Figma 版本。 Shader Gradient 是一组用于渲染动态 3D 渐变背景的组件。核心包 @shadergradient/react 提供 ShaderGradient 渲染组件和 ShaderGradientCanvas 容器，底层基于 React Three Fiber 与 Three.js。渐变效果可通过 props 调节，包括网格类型（plane、sphere、waterPlane）、颜色、动画速度、强度、频率、光照和相机参数。

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

shadergradient 没有声明许可证。代码虽然公开，但没有许可证就没有明确的使用授权，正式使用前建议先联系作者。

shadergradient 还在维护吗？

半年内有更新。shadergradient 最近一次提交是在 2026年9月23日。

shadergradient 适合用来做什么？

为 React 或 Next.js 落地页添加动态渐变首屏背景。 在 Vue 或 Nuxt 应用中复用官网设计好的渐变效果。 在 Figma 或 Framer 设计稿中制作渐变视觉素材。

shadergradient 怎么安装和运行？

安装 React 渲染器及其对等依赖: npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls 安装 Three.js 类型定义: npm i -D @types/three 在应用中把 ShaderGradient 放入 ShaderGradientCanvas 进行渲染，参见 README 中的用法示例

在哪里获取 shadergradient？

源代码和安装说明在 GitHub 上：https://github.com/ruucm/shadergradient