网页动效天花板：粒子动画与 WebGL 的 5 个必装 Skill
从会漂移的粒子背景到电影感落地页，不用手写 shader 也能做出高级视觉。
掘技出品 · 视觉动效
这些场景，你大概也遇到过
看到别人官网的粒子星空特效，自己对着 WebGL 教程抄了一晚上还是黑屏
小红书 · 创意前端
落地页想要动效，设计给的是参考视频，前端说这个要写 shader 做不了
知乎 · 独立开发者
粒子效果做出来了，一上移动端掉帧掉到 20fps，只能忍痛删掉
即刻 · 前端日常
这些散布在小红书 / 知乎 / 即刻 / X 上的真实心声,拼在一起就是大家做「网页粒子动画与 WebGL 视觉动效」时的日常痛点。
懒人方案 · 推荐
装一次掘技,让 Agent 自己找 Skill
你要做的「网页粒子动画与 WebGL 视觉动效」任务,对应的 Skill 觅游都有。但你不需要一个个找 —— 装了掘技(deep-skill-finder)后,Agent 接到任务会自动搜索觅游 50000+ Skill 库,把匹配当前任务的方法推荐给你。你只管说要做什么,匹配 Skill 的事交给 Agent。
复制口令 → 粘贴给 Claude Code / Codex / Cursor / WorkBuddy / CatPaw 等 · Agent 会自动完成安装:
请安装 deep-skill-finder 技能:从 https://www.meyo.life/skill-finder 下载技能压缩包,解压到本地技能目录并启用。
也可以往下看常用场景 Skill。想深入了解掘技 → meyo.life/skill
3 个动效场景 × 真实 Skill
可以都装,也可以看名字挑 1 到 2 个装。不用担心装错,免费,不满意随时卸。
粒子背景与氛围
让页面背景自己动起来
适合官网与落地页首屏
2224+ 人在用
37+ 人在用
💬 加入掘技社群
和其他掘技用户交流「网页粒子动画与 WebGL 视觉动效」经验 · 掘技团队会解答装配问题
进群备注你做的事
常见问题
Q: 不会写 shader 也能做粒子特效吗？
A: 能。chenjin-banner 这类 Skill 输出零依赖的单文件 HTML，特效开箱即用；globe-particles 等也有现成参数可调，不需要从零写 GLSL。
Q: 粒子动画会影响页面性能吗？
A: 主要看粒子数量和渲染方式。控制在几千粒子内、按需渲染并降级移动端分辨率，一般可以稳定 60fps；canvas-webgl Skill 覆盖了常见性能手法。
Q: 特效素材从哪里来？
A: chenjin-banner 支持直接输入一张图片（或用内置 Demo 场景）生成特效；模型和贴图可用免费素材库，也可以让 Agent 程序化生成。
Q: 做出来的动效能放到 React 项目里吗？
A: 可以。单文件版可以直接嵌 iframe 或改写为组件；需要深度集成时用 threejs-skills 在 Three.js 场景里实现，再包成 React 组件。
Q: 这些 Skill 是免费的吗？
A: Skill 本身在掘技社区免费下载，卡片上的安装量是真实数据；运行时如果调用 LLM 会消耗模型额度，与 Skill 本身无关。
Q: 怎么向设计师还原参考视频里的效果？
A: 把参考视频拆解成关键元素（粒子形态、运动方式、色调）描述给 Agent，先用 canvas-webgl 或 globe-particles 出近似版本，再用 shader Skill 精调细节。