Agent Skills
返回列表
Motion.Lab 网站动效库

Motion.Lab 网站动效库

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_7fecb76a/motion-lab。

技能介绍

面向具体问题

前端页面里的“入场、悬停、文字特效”经常要临时找代码，复制后还要改时长、距离、颜色。这个 Skill 面向这类需求：当你说“给按钮加点击反馈”“落地页标题做遮罩揭示”“背景加粒子/星空/流体效果”时，它从 Motion.Lab 的动效清单里检索对应 ID，返回可嵌入的 HTML、CSS、JS 代码片段，而不是泛泛建议。

核心能力与使用路径

它把 160 个动效按 基础、文字、交互、高级 组织。基础类偏纯 CSS，适合 fade-in、pulse、spinner 这类低成本集成；文字类覆盖 typewriter、mask-reveal、glitch-text；高级类涉及 Canvas、Three.js、GLSL 与物理仿真。每个动效会列出参数范围，例如 duration、distance、blur，可按需调整 CSS 自定义属性或 JS 变量。

使用时可先按关键词、分类和难度筛选 ID，再复制代码块，最后把参数通过 style="--key: value" 或 JS 变量传入。

适用边界

适合快速搭原型、演示页和营销页。若项目已有统一设计系统，需要先把片段中的颜色、时长和缓动接入变量。高级动效对浏览器 API、包体体积和性能更敏感，上线前建议检查移动端帧率与依赖。

使用场景

  • 为落地页按钮和卡片挑选悬停、点击反馈动效，复制源码后调成品牌色和时长。
  • 给产品介绍标题做遮罩揭示或打字机效果，按页面首屏高度改距离与延迟。
  • 在演示页里加入星空、粒子或流体背景，从高级动效清单取 Canvas 或 Three.js 片段。
  • 表单提交失败时用 shake 或 flash 做错误提示，改时长、颜色并接入现有表单校验。

适合人员

  • 负责落地页和营销页的前端工程师，需要快速给按钮、卡片和首屏标题加可复制动效。
  • 做原型演示的产品设计师，需要为标题、列表和状态提示选现成 CSS/JS 动效片段。
  • 维护官网交互的小团队工程师，需要用纯 CSS 基础动效减少组件库依赖。
  • 尝试 Three.js 或 Canvas 背景的独立开发者，需要找粒子、星空、流体类动效源码和参数。