什么是 Awesome AI Motion？
Awesome AI Motion 是一份面向人类和 AI 编程代理的运动设计指南。你不必只根据外观选择动画，而是可以先从场景需要传达的信息出发，再选择合适的效果、方案或设计路线。
该仓库收录了 637 种技术、128 个参考片段、11 个方案和 7 条设计路线。每张效果卡片都可以包含定义、调校参数、示例、来源参考，以及适用于 Claude Code 和 Codex 的提示词。
当你需要设计产品展示、片头序列、教育类开场、短视频吸引点、数据故事、UI 演示或其他由运动驱动的场景时，这份指南会很有帮助。
主要功能
- AI 可读的效果卡片：代理可以在调整动画前查看卡片内容。
- 渲染参考：渲染后的效果可以包含 HTML 舞台、MP4 片段、动态 GIF 预览图和海报图片。
- 按用途发现：决策表可以帮助你根据场景目标或媒介选择运动效果。
- 组合方案：方案展示多个效果如何在按时间编排的场景中协同工作。
- 设计路线：路线文档帮助规划宣传片、短视频和演示文稿等较大型交付物。路线文档使用韩文编写。
- 浏览器对比：项目网站支持筛选、慢速播放，以及最多四个片段的对比。
- 本地渲染：提供的渲染脚本可以创建自定义副本，而不会改变参考效果。
- 结构化元数据：规范的
index.json文件让目录可以直接查询。
可用运动效果示例
该集合涵盖从镜头运动和字体排版，到转场、揭示、视差、光效和形状变换等多种类型。重点示例包括 Infinite Canvas Pan、Camera Fly-through、Infinite Zoom、Kinetic Type Sweep、Giant Mask Reveal、Morph Match Cut、Noise Dissolve、Ken Burns，以及 Particle Scatter & Assemble。
Particle Scatter & Assemble 是仓库中提供渲染参考的效果之一。
选择合适的起点
该仓库提供了多个入口。请根据你要完成的任务选择合适的入口：
- 网站：浏览、播放、筛选、减速播放并直观对比片段。
- 文档目录：无需打开每张效果卡片即可浏览指南。
- 完整目录：查看按运动类别分组的技术，并确认片段是否可用。
- 决策表：根据用途或媒介选择效果。
- 方案：将多个效果组合成完整的定时场景。
- 设计路线：规划较大型的运动设计交付物。
- 代理工作流：遵循用途、卡片、调整、渲染和验证流程。
安装与设置
步骤 1：克隆指南
克隆仓库并进入其目录：
git clone https://github.com/gongnyang/awesome-ai-motion.git
cd awesome-ai-motion仅为了浏览网站、阅读效果卡片或将指南连接为代理技能，无需安装依赖。
步骤 2：准备可选的渲染依赖
本地渲染需要系统路径中存在 Node.js 20 或更高版本、ffmpeg，以及安装了 Chromium 的 Playwright。仅当缺少这些依赖时，才运行以下命令：
npm install
npx playwright install chromium
ffmpeg -version如果 Playwright 已全局可用，则可以跳过软件包安装。如果系统中已经存在合适的 Chromium 安装，也可以跳过 Chromium 安装命令。
步骤 3：将指南连接到 Claude Code
创建 Claude Code 技能目录，并将仓库链接到其中：
mkdir -p ~/.claude/skills
ln -s "$PWD" ~/.claude/skills/awesome-ai-motion符号链接很方便，因为该技能使用当前检出目录。如果你的环境不适合使用链接，也可以改为复制目录：
mkdir -p ~/.claude/skills
cp -R "$PWD" ~/.claude/skills/awesome-ai-motion只能选择一种方法，并确保目标路径尚未被使用。对于 Codex，请将相同的链接或副本放置在 ~/.codex/skills/ 下。
复制的技能不会自动接收仓库后续的更改。当指南发生变化时，请更新或替换副本。
基本用法
让智能体选择一种效果
描述场景的沟通目标，然后告诉智能体查阅相关效果卡并保留其中经过调优的默认值。例如：
为产品展示选择动效。阅读效果卡并使用其默认参数。
这一请求为智能体提供了明确的目的，引导它使用文档中记录的实现方式，并避免随意猜测动画数值。
你也可以围绕其他目标提出请求，而无需预先指定效果：
为教育类开场钩子选择动效。查阅指南，并在调整之前确定合适的效果或配方。指南包含教育类开场钩子、短视频钩子、标题开场、产品界面演示、数据故事、概念讲解、前后对比和滚动卡片场景等配方示例。
手动阅读效果卡
每张卡位于：
effects/<slug>/README.md例如，遮罩揭示效果卡位于 effects/mask-reveal/README.md。修改效果之前，请阅读效果卡中的定义、参数、示例、提示词和来源。当效果包含已渲染的素材时，其目录还可能包含：
index.html，用于动效舞台clip.mp4，用于视频输出preview.gif，用于动画预览poster.jpg，用于静态图像
渲染你的第一个定制片段
使用提供的渲染器处理遮罩揭示效果。此命令会更改显示文本，创建可嵌入的舞台，并将结果写入单独的暂存目录：
node scripts/render.mjs effects/mask-reveal \
--embed --text "Make it move" --out .staging/my-first-motion渲染后，请检查以下生成的文件：
.staging/my-first-motion/clip.mp4.staging/my-first-motion/preview.gif.staging/my-first-motion/poster.jpg
由于输出写入 .staging/my-first-motion，原始效果仍保持完整并可重复使用。
实用的选择流程
- 明确场景目的。确定动效是否需要展示产品、建立层级、解释概念、呈现变化或引导注意力。
- 浏览或查询目录。使用网站进行视觉探索，使用决策表按目的选择，或使用
index.json获取结构化元数据。 - 打开效果卡。查看定义、调优参数、示例、提示词和来源引用。
- 当一种效果不够时，查看配方。配方展示了如何将效果编排成具有时间安排的场景。
- 创建副本并调整。保持参考实现不变，并将生成的文件发送到单独的输出目录。
- 渲染并验证。检查 MP4、GIF、海报图和舞台，不要仅凭源代码假定输出正确。
高级技巧
提交前比较候选方案
使用项目网站比较最多四个片段。慢速播放有助于评估时序、缓动、遮罩和过渡。当多种技术都能满足相同的沟通目标，但产生的活力或强调程度不同时，这尤其有用。
从默认值开始，再进行调整
效果卡提供了经过调优的参数。让智能体先使用这些值，再更改时序或呈现方式。这样可以保留预期行为，并为评估后续更改提供已知基线。
将生成的输出保存在参考目录之外
不要将定制渲染结果写入 effects/ 或 recipes/。请使用 .staging/ 等位置，以保持参考片段完整，并便于检查仓库更改。
使用配方构建完整场景
单个效果展示一种动效技巧，而配方则将多种技巧组合成一个序列。当交付内容需要开场、过渡、内容部分和结尾，而不是单个孤立动画时，请从配方开始。
使用结构化数据实现自动化
根目录下的 index.json 是规范目录。工具和智能体可以直接检查它，而不必抓取效果卡页面。完整目录更适合人工浏览，因为它按动效类别归纳技术并报告片段状态。
以不同方式维护链接技能和复制技能
符号链接会持续指向你的检出目录，因此拉取仓库更新后，智能体读取的内容也会同步更新。复制的技能彼此独立，源指南发生变化后必须手动刷新。
验证目录贡献
添加效果、改进默认值或更新参考片段时，请遵循仓库的贡献指南。应更新相关源文件或生成器，而不是将生成的文档视为事实来源。然后重新生成并检查项目：
node scripts/build.mjs
node scripts/check.mjs贡献应确保运动清晰可辨，使用共享舞台，并验证渲染结果。
重新分发前检查许可
项目的原创作品采用 MIT 许可证。源引用和组件许可证记录在 ATTRIBUTIONS.md 以及各个效果卡片中。GSAP 和捆绑字体保留其各自的许可证，因此在重新分发这些资源前，请查阅归属信息。
结语
Awesome AI Motion 将大型动效参考库转化为适合人类和编程代理使用的实用工作流。从场景目的出发，选择有文档记录的效果或配方，保留经过调校的默认设置，将渲染结果输出到单独的目录，并验证生成的资源。这个流程能帮助你从创意意图出发，制作可复用的动效片段，同时不会覆盖指南中的参考实现。