lovisdotio/motion2code

これは何？

主な機能

• 01元動画をフレーム、カット位置、パレット、ループスコアに分解して分析します。
• 02単一の GSAP timeline で動かすインライン SVG としてアニメーションを構築します。
• 03window.anim.seek(t) を公開し、フレーム単位の決定論的なレンダリングを可能にします。
• 04元動画とコードの出力を並べて比較し、各時点の差分スコアを表示します。
• 05ループの継ぎ目を測定し、出力を mp4、GIF、または PNG フレームとしてレンダリングします。

ユースケース

• モーションデザインのクリップを、編集可能で解像度に依存しないWebコードとして再現する。
• アプリやWebサイトの画面録画を、スクロールアニメーション付きの動作するインタラクティブなページに変換する。
• AIが生成したアニメーションが、参照動画とフレーム単位で一致するかを検証する。

クイックスタート

1. 1

   コーディングエージェントにスキルをインストールする

   npx skills add lovisdotio/motion2code
2. 2

   Python 3.9 以降と ffmpeg をインストールする（ブラウザベースのスクリプトを使う場合のみ Playwright が必要です）

3. 3

   再構築する前に、元の動画をよく確認する

   python3 scripts/study_video.py clip.mp4 -o study/

使う前に知っておきたいこと

• !スクリプトの実行には ffmpeg が必要です。また、一部のチェックやレンダリングには Chromium と Playwright が必要です。
• !このワークフローは、提供された元動画をもとにコーディングエージェントが実行することを想定しています。

収録されている特集

トピック

よくある質問

motion2code とは？

モーションデザイン動画を、元動画とフレーム単位で照合しながら、ループするインライン SVG と GSAP のコードとして再現するエージェントスキルです。 Motion2Code は、Claude Code、Codex、Cursor などのコーディングエージェント向けのスキルです。エージェントは動画を視聴できないため、クリップの再現を依頼されると、タイミングやイージング、色を推測しがちです。このスキルは、元動画をフレーム、パレット、ループスコアに分解して分析し、単一の GSAP timeline で動かすインライン SVG 図形からアニメーションを構築したうえで、元動画とフレーム単位で比較するワークフローを提供します。

motion2code は無料で使えますか？ライセンスは？

motion2code は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

motion2code は今もメンテナンスされていますか？

活発にメンテナンス中。motion2code の最終コミットは 2026年10月20日 です。

motion2code は何に使えますか？

モーションデザインのクリップを、編集可能で解像度に依存しないWebコードとして再現する。 アプリやWebサイトの画面録画を、スクロールアニメーション付きの動作するインタラクティブなページに変換する。 AIが生成したアニメーションが、参照動画とフレーム単位で一致するかを検証する。

motion2code のインストール方法は？

コーディングエージェントにスキルをインストールする: npx skills add lovisdotio/motion2code Python 3.9 以降と ffmpeg をインストールする（ブラウザベースのスクリプトを使う場合のみ Playwright が必要です） 再構築する前に、元の動画をよく確認する: python3 scripts/study_video.py clip.mp4 -o study/

motion2code はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/lovisdotio/motion2code