动效工艺套件
来源： github.com/iart-ai/motion-skills — 14 个开源包，51 个技能，MIT 许可。 这是一个单一的综合参考。原始 14 个包可通过
npx skills add iart-ai/<pack-name>单独安装，或作为 Claude Code 插件使用。本技能覆盖完整领域，让你在单一位置拥有全局地图。
信息
| 仓库 | iart-ai/motion-skills（上游，MIT） |
| 整合者 | V4TIME — V4SKILL |
| 内容 | 51 个面向 AI 编码代理的动态图形/动画/视频技能，已重新组织 |
| 格式 | 参考技能 — 类似手册，单个 SKILL.md |
| 安装原始包 | npx skills add iart-ai/tiktok-video-skills 等 |
| 使用时机 | 任何涉及动态图形、动画、视频制作、Web 动画、数据可视化、3D/WebGL、数学动画或自由职业动效业务的请求 |
主题
教导 AI 编码代理能够制作贯穿整个流程的动态图形、动画和视频 —— 从 hook 驱动的 TikTok 片段到 WebGL 着色器背景，从旁白解说视频到品牌动效系统文档。该集合覆盖 14 个领域，每个领域都有其可安装的包，并共享通用结构：每个技能是一个自包含的 SKILL.md + references/ 文件夹，教授一个工作流。产出视觉内容的技能附带交付与验证循环及一个小型 scripts/ 工具包。
核心主线：动效是工艺，而非魔法。 每套技能都植根于实际制作技术 —— 时间/缓动原则、帧精确剪辑、节拍同步、60fps 规范、平台规范、无障碍 —— 而不仅仅是“让它动起来”。
主要关键主题
-
短视频垂直视频拥有独特的语法。 吸引点、模式中断、节奏把控、留存编辑、配实时字幕、下三分之一标题、倒计时 —— 9:16 是独立的语言，而不仅仅是“横屏转竖屏”。
-
数据驱动动效。 图表竞赛、计数动画、信息图动画、年度总结风格回顾、从 CSV 批量生成的广告创意 —— 动效是数字的函数，每帧精确渲染。
-
动态文字是文本即动效。 字符/单词/行错峰、拆分文字揭示、可变字体字重过渡、路径文字、歌词/标题卡片 —— 文本不是静止的，它是在表演。
-
Web 动效的命脉是 60fps 和无障碍。 仅对
transform/opacity进行动画，消除布局抖动，尊重prefers-reduced-motion并分级降级，Next.js App Router 中的页面过渡、微交互、SVG 描边绘制、Lottie 播放。 -
3D/WebGL 是独立的轨道。 GLSL 片段着色器、Three.js/R3F 场景、粒子系统 —— GPU 绑定、内存泄漏敏感、作为背景和效果部署，而非整个产品。
-
数学动画是独立工艺。 Manim CE —— 场景、Mobject、LaTeX 变形、ValueTracker、3D 移动摄像机 —— 用于制作 3Blue1Brown 风格的教育视频和方程式可视化。
-
社论式地图动画是地理即叙事。 摄像机缩放、绘制路线、落点标记、区域高亮、12fps 卡顿 —— Vox 风格，源自 Google Earth Studio 或 GeoJSON/SVG。
-
品牌动效是系统，而非一次性工作。 缓动/时间令牌、动效库、Logo 规则、无障碍标准 —— 一次编写，各处引用。
-
自由职业动效是一项业务。 简报、定价、修改上限、交付规格、品牌动效指南 —— 支撑动效设计师或工作室的后端事务。
-
每个视觉技能都附带验证循环。 冻结一帧、生成联系表、探测编码后的 MP4 —— 代理在交回前自行确认输出。Web 技能渲染独立 HTML；视频技能通过 Remotion 或 Manim 渲染。
51 个技能 —— 整合、重新排序、重写
按工作流组织，而非按原始包。顺序已调整。大约一半的说明已从头重写；其余来自原始 README 描述的浓缩版本。
A. 短视频垂直视频（TikTok / Reels / Shorts）
1. short-form-video
功能： 垂直 9:16 视频的结构语法 —— 能抵抗划走的吸引点、重置注意力的模式中断、维持留存的节奏，以及可重复使用的模板结构。教授“前 3 秒问题”作为设计约束，而非模糊感受。
激活时机： 制作 Reel/TikTok/Shorts、构建可复用的短视频模板、为留存而编辑、修复薄弱开场、收紧节奏、制作无缝循环。
2. caption-animation
功能： 根据转录文本或画外音生成字时间步卡拉 OK 风格字幕 —— 逐词弹出、活动词高亮、安全区域定位以确保字幕不与平台 UI 重叠。可渲染硬字幕或提供定时词数组供其他渲染器使用。
激活时机： 将画外音转换为 Hormozi 风格的逐词字幕、将字幕刻录到片段、向 Reel 添加动画字幕。
3. countdown-video
功能： 帧精确、无漂移的倒计时器，带有数字翻转/滚动动画和可配置时长 —— “即将开始”屏幕、发布/促销倒计时、在精确帧上归零的动画计数器。解决了破坏大多数朴素实现的漂移问题。
激活时机： 构建倒计时器、“即将开始”屏幕、发布倒计时、必须精确归零的动画计数器。
4. lower-thirds
功能： 干净、品牌化的名称/角色下三分之一标题，带有分阶段进出动画 —— 可模板化，以便用相同外观运行整个名单。包含安全区域定位和品牌锁定（颜色、字体、Logo 位置）。
激活时机： 创建动画下三分之一标题、名称标签、演讲者覆盖、广播风格标题（用于一组人员）。
5. text-message-animation
功能： 动画化聊天对话 —— 气泡逐个弹出、打字指示器脉冲、发送音效落在节拍上、会话自动滚动 —— 跨 iMessage/WhatsApp/SMS 美学，从消息数组或 CSV 渲染，一个模板生成无限视频。
激活时机： 制作假文本消息视频、iMessage 故事、WhatsApp/SMS 对话片段、聊天回复动画、从 CSV 批量生成文本消息视频。
B. 播客 / YouTube / 长视频
6. audiogram
功能： 将播客片段、画外音或引言转换为带字幕的波形视频，尺寸适配 Reels/TikTok/Shorts/信息流帖子 —— 响应式波形、可选进度条、字幕、方形或竖屏输出。音频驱动的视觉线索本身就是产品，而非装饰。
激活时机： 制作音频图谱、将播客转换为视频、向画外音添加动态波形、将播客引言导出到社交媒体。
7. youtube-intro-outro
功能： 构建 3–5 秒的品牌开场和 20 秒的结尾屏幕，其设计约束包括 YouTube 的可点击区域（订阅按钮、下个视频卡片等）。可复用模板，仅需更换名称/Logo/颜色/主题。
激活时机： 制作 YouTube 开场、频道广告、Logo 片头、结尾、结束屏幕、带订阅/下个视频区域的结束卡片。
C. 电商 / 产品
8. product-demo-video
功能： 将静态产品/应用截图转换为精美的动画演示 —— 设备框架、合成光标 + 点击、区域放大、功能字幕 —— 无需录屏即可将静态截图变为导览。对观看者看到的内容和时间进行帧级控制。
激活时机： 制作产品演示、应用/SaaS 导览、功能公告视频（基于截图）、将每个屏幕放入浏览器窗口。
9. promo-video
功能： 6–15 秒的简短促销广告 —— 折扣揭示、原价→现价删除线、促销代码、倒计时、行动号召 —— 从数据表批量生成，一个模板根据数据行渲染 N 个促销视频。专为黑色星期五/闪购设计，量是关键。
激活时机： 创建促销/折扣揭示/黑色星期五/闪购视频、从 CSV 批量生成促销视频。
10. photo-slideshow
功能： 将照片文件夹转换为成品视频 —— 每张照片的 Ken Burns 运动、节拍同步过渡、处理混合宽高比、叠加字幕。照片并非简单剪辑，而是有意图地移动。
激活时机： 将照片转换为幻灯片/蒙太奇/回顾视频，配音乐，Ken Burns 运动与音轨同步。
D. 广告 / 营销
11. ad-creative-video
功能： 一个数据驱动广告模板 × 一个 CSV = N 个信息匹配的变体，导出到所有投放宽高比（9:16, 4:5, 1:1, 16:9）用于 A/B 测试。创意参数化，吸引点、正文、行动号召和优惠均来自数据行。
激活时机： 制作视频广告、从数据表批量生成广告变体用于 A/B 测试、将单个广告导出为 Meta/TikTok/Reels/YouTube 的多种宽高比。
12. launch-video
功能： 高能产品发布 / 宣传片 —— 吸引点 → 预告 → 揭示 → 功能蒙太奇 → 结尾卡片行动号召，按节拍剪辑。结构是模板；能量是可调节的变量。
激活时机： 构建 30 秒产品发布视频、宣传片、节拍同步揭示、结尾卡片行动号召短片。
13. testimonial-video
功能： 动画化的引言/评价片段，带有错峰行揭示、关键短语强调、部分星级评分和作者信息块 —— 将客户评价列表转换为品牌锁定的社交证明视频。
激活时机： 将客户评价转换为动画推荐片段、带星级评分的引言视频、基于评价列表的社交证明视频。
E. 解说 / 教育
14. explainer-video
功能： 将一条信息转换为有节奏的、带旁白的 30–90 秒短片 —— 脚本 → 故事板 → 场景构建 → 旁白/字幕同步 → 编辑 → 润色。覆盖完整流程，而不仅仅是渲染步骤。处理大多数动效工具忽略的从脚本到屏幕的差距。
激活时机： 制作解说视频、工作原理介绍、入门指南或概念视频；将功能转换为旁白工作原理片段。
15. wrapped-video
功能： 构建“Spotify Wrapped”风格的年度回顾 —— 一个模板 × 一个数据表 → 多个个性化 9:16 视频，每行填充一个。模板固定；数据因用户而异。
激活时机： 从 CSV 用户数据构建 Spotify Wrapped 风格的年度回顾视频、每用户统计视频。
16. diagram-animation（重写）
功能： 随时间逐步揭示图表，而非全部一次性闪烁 —— 渐进式节点/边缘揭示、自行绘制的流动连接器、逐步攀升的柱状图、计数动画。观看者在图表构建过程中阅读它，而不是一个突然存在的静态图像。处理架构图、流程图和数据图表的方式相同：分阶段披露。
激活时机： 逐步动画化图表、流程图、架构图或图表；逐个节点揭示；柱状图增长和数字计数。
17. whiteboard-animation（重写）
功能： 类似“VideoScribe”风格的绘制解说视频 —— 一只手在板上逐笔描绘插图和手写文字，节奏与旁白同步。揭示本身就是动效；手是手段。并非优质内容的替代品，而是让基础插图感觉像是一堂课在展开的交付机制。
激活时机： 制作白板风格解说视频、绘制动画、与旁白同步的手绘插图。
18. isometric-animation（重写）
功能： 等距 / 2.5D 场景 —— 堆叠层、拉伸块、分解图、等距网格，带有错峰揭示和摄像机漂移。为平面图表增加一个维度而不需要完整 3D；摄像机漂移，层分离，观众获得深度线索而无需 WebGL 管道。
激活时机： 构建等距 / 2.5D 场景、堆叠层图表、分解视图、带错峰揭示和摄像机漂移的等距网格。
19. manim（重写）
功能： 使用 Manim Community Edition 在 Python 中构建数学/物理/计算机科学动画 —— 场景与 Mobject、动画原语、LaTeX/MathTex 方程变形、图表与更新器（ValueTracker）、3D 与移动摄像机、CLI 渲染为 MP4/GIF，并带有先渲染一帧的验证循环。3Blue1Brown 工具链，可供编写场景代码的代理使用。
激活时机： 制作数学动画、动画化方程、使用 Manim、制作 3Blue1Brown 风格视频、绘制和动画化函数、将一个公式变形为另一个、渲染带轨道摄像机的 3D 曲面。
F. 动态文字排版
20. kinetic-typography
功能： 在 CSS、GSAP SplitText、Framer Motion 和 Remotion 上动画化文本 —— 字符/单词/行错峰、拆分文字揭示、可变字体字重过渡、路径文本、歌词/标题卡片。文本是动效的主体，而非放置在其他内容之上的标签。
激活时机： 动画化标题、制作动态文字排版视频、创建动画标题卡片、拆分文字揭示、按字符/单词/行错峰文本、制作歌词或字幕视频、动画化可变字体字重、将文本置于路径上。
G. Web 动画
21. gsap-web
功能： 使用 GSAP 进行代码驱动的 Web 动效 —— 时间线、ScrollTrigger、SplitText、Flip 和 Lenis 平滑滚动同步。行业标准的时间线工具集成到网页中，而非封闭插件。
激活时机： 在 Web 上使用 GSAP 构建滚动驱动、首屏或文本揭示动画；固定一个首屏区域，使其按滚动擦洗时间线。
22. 60fps-animation（重写）
功能： 教授 60fps Web 动效纪律：仅复合属性（transform/opacity）以防止布局/绘制；使用 will-change 提示但避免内存膨胀；使用 requestAnimationFrame 驱动循环；关键帧动画的 steps() 缓动；尊重 prefers-reduced-motion 并带有分级的非动效降级。Web 动效的“为什么”和“怎么做”。
激活时机： 构建高性能 Web 动画、优化卡顿的动画、在动效密集页面实现 60fps、添加尊重无障碍的动画。
23. framer-web
功能： 使用 Framer Motion 的声明式 React 动效 —— motion 组件、AnimatePresence 进出场、layout 动画、useScroll/useTransform 滚动驱动动效。为在 Next.js/React 生态中工作的代理准备。
激活时机： 在 React/Next.js 中构建页面过渡、列表进出场、滚动驱动的首屏或元素动效。
24. lottie-web
功能： 集成 Lottie 动画（Bodymovin 导出的 JSON）到网页中 —— 使用 lottie-web 播放、控制、循环、交互触发、片段选取（from...to）、重新着色可着色图层。给定 Lottie JSON 路径，播放它。
激活时机： 在网站上添加 Lottie 动画、播放 After Effects Bodymovin 导出文件、重新着色 Lottie 图层、循环或按片段播放 Lottie。
25. svg-web（重写）
功能： 使 SVG 动起来 —— 使用 stroke-dasharray/stroke-dashoffset 的描边绘制动画；路径变形（d 属性）；viewBox 跟踪；将 SVG 渲染到 Canvas（canvg、fabric.js）。SVG 是声明式动效的载体，不依赖外部库。
激活时机： 动画化 SVG 图标/插图、描边绘制、路径变形、SVG 到 Canvas。
26. scroll-story（重写）
功能： 构建垂直滚动讲故事体验 —— 粘性定位的固定元素 + IntersectionObserver/ScrollTrigger 基于进度触发的动效；长格式化文本 + 边缘到边缘图像 + 全屏场景变化 + 滚动进度指示器。页面滚动，内容前进。
激活时机： 构建滚动故事、长篇叙事网站、滚动驱动的固定元素体验。
27. page-transition（重写）
功能： Next.js App Router 页面过渡 —— 使用 layout.js 进出场动画包裹 children；共享布局动效（平滑切换）；usePathname 驱动的页面切换；协调进出场时间以避免闪烁。
激活时机： 在 Next.js App Router 中平滑动画化页面过渡、添加页面进出场、在路由切换时保持元素动画。
28. micro-interaction（重写）
功能： 社交/UI 微交互 —— 按钮点击涟漪反馈；开关切换；骨架屏加载脉动；为空状态添加动效；通知弹窗出现；点赞/收藏动画。发生在 200-400ms 内且全部在 60fps 的小型有目的动效。
激活时机： 为按钮/开关/骨架屏添加微交互、UI 状态动效、按钮涟漪反馈。
H. 3D / WebGL
29. glsl-shader（重写）
功能： 编写 GLSL 片段着色器 —— gl_FragCoord 到 UV 坐标、uniform 时间/鼠标、varying 传递、函数工具、ShaderToy 兼容语法、噪声/溶解/平移/缩放/distort 效果、调试颜色输出。直接写入 GPU 的可编程管线。
激活时机： 编写 GLSL 片段着色器、为 Three.js/WebGL 创建着色器效果、为水/火/粒子/抽象设置背景着色器。
30. threejs-3d（重写）
功能： Three.js / React Three Fiber 场景 —— 场景、摄像机、尤其是旋转动画物体；PBR 材质 + 光照；环境贴图（HDR）；轨道摄像机 + damping；几何体与网格；OrbitControls 用于开发；GLTF 加载（useGLTF/GLTFLoader）和模型放置。Out-of-the-box 场景启动。
激活时机： 使用 Three.js 或 React Three Fiber（R3F）构建 3D 场景、加载 GLTF 模型并放置、应用 PBR 材质和光照、使用轨道摄像机。
31. particle-system（重写）
功能： 粒子系统 —— CPU 布署（Points）用于 < 10k 粒子；GPU 布署用于已理解的状态计数；BufferGeometry + PointsMaterial 基本结构；Points 上的 ShaderMaterial 用于每粒子属性；生命周期更新循环。
激活时机： 构建粒子系统、星空、粒子背景、粒子场作为 Web 体验的背景或效果。
I. 数据可视化（动效化）
32. chart-race（重写）
功能： 条形竞赛（“金银岛”风格）动画 —— 条形随时间交换排名，数值跳动更新，纹理/信息头部、轴和标签保持在位。渲染为 MP4（Remotion）或 Web 格式（D3 过渡 + HTML）。数据排名随时间变化。
激活时机： 制作条形竞赛视频、随时间变化的排名动画、金银岛风格数据视频。
33. data-countup（重写）
功能： 数字计数向上动画 —— 带缓动的整数/浮点数/货币/百分比计数器；可选的千位分隔符和格式；Remotion 渲染（useCurrentFrame）或 Web（requestAnimationFrame，IntersectionObserver 触发可视区域）。
激活时机： 动画化计数、数字计数向上、定时更新数字、货币/百分比/整数格式的计数器。
34. animated-chart（重写）
功能： 动效化图表 —— 使用 D3 或 Remotion 渲染的折线/条形/饼图/面积图，带有渐进入口和轴生长；数据点按时间顺序出现，标签淡入，网格渐进。赋予静态图表叙事弧线。
激活时机： 动效化数据图表（折线、条形、饼图、面积图）、逐步揭示数据点、向图表添加叙事动效。
35. wrapping-scroll（重写）
功能： “滚动包装”动效 —— 一个长项目列表在垂直面板中滚动，具有 3D 视觉感 —— 当前项目位于中心放大，背景项目在两侧旋转消失。用于选择界面的产品轮播/滑动面板，而非传统滚动。
激活时机： 构建轮播、产品列表滑动面板、3D 覆盖流滚动体。
J. 地图动画
36. editorial-map（重写）
功能： 社论风格地图动效 —— 摄像机缩放到城市/区域；绘制路线（SVG stroke-dasharray、Mapbox、Leaflet、Google Earth Studio）；放置落点标记（弹出+波动）；高亮区域；可选的 12fps 卡顿用于“严肃”新闻感。在 SVG、Mapbox、Leaflet 或 Google Earth Studio 导出上工作。
激活时机： 制作社论地图动画、地图摄像机缩放、绘制路线动画、落点标记、区域高亮、Vox/新闻风格地图。
K. 图形模板与营销
37. reusable-template
功能： 构建可复用的 Remotion 或 Web 模板 —— 参数化组件、数据驱动的 props、用于批量替换的 CSV/JSON 数据、可互换资源（字体、图像差异）。
激活时机： 构建可从 CSV/JSON 填充的可复用动效模板、批处理生产。
38. thumbnail-video
功能： 构建动效缩略图 —— 循环的 5-10 秒 MP4，为 YouTube/TikTok/Reels 优化，带有浮动的文本/图形覆盖；使用 keyframes 或 Remotion 完成。
激活时机： 制作动效缩略图、YouTube/TikTok 缩略图、循环视频缩略图。
39. comic-style-animation（重写）
功能： 漫画风格的图像动效 —— 应用漫画滤镜、面板依次揭示、对话气泡从角色弹出、拟声词“砰”/“嗖”动画以及爆炸形状。使用 lambda 函数或直接 ImageMagick/Remotion 完成。
激活时机： 为图像添加漫画风格动效、面板揭示、对话气泡、拟声词动效、漫画模板。
L. 品牌与标志
40. logo-animation
功能： Logo 动画 —— 描边绘制（对于基于 SVG 的 Logo）、淡入缩放+旋转（对于标准 Logo）、形状变形（对于抽象 Logo）；配品牌缓动和颜色。
激活时机： 制作 Logo 动画、描边绘制 Logo、淡入/缩放/旋转 Logo、形状变形 Logo。
41. brand-motion-guidelines
功能： 生成品牌动效指南 —— 缓动/时间令牌、动效库（Motions.one 或 Framer 可用的 JSON）、Logo 规则、无障碍标准、色彩和排版、示例动效。适合包含在较大的品牌指南或设计系统工作流程中。
激活时机： 编写品牌动效指南、定义动效令牌、创建动效应遵守的品牌规则。
42. lottie-brand
功能： 品牌化的 Lottie 图标库 —— 颜色/缓动/排版与 CI 匹配；可着色图层品牌化；导出为 Lottie JSON；向现有 Lottie 添加品牌化。
激活时机： 创建品牌化 Lottie 图标集、设置品牌颜色/缓动、将 Lottie 集成到品牌中。
M. 自由职业 / 业务
43. brief-to-quote
功能： 将客户简报转换为结构化的报价 —— 拆解视频类型、时长、所需资产、修改轮次、权利、交付品；附加定价（每服务项或整体）。创建个人项目页面。
激活时机： 对客户简报作出响应、为新项目创建报价、为动效制作服务定价。
44. motion-pack
功能： 构建可出售/可共享的动效包 —— 一个带有标准安装说明的仓库、一个包含主题、时间线、缓动的 JSON 动效库文件；导出预设（GSAP、Framer、CSS）。
激活时机： 构建动效包、用于出售的可共享动效集合。
45. motion-portfolio
功能： 构建动效组合展示网站 —— 项目列出和过滤、每个项目的案例研究页面、快节奏动效预览、作为焦点放置的嵌入视频。
激活时机： 构建动效组合、展示动效作品的网站。
46. commercial-use-license（重写）
功能： 生成商业使用许可证 —— 用于出售的个人/机构模板包；限制与权限（使用、修改、再分配、转售）；可选版本（个人 vs 企业）。
激活时机： 为动效包/产品生成许可证、定义使用条款。
N. 视觉质量保证
47. contact-sheet（重写）
功能： 从视频生成联系表 —— 提取 9 个均匀间隔的帧（或按秒提取），为渲染保真度制作平铺图像以进行视觉检查。输出可为 ffmpeg 平铺或 Remotion 生成的图像。
激活时机： 验证视频渲染质量、提取帧、从视频创建联系表。
48. freeze-frame（重写）
功能： 从视频中提取特定的单帧 —— 给定的时间点（HH:MM:SS.frames）、提供的帧数、或按名称/时间提取关键帧。使用 ffmpeg 完成。
激活时机： 从视频中提取帧、帧级质量检查、检查特定时间点。
49. frame-diff（重写）
功能： 比较两个视频（或帧）的差异 —— 像素级差异（ffmpeg psnr、ssim）、视觉差异比较（ffmpeg psnr 过滤器）和差异图像；通过 compare/magick compare 的 ImageMagick 差异。用于回归测试和验证。
激活时机： 比较两个视频的差异、验证渲染的准确性、检测帧差异。
50. probe-video（重写）
功能： 探测视频或图像文件 —— 打印编解码器、分辨率、帧率、比特率、时长、关键帧距离、颜色范围；以及可选的逐帧 PSNR/SSIM。使用 ffprobe。
激活时机： 获取视频元数据、检查编解码器/帧率/比特率、验证编码规格。
51. waveform-visual（重写）
功能： 在视频上叠加音频波形 —— 从音频轨计算波形数据（audiowaveform、ffmpeg showwavespic），将波形渲染为透明 PNG 或 SVG，合成到视频上。与动态文本/颜色/主题/音频同步协同。
激活时机： 向视频添加视觉波形、叠加音频波形。
最后说明：这是一个整合参考，而非替代品。原始包各有其
SKILL.md和references/文件夹，包含示例代码、脚本和安装说明。 单独安装它们以获得完全本地化的体验：npx skills add iart-ai/<pack-name>。 本技能将全部 51 个领域置于一处，以便你不会错过你不知道自己需要的技能。