Communitygithub.com

itswenxin/motion-replicate

ユーザーがPinterest、Behance、Dribbble、Vimeo、YouTubeのリンクや直接の動画ファイルを貼り付け、そのアニメーションをAfter Effectsで再現したい場合に使用します。リファレンスを取得・サンプリングし、タイミングとモーションを測定し、編集可能なキーフレームで再構築し、フレームごとに比較して一致するまで反復します。

motion-replicate とは？

Motion Replicate（モーション・レプリケート）は、Pinterest、Behance、Dribbble、Vimeo、YouTubeなどの動画リンクや直接アップロードされた動画ファイルから、アニメーションのタイミングと動きを計測し、After Effects上で編集可能なキーフレームとして再現するAIエージェントスキルです。Claude Code、Cursor、CodexなどのAIコーディングエージェントと連携して動作し、エージェントがAEスクリプトやコマンドを実行できる環境で使用します。スキルの中核は「計測してから構築する」というルールにあり、リファレンス動画からフレームごとに位置・スケール・回転・イージングなどを測定し、その数値をそのままAEのキーフレームに反映します。また、フレーム比較画像を生成して一致度を確認しながら反復改善を行い、最終的には測定値とキーフレーム情報を記録した後知見を保存します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/itswenxin/motion-agent/tree/HEAD/agent-skills/motion-replicate
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

Motion Replicate — リファレンスリンクから編集可能なAE再構築へ

最初に skill/SKILL.md の「复刻参考片失败的五个根因」と「复刻参考片：先逐帧量，再动手」のセクションを読んでください。 ルール: 計測してから構築すること。 再構築のすべての数値はリファレンスから取得します。

1. リファレンスを取得する

python3 tools/fetch_reference.py "<link>" --slug <short-name>
  • Pinterest (pin.it または /pin//): Pinterestの公開ウィジェットAPIを通じてピンの動画をダウンロードします（アイデア/ストーリーピンを含む）。ピンが画像のみの場合、ツールはその旨を伝え、外部リンクを表示します。実際の動きは通常そこにあります（InstagramやBehanceの投稿）。そのリンクを辿ってください。
  • 直接動画URL (.mp4/.mov/.webm/.gif): そのままダウンロードします。
  • Behance、Vimeo、YouTube、ポートフォリオサイト: コマンドラインからのリクエストを拒否することが多いです（終了コード3）か、プレーヤーを埋め込みます。その場合はダウンロードせずにブラウザで確認します:
    1. プロジェクトページをブラウザで開き、プレーヤーをリストします: [...document.querySelectorAll('iframe,video')].map(n => n.src || n.currentSrc)
    2. プレーヤーURL自体（例: https://player.vimeo.com/video/<id>）を開き、tools/browser_frame_sampler.js をブラウザのJavaScriptツールに貼り付け、await motionAgentSample({ fps: 12 }) を実行し、スクリーンショットを撮ります。タイムスタンプ付きのコンタクトシートとフレームごとのモーションエネルギーが取得できます。await motionAgentShowFrame(t) + スクリーンショットで、測定用の1フレームフル解像度の画像が得られます。
    3. スクリーンショットと返されたJSONを refs/<slug>/ に保存します。
  • ログイン、ペイウォール、ボットチェックを回避したり、保護されたファイルを取得するためにヘッダーを偽装したりしないでください。 ページがブロックする場合は、ブラウザルートを使用するか、ユーザーにクリップのダウンロードを依頼してください。

refs/ 以下のすべてはgit管理対象外です。リファレンス動画は作成者のものです。コミットしたり、フレームを公開したりしないでください。作成者のクレジットは meta.json に記録してください。

2. 計測する

python3 tools/analyze_reference.py refs/<slug>/reference.mp4 --fps 24

refs/<slug>/ANALYSIS.md を読んでください。サイズ、フレームレート、持続時間、ホールド、カット、最も速い瞬間、ループの有無、パレット、コンタクトシート、モーションエネルギープロットが含まれています。次に、frames/ から各動きのある要素を計測します（ピクセル位置、スケール、回転を開始時、終了時、変曲点で計測。tools/measure.py が役立ちます）。短い仕様を書いてください: 要素 → キー（時間、値） → 速度形状（イージーイン/アウト/両方、オーバーシュート）。

構築する前に、計測した内容とどのように構築するかを3～5行でユーザーに伝えてください。

3. After Effectsで再構築する

  • リファレンスと同じサイズとフレームレートのコンポジションを作成します（小さいリファレンスの場合は2倍に拡大し、その旨を伝えてください）。
  • 作業中はコンポジションビューアを開き、プレイヘッドを動かしながら作業してください。ユーザーが確認できるようにします。
  • 最初はベジェイージング付きのキーフレームを使用します（計測した速度曲線を再現する明示的な速度/影響）。キーフレームでできない場合のみエクスプレッションを使用します。
  • コンポジションとレイヤー名は短い単語一つにします。
  • 構造を変更する前にバックアップを保存します。

4. 比較して反復する

リファレンスフレームと同じタイムスタンプをレンダリングし、並べて表示します:

python3 tools/sheet.py "<our frames glob>" refs/<slug>/compare.png --pair "refs/<slug>/frames/f_*.jpg"

タイミング（ホールドとカットが同じフレームに収まっているか）、位置（同じスケールで数ピクセル以内）、速度形状、色を確認します。最も大きな不一致から修正し、再度比較します。各ラウンドの結果を比較シートとともに報告します。ユーザーが満足するまで続けます。

5. 学んだことを保持する

ユーザーがレンダリングを確認したら、agent-skills/motion-retrospective を実行します。このケースでは、元の作成者とソースリンクのクレジットを記録し、再構築したフレームのみを含め、測定値とそれを再現したキーフレームを記録します。

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

itswenxin/ae-gsap-motion

Translate GreenSock/GSAP animation thinking into Adobe After Effects keyframes, controller nulls, text animators, expressions, and ExtendScript. Use after AEMotion when the user asks for GSAP-like professional animation, GreenSock-style sequencing, timeline/stagger/ease/scrub/Flip/SplitText patterns in AE, or asks to convert GSAP motion ideas into AE implementation.

itswenxin/motion-agent-best-practices

Motion Agent routing and best practices for AI-assisted Adobe After Effects production. Use when Codex or another coding agent needs to plan, build, modify, QA, render, or document motion design work with Motion Agent; use as the default entry point when unsure which Motion Agent skill applies.

itswenxin/motion-retrospective

Run immediately after the user confirms an After Effects piece is final (they approve the render or export, say it is done, or ship it). Replays every bridge operation behind the piece, distills reusable recipes, pitfalls and rules into the case library and skill/SKILL.md, and publishes them to the repository.

関連スキル

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community