1仕組みと動作原理

本質は「技法選定＋納品規約＋検証ループ」の3段構成プロンプトです。ユーザー／モデルに対して3種のリビール技法から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必須といった判定可能な制約に置き換えることです。後続のチェックリストはすべてこれらの項目を検証します。

技法レイヤーでは6行のマッピング表（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、グループ単位の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`.

インラインSVG＋@keyframes draw＋@media prefers-reduced-motion（アニメーションを停止し静的な最終状態を表示）で構成された実行可能な最小サンプルが付属しており、「コピーするだけで実用的な成果物が得られる」学習密度を備えています。

音と映像の同期は推奨ではなく必須制約として扱われます。ロゴの着地フレームは必ずオーディオのアクセントに一致させ、音声タイミングを先に決めてからリビール時間を決定します。

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.15秒）でビートに合わせる手法を提示しています。これはサウンドロゴなどのブランディング制作において一般的でありながら見落とされがちな検収項目です。

納品ルートは対象に応じて3段階に分類され、それぞれ実装スタックを提示します：WebはインラインSVG+CSS/GSAP、プロダクト/アプリはLottie（Bodymovinでエクスポート、dotlottie-web/lottie-webで再生）、動画はRemotionまたはAfter Effects（2倍プリレンダリング）。

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設定時は自動再生を行わず、ロード後にsetFrame(totalFrames-1)を呼び出して静的な最終フレームを表示します。

検証ループの核となるのは「固定フレーム」です。出力されるHTMLには?t=N seekハーネス（アニメーションを一時停止して時間をNに設定）を組み込む必要があり、任意のタイムスタンプで決定論的なスクリーンショット取得を可能にします。

skills/logo-animation/SKILL.md

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

SKILL.mdでは4つの技法それぞれに対応した固定処理の記述（CSSはanimationDelay=-T + paused、GSAPはtl.pause()/seek(T)、SMILはpauseAnimations()/setCurrentTime(T)、LottieはsetFrame(round(T*fps))）を提示し、ヘッドレス待機用にwindow.__readyを共通提供します。単にアニメーション原理を解説するスキルと異なり、成果物自体に検証用インターフェースの実装を要求するのが本スキルの特徴です。

検収は自己申告ではなくスクリーンショットと反復ループで行います。?t=0、中間点、終了時点の3つの固定フレームでスクリーンショットを取得して再現性と欠陥を検証し、基準を満たさなければパラメータを修正して同一時刻を再撮影します。

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/）を用意しており、本スキルはそのうちseek-shot.sh（固定および撮影）とcontact-sheet.sh（1枚の比較画像に結合）の2つを明示的に参照しています。

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=$#` で横方向に結合します。階層選定：本スキルのWebルートはLight（単一HTML + ?t=N）に該当し、動画ロゴスティンガーはremotion-videoのHeavyループへ明示的に移管されます。

関連スキルとの明確なルーティングが存在します。Web/SVG/Lottieは本スキルのスタンドアロンHTMLループを使用し、動画スティンガーは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つのスキルが「納品および検証」の共通パラダイムを共有しており（color-motionやmotion-backgroundも同様にseek-shot/contact-sheetを参照）、本スキルはブランドアイデンティティという特定領域を担当します。

2コア機能

016種類のロゴリビール技法の選定と実装（ストローク描画／マスクワイプ／ビルドオン／モーフィング／シームレスループ／ワードマーク文字単位）

02単一技法の規律＋再生時間枠（0.8〜2.5秒）＋ブランドジオメトリの変形禁止＋クリアスペースの保護

03アクセシビリティ必須要件：prefers-reduced-motion下での静的最終フレーム表示（CSS/GSAP/Lottieの各実装パターンを提供）

04決定論的固定ハーネス：?t=Nで指定時刻に停止させ、ヘッドレスブラウザによる高精度スクリーンショットを実現

053段階の納品ターゲットマッピング（WebインラインSVG/CSS/GSAP、プロダクトアプリ向けLottie、動画向けRemotion/AE）

06サウンドロゴ同期：着地フレームを音声ピークに一致＋オーバーシュート着地

07単一ファイル納品規約（単一の自己完結型.html、駆動メカニズムはCSS keyframesまたは単一のGSAPタイムラインのいずれか1種類のみ）

08仕上げチェックリスト（5項目）：単体でエラーなく起動可能、単一ドライバー、3フレームのスクリーンショット検証、reduced-motionと静的最終フレーム、再生時間と音画同期

3外部依存関係

Kind	Dependency / Endpoint
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推奨統制措置と判定根拠

安全運用のための推奨統制措置

Agent 向け

段階的・都度認可、サンドボックス推奨

管理者向け

承認フロー、ロールバック可能、全履歴監査

判定根拠（ファイルパスと抜粋）

scripts/: ローカルスクリプトまたはコマンドの実行: npx -y playwright screenshot …（seek-shot.sh / SKILL.md内のインラインコマンド）：初回実行時にnpmから取得
网络端点: 外部ネットワークアクセスの宣言: 本スキルのスクリプト自体は業務APIを呼び出しません。ネットワークアクセスはツールチェーンに起因します（npxによるPlaywright/npmパッケージおよびChromiumバイナリの取得／レジストリ）
本地工作目录: ファイルの読み書きと成果物出力: frame-<t>.png（seek-shot.shがカレントディレクトリにスクリーンショットを出力）

監査ノート： 理由：スキル本体はプロンプトとドキュメントですが、その検証ループはリモートパッケージおよびミラーに依存しています（確認なしでPlaywrightをインストールし初回にChromiumバイナリをダウンロードする `npx -y playwright screenshot` や、納品サンプル内の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.5秒以内、形状維持、クリアスペース、reduced-motion、音画同期）に変換し、単なる理論解説スキルを大幅に上回る納品品質を実現します。

成果物自体に検証インターフェースを内蔵：?t=N固定ハーネスとwindow.__readyにより、モデルの自己申告に頼らず、任意の時刻をヘッドレスブラウザで決定論的に撮影可能です。

高いリファレンス密度と再利用性：GSAPを用いないflubberフォールバックやLottieのデュアルプレイヤー例を含め、6つの技法すべてに実行可能なコードを提供しています。

アクセシビリティの義務化：3つの納品形態（CSS/SVG、Lottie、動画ポスター）すべてにreduced-motionフォールバックを用意し、チェックリストで静的な最終フレームの担保を強制しています。

軽量層への配慮：小規模なタスクに対してビルド環境の導入を避けるため、Web納品は自己完結型の単一HTMLのみに制限し、高負荷な処理のみをRemotionへルーティングします。

最適な用途： 推奨対象：既存のブランドSVG/Lottieアセットを所有し、Webランディングページ用のロゴリビール、アプリ起動アニメーション／ローディングループ、ブランドスティンガーを制作するモーションデザイナーやフロントエンドエンジニア。また、エージェントに対して「モーションの納品物はスクリーンショットで検証可能でなければならない」という規律を確立したいチーム（?t=Nハーネスと3フレーム撮影ループをそのまま流用可能）。着地フレームをオーディオピークに合わせることが必須制約となっているため、サウンドロゴの制作に特に適しています。

不向きな用途： 非推奨対象：①完全な動画編集やマルチカット構成のストーリーテリングが必要な場面（remotion-videoや編集用スキルを使用してください。本スキルはロゴアニメーション部分のみを対象とします）、②npmの外部接続がない環境やリモートパッケージが禁止されている環境（検証ループの改修が必要）、③After Effects内でのエクスプレッションレベルの操作が必要なプロジェクト（同一リポジトリのafter-effectsスキルを使用してください）、④スキルにブランドのクリエイティブ方針の自動策定を期待する場合（技法と検収を指導するものであり、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

Agent はこの JSON ガイドから自動的にダウンロードして検証します。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 3c129f769d.