Home / All Skills / Content & Media Creation / logo-animation
English (EN)简体中文 (ZH)日本語 (JA)
Content & Media Creation · iart-ai/motion-design-skills

logo-animation

This skill should be used when the user asks to "animate our logo", "make a logo intro/stinger", "build a brand reveal", "create an app splash animation", "loop a loader logo", "draw on our SVG mark", "morph an icon into the wordmark", or "sync the logo to a sound-logo". Covers web (SVG/Lottie), video, and app-splash delivery.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Author iart-aiGitHub iart-ai/motion-design-skills ↗Stars 29License MIT（仓库根 LICENSE，'MIT License / Copyright (c) 2026 iart.ai'；GitHub API spdx_id = MIT；.claude-plugin/plugin.json 亦声明 "license": "MIT"）Commit 3c129f769d
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Essentially a three-stage prompt pattern: "Technique Selection + Delivery Contract + Verification Loop". It forces the user/model to pick exactly one of three reveal techniques, constrains the output format, and verifies results via a screenshot-freezable feedback loop.

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.
What is happening here: Converting all subjective "looks good" standards into verifiable constraints—single technique, duration window, zero geometric distortion, clearspace protected from motion debris, and mandatory reduced-motion final state. All subsequent checklists verify these rules.

The technique layer provides a six-row mapping table (stroke draw-on / mask wipe / build-on / morph / idle loop / wordmark), binding each row to "target element + mechanism" so choices are grounded in logic rather than intuition.

skills/logo-animation/SKILL.md
| Stroke draw-on | Line marks, monograms, signatures | `stroke-dashoffset` 1→0 |
The mechanism column directly provides implementation primitives (stroke-dashoffset, clipPath/mask, per-group opacity+transform, GSAP MorphSVG or matched-path interpolation, loop transforms, per-glyph mask/translate), closing the loop between "what to choose" and "how to code" at the same decision point.

The key technical element of the web track is pathLength normalization: normalizing the path length of arbitrary geometries to 1 so the same dasharray/dashoffset values work across all strokes.

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`.
Accompanied by a complete, runnable minimal example (inline SVG + @keyframes draw + @media prefers-reduced-motion to disable animation and display the final state directly), offering copy-paste-ready educational density.

Audiovisual sync is treated as a hard constraint rather than a suggestion: the logo's settle frame must hit the audio accent exactly, determining audio timing before reveal duration.

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.
Also provides concrete tactile execution: a 1.04 → 1.00 overshoot-and-settle (~0.15s) snapped to the beat. This is a common yet frequently overlooked acceptance item in sound-logo brand deliverables.

Delivery paths are divided into three tiers based on target, each with its own implementation stack: Web inline SVG+CSS/GSAP, Product/App using Lottie (exported via Bodymovin, played via dotlottie-web/lottie-web), and Video using Remotion or After Effects (2x pre-render).

skills/logo-animation/SKILL.md
- **Video intro/outro**: Remotion (React) or After Effects render to ProRes/H.264. Pre-render at 2x for crispness.
The Lottie branch includes reduced-motion guard code: does not autoplay when reduce is active, and immediately calls setFrame(totalFrames-1) after load to statically display the final frame.

The core of the verification loop is the "frozen frame": output HTML must include a built-in ?t=N seek harness (pausing animation and seeking time to N) so any timestamp can be deterministically captured via screenshots.

skills/logo-animation/SKILL.md
Include the freeze harness below, matched to the technique, so any moment can be screenshotted deterministically.
SKILL.md provides frozen implementations for four techniques (CSS uses animationDelay=-T + paused; GSAP uses tl.pause()/seek(T); SMIL uses pauseAnimations()/setCurrentTime(T); Lottie uses setFrame(round(T*fps))), uniformly exposing window.__ready for headless waiting. This distinguishes this skill from conceptual animation skills: deliverables must come with verifiable interfaces.

Acceptance relies on screenshot-based iterative loops rather than self-declaration: capture ?t=0, midpoint, and end freeze-frame screenshots to inspect fidelity and artifacts, tweaking parameters and re-capturing the same timestamps if failing.

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.
Provides an executable command `npx playwright screenshot --wait-for-timeout=500 "file://$PWD/logo.html?t=1.1" frame-mid.png`; the repository also provides scripts/seek-shot.sh for multi-timestamp batch frozen screenshotting.

The repository provides a shared script toolbox (root scripts/) for "deliver-and-verify", explicitly referencing two scripts: seek-shot.sh (freeze and screenshot) and contact-sheet.sh (tile into a comparison sheet).

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`.
Script mechanics: seek-shot.sh runs `npx -y playwright screenshot --wait-for-timeout=600 "file://${abs}?t=${t}" "$out"` across timestamps; contact-sheet.sh uses `ffmpeg -filter_complex hstack=inputs=$#` for horizontal stitching. Tier selection: the web track here falls under the Light tier (standalone HTML + ?t=N), while video logo stings are explicitly handed off to the Heavy loop in remotion-video.

Features explicit routing alongside sibling skills: web/SVG/Lottie uses this skill's standalone-HTML loop, while video stings route to remotion-video's rendering loop.

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 skills in the same repository share a common "deliver and verify" paradigm (color-motion and motion-background also reference seek-shot/contact-sheet); this skill is dedicated to the vertical domain of brand identities.

2Core Capabilities

01Selection and implementation of six logo reveal techniques (stroke draw-on / mask wipe / build-on / morph / seamless idle loop / per-glyph wordmark)
02Single-technique discipline + duration window (0.8–2.5s) + brand geometry preservation + clearspace protection
03Accessibility hard requirement: display static final frame under prefers-reduced-motion (recipes provided for CSS, GSAP, and Lottie)
04Deterministic freeze harness: ?t=N pauses at specified timestamp for precise headless browser screenshotting
05Three-tier delivery target mapping (Web inline SVG/CSS/GSAP, Product App Lottie, Video Remotion/AE)
06Sound-logo synchronization: settle frame aligned with audio peak + overshoot-and-settle
07Single-file delivery contract (one self-contained .html driven by exactly one mechanism: CSS keyframes or a single GSAP timeline)
08Sign-off checklist (5 items): standalone executable without errors, single driver, three-frame screenshot inspection, reduced-motion static fallback, duration and audiovisual alignment

3External Dependencies

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

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
  • scripts/: Executing local scripts or commands: npx -y playwright screenshot … (seek-shot.sh / inline commands in SKILL.md): pulls from npm on first run
  • 网络端点: Declaring external network access: The skill scripts themselves do not call business APIs; network surface comes from toolchains: npx pulling Playwright/npm packages and Chromium binaries (registry)
  • 本地工作目录: File read/write and artifact output: frame-<t>.png (seek-shot.sh outputs screenshots in current directory)
Audit Notes: Reason: The skill itself consists of prompts and documentation, but its verification loop depends on remote packages and mirrors—`npx -y playwright screenshot` (unprompted installation of Playwright and initial Chromium binary download) and jsdelivr CDN modules in delivery examples; classified as Orange tier per the paradigm "depends on third-party plugins, mirrors, or remote packages". Note: No credential reading, environment variable reading, business API calls, bulk scraping, or bypass behaviors, so it is not Red tier. Trigger condition: Remote downloads occur upon installing/first running the verification loop; no network activity occurs when simply authoring HTML or manually viewing in a browser. If the team forbids npx remote packages, local pre-installed Playwright/browsers or manual screenshots can satisfy the same verification loop (the verification criteria in SKILL.md do not strictly mandate npx).

5Second-Pass Verification

  • [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'），两端互指一致。

6Verdict & Scenarios

  • Translates "good animation" into mechanically verifiable acceptance items (single technique, ≤2.5s, no geometric distortion, clearspace, reduced-motion, audio sync), far exceeding purely theoretical skills in deliverability.
  • Deliverables include built-in verification interfaces: ?t=N freeze harness + window.__ready allow deterministic headless screenshotting at any moment rather than relying on model self-assertions.
  • High reference density and reusability: runnable code for all six techniques, including a non-GSAP flubber fallback and dual Lottie player examples.
  • Accessibility is non-negotiable: all three delivery tiers (CSS/SVG, Lottie, video poster) include reduced-motion fallbacks, enforced by checklist static final-frame guarantees.
  • Disciplined lightweight tier: web delivery strictly requires a single self-contained HTML file to prevent build-system bloat for small tasks, routing heavy workloads to Remotion only when necessary.
    • Best for: Ideal for: motion designers and frontend engineers with existing brand SVG/Lottie assets needing web landing page logo reveals, app splash/loader loops, or brand stings; also ideal for teams wanting to establish a "motion deliverables must be verifiable via screenshots" discipline for AI agents (the ?t=N harness + 3-frame screenshot loop can be directly adopted). Highly suitable for sound-logo tasks, as it treats landing frame alignment with audio peaks as a strict constraint.
    Not for: Not suitable for: 1) Scenarios requiring full video editing or multi-shot narratives (route to remotion-video or video editing skills; this skill only covers the mark reveal itself); 2) Environments without npm egress or forbidding remote packages (the verification loop requires adaptation); 3) Projects requiring expression-level After Effects operations (route to the after-effects skill in the same repo); 4) Users expecting the skill to generate creative brand direction automatically—it teaches technique and verification, not art direction (which belongs to motion-art-direction).
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload logo-animation.tar.gz
    sha256: bd1880e7aef3cfb7…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 3c129f769d.