motion2code

Motion2Code

動画が仕様書ですが、あなたはそれを視聴できません。この作業は再構築として進めてください。クリップを目で確認できる画像に変換し、何がいつ起きるかを書き留め、図形を作り、ひとつのクロックで動かし、最後に元動画と画像を並べてすべての瞬間を検証します。動画を見た記憶を頼りにアニメーションを作ってはいけません。

ワークフロー

1. ソースを調べる。 python3 scripts/study_video.py source.mp4 -o study/ を実行すると、0.25 秒ごとのフレーム、各カット前後のフレーム、コンタクトシート、正確な単色パレット、ソースがすでにループしているかどうかが保存されます。シートを開いてから、フレームを確認します。動画の隣にプロンプトファイルがあれば、次に読みます。そこには正確な文言が記載されています。
2. ショットリストを書く。 ビートごとに1行で、時間範囲、各図形の動き、イージング、次にどう変化するかを記します。ステージのサイズ（1920x1080 または 1080x1920）と実際の長さ（ffprobe で確認。例：15.10 s は 15 秒のループを意味します）も記します。references/study-the-source.md を参照してください。
3. ステージを構築する。 templates/index.html を基に、ソースと同じ解像度のインライン SVG を1つ用意し、各図形をそれぞれの原点を中心に描画します。サンプリングしたパレットの単色塗りを使い、文字には正確な字形に最も近い Google Fonts のサブセットを使います。
4. 1つの GSAP タイムラインでアニメーションを作成する。 ショット用のトゥイーンに加え、プロシージャルな部分（パーティクル、モーフィング、物理演算）には純粋な draw(t) 関数を用意し、同じクロックから呼び出します。自分が想像した動きではなく、フレームのタイミングに合わせます。references/animation-architecture.md と references/motion-vocabulary.md を参照してください。
5. コードでループを閉じる。 ソースがループしていない場合でも、最後の瞬間は冒頭のフレームと完全に一致するようにします。references/seamless-loop.md を参照してください。
6. 検証して、修正し、繰り返す。 python3 scripts/frame_diff.py source.mp4 index.html -o diff/ を実行すると、ソースとコードの比較画像と、時点ごとのスコアが書き出されます。比較画像を開き、最も差の大きい箇所から修正してから、--every 1/24 --start a --end b を指定してトランジションを拡大確認します。 python3 scripts/check_anim.py index.html --runtime で、契約、ループの継ぎ目、決定性、コンソールエラー、ネットワークを確認します。どちらも問題がなくなるまで納品してはいけません。references/verification.md を参照してください。
7. 納品する。 index.html、templates/compare.html を基にした compare.html、そして求められた場合は検証用動画を用意します。 python3 scripts/render_anim.py index.html -o anim.mp4 を実行してから、 python3 scripts/side_by_side.py source.mp4 anim.mp4 -o side_by_side.mp4 --html index.html を実行します。
8. 実際のサイトは任意です。 インターフェースの録画の場合は、忠実な再現を作成してから、templates/site.html を基に site.html を作成します。スクロールは ScrollTrigger に、見せかけのクリックは実際のボタンに置き換えます。 references/interfaces-and-sites.md を参照してください。

スクリプトには Python 3.9 以降、ffmpeg、およびブラウザーを起動する処理で Playwright が必要です （uv run --with playwright python scripts/...、または pip install playwright && python -m playwright install chromium）。 このスキルのディレクトリから実行するか、フルパスを指定してください。

ページの契約

window.anim = { tl, duration, seek(t), play(from), pause() }   // seek(t) is a pure function of t

• index.html?t=6.5 は 6.5 秒時点で停止します。?external=1 を指定すると自動再生しません（compare.html とスクリプトが制御します）。パラメーターを指定しない場合は自動再生し、無限にループします。
• フォントの読み込みが完了し、フレーム 0 が描画されると、<html data-ready="1"> になります。レンダラーはこれを待ちます。
• frame(duration) は frame(0) と一致し、frame(duration - 1/24) はそこから1ステップ分だけ離れています。
• 自己完結型にします。インライン SVG、cdnjs の GSAP 3、モーフィングが必要な場合のみ jsdelivr の flubber、Google Fonts を使います。それ以外は読み込みません。

厳守事項

• 指定されたソース動画のみを使用してください。 再生成したり、「より良いバージョン」を取得したり、フレームをトレースしてページに使ったりしないでください。アニメーション内で <img>、<video>、SVG の <image>、canvas の drawImage、ラスターデータ URI を使用しないでください。
• ソースのプロンプトにある語句をそのまま使ってください（プロンプトがない場合は動画内の語句を使います）。動画内で誤記されていても、そのままにしてください。UI の録画にある意味不明な創作語は、平らなバーにするか削除してください。
• 平面図形は SVG で作成してください。 塗りつぶしは単色にし、サンプリングした 16 進カラーを使用してください。ソースにないグラデーション、影、フィルターは使わないでください。ステッカーの輪郭には stroke-linecap="round" を指定してください。
• GSAP のタイムラインを唯一のクロックとして使ってください。 requestAnimationFrame ループ、setTimeout による演出、CSS アニメーション、ビジュアルを駆動する Date.now() は使用しないでください。乱数はシードを設定し、事前に計算してください。
• ループはコードで実装してください。 ソースが冒頭のフレームに戻らない場合は、冒頭に戻る短く自然なトランジションを追加してください。継ぎ目は数値で確認します。
• すべての場面をソースと並べて確認してください。 少なくとも 0.5 秒ごとに、またすべてのトランジションとループの継ぎ目ではフレームごとに確認してください。比較画像なしで「合っている」と判断するのは確認とはみなしません。
• タイミングはソースに合わせてください。 フレームから測定し、ビートを短縮、延長、並べ替えしないでください。

リファレンスの参照先

タスクに必要なものだけを読みます。

ファイル	読むタイミング
references/study-the-source.md	着手時：フレーム、カット、パレット、ショットリスト、語句、長さ、アスペクト比
references/animation-architecture.md	作成時：ステージ、図形の原点、タイムラインと draw(t)、キーフレームヘルパー、モーフ、フォント、決定性
references/motion-vocabulary.md	動きの感触を合わせるとき：スナップ、スクワッシュとストレッチ、残像、弾性のある収束、アイリスワイプ、モーフチェーン
references/seamless-loop.md	ソースがループしない場合、または継ぎ目で飛ぶ場合
references/verification.md	確認と検証動画：frame_diff、compare.html、check_anim、レンダリング、並べての比較
references/interfaces-and-sites.md	ソースがウェブサイト／アプリの録画の場合、または実際に site.html が必要な場合

テンプレート：templates/index.html（仕様、小さなループの例）、templates/compare.html（動画とコードを動画のクロックに同期して並べて表示、フレーム送り、オニオンスキン）、templates/site.html（ScrollTrigger のピン留めとスクラブ、メニュー、タブ、フリップカード、ドラッグ可能なスライダー、カートのカウンター、キーボード、動きを減らす設定）。

出力要件

• index.html を納品してください（インターフェースの場合は compare.html と site.html も追加）。何をどのように確認したかを記載してください。frame_diff の時刻、最悪スコアとその内容、check_anim.py --runtime の結果、ページサイズを含めます。
• ソースと異なる点（簡略化したテクスチャ、統合したビートなど）は正直に列挙し、「ピクセル単位で完全一致」とは言わないでください。
• 名前は読みやすくしてください。キャラクターやオブジェクトごとにグループを分け、内容がわかる id を付け、パレットを定数として定義し、ショットの時間範囲をコメントに記載してください。デザイナーがすべてを読み込まずに、タイミングや色を調整できるようにします。