mcpField
V
vantajs

vantajs

github.com/mengto设计与 UI7.1k1.5k 次安装3 天前更新
代码仓库

关于 vantajs

vantajs 是用于网页设计的技能，指导在容器中添加 Vanta.js 动态 WebGL 背景，并管理效果更新、尺寸调整与清理。适合需要装饰性背景的静态网站和 React、Vue 项目。

主要功能

  1. 01初始化 Vanta.js 效果
  2. 02更新效果选项
  3. 03调整画布尺寸
  4. 04销毁效果实例
  5. 05提示移动设备与性能注意事项

适用场景

  1. 01为首页 Hero 区域添加动态背景
  2. 02在 React 组件卸载时清理效果
  3. 03为移动设备设计背景回退方案

安装

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

$npx skills add https://github.com/mengto/skills --skill vantajs

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

REFERENCES.md
demo/
index.html
PROMPT.md

详细介绍

Vanta.js — 动画 WebGL 背景技能

适用场景

  • 为主视觉区域添加装饰性动画背景
  • 希望快速实现“惊艳”效果，而无需构建完整的 three.js 场景
  • 轻量集成到静态网站或 React/Vue 中

工作原理

  • Vanta 会在容器元素中注入一个画布并渲染效果（许多效果会用到 three.js）。
  • 典型用法：引入 three.min.js（或提供 THREE）和一个 Vanta 效果包。

主要 API/模式

  • 初始化：
    • const effect = VANTA.WAVES({ el: "#hero", ...options })
  • 初始化后更新：
    • effect.setOptions({ color: 0xff88cc })
  • 调整大小：
    • effect.resize()（如果容器尺寸发生变化）
  • 清理：
    • effect.destroy()（在 SPA 中很重要）

常见问题

  • 容器没有尺寸 → 不会显示任何内容
    • 确保目标元素有明确的宽度/高度（或已正确布局）。
  • 单个页面上有多个 WebGL 画布 → 增加 GPU 负载
    • 每页最多保留 1–2 个效果。
  • 移动设备/较旧的 GPU 问题
    • 提供备用背景色/图片；考虑在小屏幕上禁用效果。
  • 在框架中打包
    • 某些构建需要 window.THREE，或在选项中传入 THREE。

快速示例

1）最简 Waves 背景
<div id="hero" style="height: 70vh;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta/dist/vanta.waves.min.js"></script>
<script>
  const effect = VANTA.WAVES({ el: "#hero", color: 0x0b1220, shininess: 40, waveHeight: 16, zoom: 0.9 });
</script>
2）React 清理模式（概念）
  • 在 useEffect 中创建效果，将其存储在 ref 中，并在组件卸载时调用 destroy()。

需要向用户确认的问题

  • 想要哪种效果（waves、birds、fog、net 等）以及哪些品牌颜色？
  • 是否必须支持移动设备？如果是，可接受的 FPS/画质是多少？
  • 背景是否位于文字后方（是否需要确保对比度/可读性）？

评论

支持 Markdown