mcpField
S
shadergradient

shadergradient

github.com/masermediagroup-stack设计与 UI135 次安装29 周前更新
代码仓库

关于 shadergradient

shadergradient 是用于在 React 或 Next.js 项目中通过 `@shadergradient/react` 集成动态渐变背景的 Skill。内容涵盖安装、通过 URL 使用预设、组件布局和性能注意事项。

主要功能

  1. 01集成 `@shadergradient/react`
  2. 02提供 React 和 Next.js 配置指导
  3. 03从设置 URL 加载预设
  4. 04调整动画与渐变参数
  5. 05包含性能和动态效果检查

适用场景

  1. 01为页面主视觉添加动态背景
  2. 02应用 ShaderGradient 设置 URL
  3. 03调整渐变以兼顾性能

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/masermediagroup-stack/cursorskills --skill shadergradient

安装后在 Claude Code 中输入/shadergradient确认已加载。

附带文件reference.md

详细介绍

ShaderGradient 集成

使用此技能，通过 @shadergradient/react 添加高质量的动画渐变背景。

适用场景

  • 用户要求在 React 或 Next.js 中集成 ShaderGradient
  • 用户需要动画渐变的主视觉区域／背景区域
  • 用户提到 @shadergradient/react 或 shadergradient.co 设置 URL
  • 用户需要使用 Three.js 调整颜色／动画渐变

安装

安装所需的运行时软件包：

npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
npm i -D @types/three

基本用法

在 ShaderGradientCanvas 中使用 ShaderGradient。

import { ShaderGradient, ShaderGradientCanvas } from "@shadergradient/react";

export function GradientBackground() {
  return (
    <ShaderGradientCanvas style={{ position: "absolute", inset: 0 }} pixelDensity={1.5} fov={45}>
      <ShaderGradient cDistance={3.2} cPolarAngle={125} animate="on" />
    </ShaderGradientCanvas>
  );
}

Next.js 指南

  • 渐变组件优先使用客户端组件封装（"use client"）
  • 将渐变作为视觉背景层挂载，并将内容放在定位好的前景容器中
  • 在负载较重的页面上，将 pixelDensity 保持在较低水平（例如 1 到 1.5）
  • 避免在同一路由上使用多个全屏渐变画布

从 URL 加载预设

如果用户提供设置 URL，直接加载：

<ShaderGradientCanvas>
  <ShaderGradient control="query" urlString="https://www.shadergradient.co/customize?...your-settings..." />
</ShaderGradientCanvas>

性能检查清单

  • 调试布局时先设置 animate="off"，放置正确后再启用动画
  • 降低 uStrength、uFrequency 和 pixelDensity，以适配低端设备
  • 将渐变与开销较大的重新渲染树隔离
  • 启用较强的动画前，检查用户是否启用了减少动态效果偏好设置

常见默认值

  • type：plane
  • lightType：3d
  • animate：on
  • cDistance：3 到 4
  • cPolarAngle：90 到 125
  • pixelDensity：1 到 1.5

其他参考资料

评论

支持 Markdown