コーディングエージェントに、モーションビデオをクリーンで編集可能なコードに再構築させるスキル：インラインSVGグラフィックとGSAPタイムラインを使用し、フレーム単位の位置合わせ、シームレスなループ、元ビデオとの並列比較が可能。Webサイトやアプリのスクリーンレコーディングは、実際にスクロールやクリックができるページとして作成することもできます。
スター数 303（+8 / 24時間）
理由
- エージェントはビデオを直接見られないため、まず study_video.py を使用してクリップを 0.25 秒ごとのフレーム、ハードカット前後のフレーム、コンタクトシート、正確な単色パレットに分解し、元動画がループするかどうかを判断します
- frame_diff.py は任意の時点で元動画とコードを並べて出力し、スコアリングを行い、最も差が大きい 5 箇所をリストアップします。check_anim.py はページ規約、外部スクリプトのホワイトリスト、ビデオやビットマップの隠れた埋め込みの有無、およびループの継ぎ目をチェックします
- 厳格なルール：指定された動画のみを使用し、再生成・埋め込み・フレームトレースは行わず、テキストは元の指示通りに記述します。gallery には 6 件の再構築例があり、元動画は fal 上の MiniMax H3 Max で生成されました
使い方
- Claude Code：claude plugin marketplace add lovisdotio/motion2code を実行後、claude plugin install motion2code@motion2code を実行します。Codex、Cursor、Gemini CLI などでは npx skills add lovisdotio/motion2code を使用します
- エージェントに「clip.mp4 をループ可能な SVG + GSAP アニメーションとして再構築して」や「このアプリのスクリーンレコーディングを実際のWebサイトにして」と指示します。完全な要件は prompts/convert-video-prompt.md に記載できます
- スクリプトの実行には Python 3.9+ と ffmpeg が必要で、ブラウザを開くスクリプトにはさらに Playwright が必要です
リスク
- ルールではフラットなSVGグラフィックと元動画から抽出した単色のみが許可されており、READMEの例はすべてテキストとフラットグラフィックのアニメーションです。実写映像の処理方法については説明されていません
- リポジトリは 10 月 20 日に作成され、ライセンスは MIT です。gallery の元動画は比較用としてのみ 480p で添付されています