Name: logo-animation
Author: iart-ai/motion-design-skills

1实现原理 · 为什么它能做到

本质是「技法选择 + 交付契约 + 验证回路」三段式提示词：先逼用户/模型在三种揭示技法里只选一种，再限定输出形态，最后用可截图冻结的回路验收。

skills/logo-animation/SKILL.md

Pick ONE technique per logo — draw OR build OR morph — not all at once. Reveals run 0.8–2.5s. Never distort brand geometry; scale and fade are safe, skew and squash usually are not. Respect clearspace (keep the mark's minimum margin clear of motion debris). Always provide a `prefers-reduced-motion` path that shows the final mark with no motion.

注：这里在做什么：把所有主观的「好看」换成可判定的约束——单一技法、时长区间、几何不得变形、留白区不得被运动碎片侵占、必须有 reduced-motion 终态。后面所有 checklist 都在验这几条。

技法层给了一张六行映射表（stroke draw-on / mask wipe / build-on / morph / idle loop / wordmark），每行绑定「适用对象 + 机制」，让选择有依据而不是凭感觉。

skills/logo-animation/SKILL.md

| Stroke draw-on | Line marks, monograms, signatures | `stroke-dashoffset` 1→0 |

注：机制列直接给到实现原语（stroke-dashoffset、clipPath/mask、per-group opacity+transform、GSAP MorphSVG 或匹配路径插值、循环变换、逐字 mask/translate），使「选哪种」与「怎么写」在同一个决策点上闭合。

web 路线的关键技术点是 pathLength 归一化：把任意几何的路径长度归一到 1，于是同一个 dasharray/dashoffset 值对所有笔画都成立。

skills/logo-animation/SKILL.md

`pathLength="1"` normalizes every path to length 1, so one `stroke-dasharray`/`offset` value works regardless of geometry. Stagger multiple strokes with `animation-delay`.

注：配套给了完整可跑的最小示例（inline SVG + @keyframes draw + @media prefers-reduced-motion 关掉动画并直接给终态），属于「复制即得可用结果」的教学密度。

音画同步被做成硬约束而非建议：logo 的落定帧必须压在音频重音上，先定音频再定揭示时长。

skills/logo-animation/SKILL.md

When audio exists, the brand's final settle frame must land exactly on the sonic accent (the "ding"/whoosh peak). Decide the audio first, find the peak timecode, then time the reveal so the mark snaps to full opacity/scale on that frame.

注：还给了具体的质感做法：1.04→1.00 的过冲再落定（约 0.15s）压拍。这对 sound-logo（声音标识）类品牌作业是常见但容易漏的验收项。

交付路线按目标分三档并各自给出实现栈：web 内联 SVG+CSS/GSAP、产品/App 用 Lottie（Bodymovin 导出，dotlottie-web/lottie-web 播放）、视频用 Remotion 或 After Effects（2x 预渲染）。

skills/logo-animation/SKILL.md

- **Video intro/outro**: Remotion (React) or After Effects render to ProRes/H.264. Pre-render at 2x for crispness.

注：Lottie 分支带 reduced-motion 守卫代码：reduce 时不自动播放，load 后直接 setFrame(totalFrames-1) 静态展示终帧。

验证回路的核心是「冻结帧」：输出 HTML 必须内置 ?t=N seek harness（暂停动画并把时间设到 N），从而任意时刻都能被确定性截图。

skills/logo-animation/SKILL.md

Include the freeze harness below, matched to the technique, so any moment can be screenshotted deterministically.

注：SKILL.md 给了四种技法各自的冻结写法（CSS 用 animationDelay=-T + paused；GSAP 用 tl.pause()/seek(T)；SMIL 用 pauseAnimations()/setCurrentTime(T)；Lottie 用 setFrame(round(T*fps))），并统一暴露 window.__ready 供无头等待。这是本 skill 区别于「讲动画原理」类 skill 的地方：它要求产出物自带可验证接口。

验收用截图 + 迭代闭环，而不是自我声明：开 ?t=0 / 中点 / 结束三个冻结帧截图，检查保真与瑕疵，不合格就改参数重截同一时刻。

skills/logo-animation/SKILL.md

**Iterate:** if any check fails (e.g. a half-drawn stroke at `?t=<dur>` or distorted geometry mid-reveal), fix the stroke-dashoffset/duration/easing, re-render the **same** `?t=N`, and re-screenshot to confirm the fix — loop until every frame is clean.

注：并给出可执行命令 `npx playwright screenshot --wait-for-timeout=500 "file://$PWD/logo.html?t=1.1" frame-mid.png`；仓库还提供 scripts/seek-shot.sh 做多时刻批量冻结截图。

仓库为「交付即验证」提供共享脚本工具箱（根级 scripts/），本 skill 明确引用其中两支：seek-shot.sh（冻结并截图）与 contact-sheet.sh（拼成一张对比图）。

skills/logo-animation/SKILL.md

> **Packaged helper** (`scripts/`): `scripts/seek-shot.sh anim.html 0 1.5 3` freezes the `?t=N` harness and screenshots each moment; `scripts/contact-sheet.sh sheet.png frame-*.png` tiles them for one-glance review. See `scripts/README.md`.

注：脚本本体：seek-shot.sh 逐个时刻跑 `npx -y playwright screenshot --wait-for-timeout=600 "file://${abs}?t=${t}" "$out"`；contact-sheet.sh 用 `ffmpeg -filter_complex hstack=inputs=$#` 横向拼接。tier 选择：本 skill 的 web 路线属 Light 档（standalone HTML + ?t=N），视频 logo sting 则被显式转交给 remotion-video 的 Heavy 回路。

与姊妹 skill 有明确路由：web/SVG/Lottie 用本 skill 的 standalone-HTML 回路，视频 sting 则改走 remotion-video 的渲染回路。

skills/logo-animation/SKILL.md

**For web/SVG/Lottie delivery use this standalone-HTML loop; for a video logo sting, render via the remotion-video verify loop instead.**

注：同仓库 9 个 skill 共享一套「交付并验证」范式（color-motion、motion-background 也引用同样的 seek-shot/contact-sheet），本 skill 负责品牌标识这一垂直面。

2核心能力

01六类 logo 揭示技法的选择与实现（描边绘制 / 遮罩擦除 / 分段构建 / 变形 / 无缝循环 / 字标逐字）

02单一技法纪律 + 时长窗口（0.8–2.5s）+ 品牌几何不可变形 + clearspace 保护

03无障碍硬要求：prefers-reduced-motion 下展示静态终帧（CSS/GSAP/Lottie 三条路各有写法）

04确定性冻结 harness：?t=N 暂停到指定时刻，供无头浏览器精确截图

05三档交付目标映射（web 内联 SVG/CSS/GSAP、产品 App 用 Lottie、视频用 Remotion/AE）

06音标同步（sound-logo）：落定帧对齐音频峰值 + 过冲落定

07单文件交付契约（一个自包含 .html，驱动只有一种：CSS keyframes 或单条 GSAP 时间线）

08收尾 checklist（5 条）：可独立打开无报错、单一驱动、三帧截图检查、reduced-motion 与静态终帧、时长与音画对齐

3外部依赖

类型	依赖
cli	npx + Playwright（截图冻结帧；首次会下载 Chromium）
cli	ffmpeg（contact-sheet.sh 横向拼接截图）
package	gsap（build-on 时间线与 MorphSVG 变形）
package	@lottiefiles/dotlottie-web（Lottie 交付与 reduced-motion 守卫）
package	lottie-web（经典 SVG 渲染器替代方案，矢量 logo 最锐利）
package	flubber（无 GSAP 时的路径插值回退）
network	iart.ai 引流链接（文档内，非运行时调用）

4风险提醒风险提醒：橙色 · 评估后使用

风险提醒：橙色 · 评估后使用

验证回路依赖远程包与浏览器下载（供应链面） — `npx -y playwright screenshot` 免确认安装 playwright 并首次下载 Chromium；版本不受本仓库锁定。企业环境若无 npm 出网或需要锁定二进制来源，这条回路会失败或引入未审计二进制。可改用手工截图或其他本地浏览器工具完成同样的三帧检查。
交付 HTML 可能引入第三方 CDN — reference 的 Lottie 示例直接从 cdn.jsdelivr.net 以 ESM 引入 @lottiefiles/dotlottie-web；若直接照抄到生产页面，等于运行时依赖第三方 CDN 的可用性与完整性（应改为本地打包，SKILL.md 另一示例即用本地 /logo.lottie）。
scripts/ 路径依赖仓库根工作目录 — SKILL.md 称 'Packaged helper (`scripts/`)'，实际脚本在仓库根 motion-design/scripts/，skill 目录内没有；按单 skill 粒度安装后照抄 `scripts/seek-shot.sh` 可能找不到文件。同仓库 after-effects 的 .jsx 却放在 skill 内，路径语义不统一。
文档措辞与示例不齐（GSAP CDN） — SKILL.md 提到 'one CDN GSAP <script>'，但 reference 全篇用 `import gsap from "gsap"`，未给任何 GSAP CDN URL；照文档字面执行会缺一个可用的引入方式。
品牌素材与法务层面无约束 — skill 会生成/改写品牌标识的动画，但没有任何关于标志使用许可、clearspace 具体数值来源或商标规范的核查步骤——「on-brand」靠用户自己保证。
文档含商业引流 — reference 末尾与仓库 README 含 iart.ai 的 UTM 链接，属产品化 skills 集合的转化位；不影响功能，但阅读时应知悉定位。

风险提醒：橙色，评估后使用。理由：skill 本体是提示词+文档，但它的验证回路依赖远程包与镜像——`npx -y playwright screenshot`（免确认安装 playwright 并首次下载 Chromium 二进制）与交付示例中的 jsdelivr CDN 模块；按分级范式「依赖第三方插件、镜像、远程包」落在橙档。注意：无凭证读取、无环境变量读取、无业务 API 调用、无批量采集或绕过行为，故不是红档。触发条件：安装/首次运行验证回路时发生远程拉取；纯编写 HTML 或只在浏览器手动查看时不触发任何网络行为。若团队不接受 npx 远程包，可改用本地已安装的 Playwright/浏览器或手工截图完成同一验证回路（SKILL.md 的验证项本身不强制必须用 npx）。

5第二遍独立确认

[ok] 「单一技法 + 0.8–2.5s + clearspace」是否只是口号 — Core principle 段给出五条硬约束，且末尾 checklist 第 5 条把「Reveal ≤2.5s；if audio present, the settle lands on the sound-logo peak」列为完成条件；logo-patterns 亦含 timing tables 与 clearspace 规则。约束有落地位置。
[ok] 冻结 harness（?t=N）在四种技法下是否都有写法 — SKILL.md 的 harness 代码块内按技法给分支注释：CSS（animationDelay/playState）、GSAP（tl.pause(); tl.seek(T)）、SMIL（pauseAnimations/setCurrentTime）、Lottie（setFrame(round(T*fps))），并统一设 window.__ready = true。与 references 的技法清单一致。
[discrepancy] scripts/ 位置语义（首遍称为 Packaged helper） — SKILL.md 写 'Packaged helper (`scripts/`)'，但该 scripts/ 是**仓库根**目录（motion-design/scripts/），并非 skill 目录内（skills/logo-animation/ 下无 scripts/）。同仓库 after-effects 反而自带 skills/after-effects/scripts/*.jsx。因此若按单 skill 粒度安装（如 skills add 只取某 skill 目录），`scripts/seek-shot.sh` 的相对路径可能解析不到；用户在仓库根工作时路径成立。此非安全项，但会影响「照抄命令能否跑通」。
[discrepancy] 「one CDN GSAP <script>」与实际示例是否一致 — SKILL.md 第 102 行写交付可用 inline SVG + reveal（CSS 或 one CDN GSAP `<script>`），但 references/logo-patterns.md 中 GSAP 相关示例全部是 ES import（`import gsap from "gsap"`），全文没有任何 GSAP 的 CDN URL；文件里唯一的 CDN 地址是 dotlottie 的 jsdelivr ESM。属文档措辞与示例不齐（不影响功能，照 import 写法走需要打包器或在浏览器用 importmap）。
[ok] 外部依赖是否有遗漏（隐藏网络调用） — 对所有 skills/ 目录 grep cdn./unpkg/esm./http(s):// 仅命中 logo-patterns.md:161 的 jsdelivr 与两处 iart.ai UTM 链接；npx 命令仅出现在 scripts/seek-shot.sh 与 SKILL.md 的 playwright 示例行。无其他端点。
[ok] 安全面：凭证/环境变量/任意代码执行 — 脚本仅有 set -euo pipefail、路径拼接与两个外部命令（npx/ffmpeg），无 env/API_KEY/secret 读取，无 eval/exec，无 shell 表达式求值用户输入；SKILL.md 无任何凭证指令。第一遍判定的「无凭证读取」成立。
[ok] reduced-motion 是否真的三条路都有落地 — SKILL.md：CSS 示例含 @media (prefers-reduced-motion: reduce) 关动画并给终态；Lottie 示例 reduce 时 setFrame(totalFrames-1)；logo-patterns 第 7 节列出 CSS/SVG、Lottie、Video（poster 图）、JS gate（matchMedia 分支）四类回退。checklist 第 4 条亦要求「static end-frame fallback shipped」。
[ok] 与 remotion-video 的路由声明 — SKILL.md 第 100 行明确视频 logo sting 走 remotion-video 的 verify loop；remotion-video 侧的 SKILL.md 亦把自己定义为 heavy tier 的对应物（'this is the heavy-tier counterpart to a web scene's ?t=N'），两端互指一致。

6结论

把「动画好不好」转成机械可核的验收项（单一技法、≤2.5s、几何不变形、clearspace、reduced-motion、音画对齐），可交付性远超纯原理型 skill。

产出物自带验证接口：?t=N 冻结 harness + window.__ready，使任意时刻可被无头浏览器确定性截图，而不是让模型自称完成。

reference 密度高且可复用：六种技法都有可运行代码，含无 GSAP 的 flubber 回退与 Lottie 双播放器示例。

无障碍不是可选项：三档交付（CSS/SVG、Lottie、视频 poster）都写了 reduced-motion 回退，且 checklist 强制要求静态终帧兜底。

轻量档克制：web 交付明确只要一个自包含 HTML，避免为小活引入构建系统；重活才路由到 Remotion。

适合：适合：已有品牌 SVG/Lottie 资产、需要产出 web 落地页 logo 揭示、App 启动动画/加载循环、或品牌 sting 的动效与前端人员；也适合想给 agent 建立「动效交付必须可截图验证」纪律的团队（其 ?t=N harness + 三帧截图回路可直接照搬）。对音标（sound-logo）作业尤其对口，因为它把落定帧对齐音频峰值写成了硬约束。

不适合：不适合：① 需要完整视频剪辑/多镜头叙事的场景（应走 remotion-video 或剪辑类 skill，本 skill 只覆盖标识那一小段）；② 无 npm 出网或禁止远程包的环境（验证回路需改造）；③ 需要 After Effects 内表达式级操作的项目（应走同仓库 after-effects skill）；④ 期望 skill 自动产出品牌创意方向的人——它教技法与验收，不代替 art direction（那是 motion-art-direction 的活）。

安装 agent 直装可复制

① 本站镜像更新 2026-09-15

方式 A · 人下载镜像包下载 logo-animation.tar.gz

sha256: bd1880e7aef3cfb7…

方式 B · JSON 格式安装指南，复制给 agent

安装指南

agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。

② 上游 GitHub · 原始来源

能访问 GitHub？直接去上游安装（实时版，可能已更新）GitHub 原始 ↗

本页镜像锁定 commit 3c129f769d；上游为实时仓库。

来源信息 GitHub 原始

作者 / 仓库iart-ai / iart-ai/motion-design-skills

原始 GitHubiart-ai/motion-design-skills ↗

Stars29

最近推送2026-06-22

本 skill commit3c129f769d

本站信息

收录日期2026-09-06

分类内容创作

侦查报告AI 侦查 · 2 遍 · 2026-09-06

本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。

logo-animation

1实现原理 · 为什么它能做到

2核心能力

3外部依赖

4风险提醒 风险提醒：橙色 · 评估后使用

5第二遍独立确认

6结论

4风险提醒风险提醒：橙色 · 评估后使用