pixel2motion

Pixel2Motion（v2）

ピクセル → ベクター → モーション。 このスキルは、2 つの分野を融合します。

1. ベクター化の原則（logo-vectorizer-minimal-smooth に由来）：視覚的な品質確認に合格する、最も複雑さを抑えた編集可能なジオメトリでラスター画像のソースをトレースします。
2. モーションの原則（Disney's 12 Principles of Animation に由来）：根拠に基づくタイミングとイージングを用いて、そのジオメトリをブランドにふさわしい動きに振り付けます。

この融合の基盤にあるのは、最小限で滑らかなジオメトリは、アニメーション可能なジオメトリでもあるという考えです。意味のある 3 つのパーツで構成されたロゴなら、きれいにアニメーションできます。一方、400 個のピクセル状の階段をトレースしたポイントで構成されたロゴは、プロフェッショナルなロゴベクターとして振り付けたり、採用したりできません。そのため、フェーズ 2 では単にベクター化するのではなく、モーションを前提に構造化します。また、アニメーションの最後は、QA で検証済みの静的ベクターと常に完全に一致させる必要があります（Final Frame Contract）。

成果物

• logo.svg — 最終的な静的ベクター（モーション対応の構造）
• logo_motion.html — メインアニメーション、個別のモーションスタディ、再生・スロー・速度調整コントロール、QA フックを備えた、ショーケース形式の単体 HTML
• motion_spec.md — パーソナリティを表す言葉、適用する原則、タイムライン表、イージングトークン、個別のモーション、調整可能なコントロール
• outputs/fit_iterations/*.png + overlay_progress_strip.png — ジオメトリの QA 証跡
• outputs/motion_frames/*.png + motion_strip.png — モーションの QA 証跡
• final_render.png、html_render.png — 静的レンダリング。滑らかさが懸念された場合のパス監査用成果物

---

フェーズ 1 — PIXEL：ソースを読み取り、ブリーフを作成する

1. ラスター画像のソースを分析します。 画像サイズ、モード、アルファ、前景色、背景（透明／単色）を記録します。意味のあるパーツを特定します。たとえば、マークとワードマーク、個々の文字、ドット、スウッシュ、コンテナー、ネガティブスペースなどです。それぞれのパーツが、アニメーションにおける将来のアクターとなります。
2. ジオメトリに着手する前に、モーションブリーフを作成します。
   • パーソナリティ：ブランドを表すモーションの言葉を 3 つ挙げます（例：「素早い、正確、自信に満ちた」）。ロゴそのものの視覚言語（幾何学的＝設計された動き、有機的＝流れる動き、丸みのある形＝柔らかく弾む動き）に加え、ユーザーが伝えたブランドの背景から導きます。言葉からタイミングのスケール、イージングトークン、原則の重点を決める方法については、references/motion-personality.md を参照してください。
   • 使用コンテキスト：スプラッシュ／イントロ（意図を感じさせる 1200–2000ms）、ヘッダーの表示（300–800ms）、ローディング状態（連続ループ）、ホバー時のマイクロインタラクション（150–300ms）。本当に曖昧な場合に限り、ユーザーに確認します。デフォルトでは、スプラッシュ形式で表示した後、静的な終了状態にします。
   • 振り付けのスケッチ：どのパーツを、どのような順序で、どの表示パターンを使って動かすかを決めます（references/reveal-patterns.md を参照）。
3. ブリーフを motion_spec.md に記録します。後続のすべてのパラメーターは、必ずこのブリーフに基づくものとします。

フェーズ 2 — VECTOR：モーションに適した構造で、最小限のジオメトリをトレースする

複雑さを最小限に抑えることを最優先するワークフローに従います。デフォルトではピクセルへの適合度を最大化しないでください。最もシンプルで編集可能なジオメトリから始め、オーバーレイで構造上の不一致が確認された場合に限り、複雑さを上げていきます。

複雑さの段階

ソースに十分合致する最初のレベルを使用してください。

1. 基本図形：円、楕円、長方形、線、単純な円弧、変換。
2. 基本図形の組み合わせ：いくつかの基本図形やマスクを使ったブーリアン演算のような組み合わせ。
3. 少数の曲線による解析的パス：滑らかなリボン、スウッシュ、C字形のマーク、葉、波、盾には、少数の三次セグメントを使います。閉じたリボンや自己交差する可変幅のリボン（∞マーク、筆記体）には、中心線を骨格として使う手順を使用してください — references/ribbon-fitting.md + scripts/fit_ribbon_centerline.py。このレポートでは各交差の弧長比率も出力され、Phase 3 の分割描画に必要になります。
4. 平滑化した輪郭パス：ソースに実際の形状変化がある箇所に限ってノットを増やし、G1接線連続性を保ち、ハンドルの不規則な反転を避けます。
5. トレース由来のパス：より単純な幾何形状では表現できない不規則なシルエットに限ります（測定やスターターマスクには scripts/raster_logo_trace.py を使用）。トレース出力は測定補助であり、そのまま最終アートにしてはいけません。納品前にトレースを平滑化するか、再フィッティングしてください。

より高い複雑さのバージョンで改善されるのがピクセルのアンチエイリアスだけなら、より低いレベルを維持してください。より低い複雑さのバージョンで端点、幅のプロファイル、中心、シルエット、ネガティブスペースが正しくない場合や、エッジに階段状のギザギザが目立つ場合は、1段階上げるか、滑らかな曲線で再フィッティングしてください。正確な字形が必要でない限り、ワードマークにはライブ SVG <text> を優先してください。暫定的な複雑さはソース自体から判断し、その理由を motion_spec.md に記録してください。

滑らかさの合格基準（必須要件）

IoUを使って、ベクター作成の質の低さを覆い隠してはいけません。滑らかなロゴのソースは、滑らかなベクター形状として納品する必要があります。 IoUが数値上高くても、意図した滑らかなエッジに目立つ階段状のギザギザや震えがある、ピクセルグリッドに沿った直交線が含まれる、ノイズの多いトレースノットがある、または200〜400%のズームでビットマップマスクのように見える場合、最終SVGは形状の合格基準を満たしません。

• しきい値マスクによるピクセルグリッド状の輪郭は、測定のスターターや、本当にピクセルアートであるロゴに限って使用できます。通常のロゴでは、Phase 3の前に基本図形、円弧、楕円、三次パスへフィッティングし直してください。
• 主に1px幅の水平線や垂直線のセグメントで構成されたパスは、曲線、スウッシュ、楕円、円、文字、角丸形状に対する滑らかさの合格基準を満たしません。
• 滑らかな部分は、シルエット、幅のプロファイル、極値、ネガティブスペースを維持できる最小数の曲線セグメントで表現してください。アンチエイリアスを追い求めて、何百もの線分を使ってはいけません。
• IoUの高いギザギザのトレースを、IoUがわずかに下がる滑らかな曲線に置き換える場合、構造上の目印が一致していれば、滑らかなバージョンを優先してください。残差の原因を説明でき、視覚的に軽微で、意図的な平滑化、アンチエイリアス、フォントの代替、またはラスタソースのアーティファクトに起因する場合は、IoUが低くても滑らかな結果を合格にできます。このトレードオフを motion_spec.md に記録してください。
• 受け入れる前に、ズームしたレンダリング（final_render.png または専用のズーム切り抜き）を確認してください。スクリーンショットやブラウザーのズームでユーザーに階段状のギザギザが気付かれるなら、そのベクターは受け入れられません。

モーション対応の構造（融合レイヤー）

SVGは単なる画像ではなく、役者の集まりです。ジオメトリをフィットさせる際は、次の点を徹底してください。

• 意味上のパーツごとに1つの要素（または<g>）を使い、安定したIDを付けます：#mark、#wordmark、#letter-a、#dot、#swoosh。アニメーションの対象にはID／クラスを使い、path:nth-child(3)のような構造セレクターは使いません。
• アニメーションの境目に沿ってパスを分割します。 振り付けのスケッチでswooshとdotを別々にアニメーションさせる場合、1つの複合パスで両方を描画できるとしても、別々の要素にする必要があります。
• 変形の基準点：拡大縮小／回転するパーツには、transform-box: fill-box; transform-origin: center（または意図した基準点）を設定します。これはフェーズ3でCSSを使って設定しますが、各パーツのバウンディングボックスを確認し、基準点が適切であることを今のうちに確かめてください。
• 描画アニメーションへの対応：線を描画するアニメーションを行うストロークには、pathLength="1"を設定し、実際の長さにかかわらず、破線アニメーションをstroke-dasharray: 1; stroke-dashoffset: 1 → 0にします。パスの開始点と方向が意図した描画方向に合っていることを確認し、合わない場合はパスを反転してください。
• ワードマークの文字：文字を順番に表示する場合は、文字ごとに独自の要素／<text>スパンを割り当てます。1つの<text>では連続したアニメーションを適用できません。
• 振り付けと干渉する変形を埋め込まないでください：アニメーションによる変形を予測どおりに合成できるよう、パーツ内の座標はシンプルに保ちます。

ジオメトリの品質確認（証拠が必要）

• 正しいviewBoxを使ってSVGを記述し、PNGにレンダリングします。ソース画像にシアンのオーバーレイを重ね、すべてのオーバーレイをoutputs/fit_iterations/NN_name_overlay.pngに保存します。
• マルチモーダル画像認識でオーバーレイを確認します。中心、半径、端点、幅の変化、極値、ネガティブスペース、シルエットを確認してください。
• 毎回IoUを計算して記録しますが、固定のグローバルIoUしきい値は使わないでください。滑らかさと構造上の正しさを確保したうえで、合理的に可能な限りIoUを高めます。オーバーレイが視覚的に忠実で残差が記録されていれば、IoUがやや低くても合格することがあります。一方、IoUが高くても、構造の不一致、ハンドルの乱れ、目に見える凹凸、不適切なネガティブスペース、ピクセル状の階段エッジ、パス監査の不合格があれば、フィットは不合格です。
• 複雑さは一段階ずつ増やします。ノットを追加する前に、少数のノットの位置を移動または調整することを優先し、オーバーレイで失敗が確認された箇所だけ局所的に複雑さを加えます。パスがでこぼこに見える場合は、点を追加せず、ノットを減らしてマクロ曲線を再フィットします。
• 複雑で滑らかなパス、または手作業でフィットさせた曲線に不均一さがある場合は、scripts/svg_path_audit.pyを実行します（IoUが高くても、ハンドルの乱れ、接線の急変、小さな交互のセグメント、階段状のトレースがあれば不合格です）。
• ソースに曲線がある場合は、滑らかさを示す証拠画像を少なくとも1つ保存します。拡大クロップ、パス監査の成果物、またはエッジ品質を確認できるレンダリング画像を用意してください。目視での判定結果をmotion_spec.mdに記録します。
• 最後にscripts/overlay_progress_strip.pyを実行します（ソース画像、今回の実行で作成したオーバーレイ、最終レンダリングのみ）。

反復予算：スムーズな適合、または最大10回から最良のものを選択

フィッティングのループは、簡単に迷路にはまりがちです。デフォルトの予算は、実行ごとにジオメトリの反復を10回です（1回の反復＝ジオメトリの変更＋レンダリング＋オーバーレイの確認）。次のいずれかが先に到達した時点でループを停止します。適合を承認（滑らかさ、構造、視覚の各チェックに合格し、IoUを実用上可能な限り高めている）または10回の反復を試行。

• 各反復の成果物に番号を付け（NN_name_overlay.png）、反復ごとにメトリクス（IoU、src_only_px、render_only_px、境界RMS／局所残差、監査の警告、滑らかさの判定、視覚的な判定）を記録してください。フィッティングのスクリプトとパラメーターは outputs/fit_work/ に保存し、後からどの反復でも再開できるようにしてください。使い捨ての一時パスに置いたままにしないでください。
• 適合が早期に承認された場合は、その時点でループを終了し、直ちにフェーズ3へ進んでください。
• 10回の反復予算を使い切ったら、調整を止めて最良の候補を選択してください。「最良」の順位付けは次のとおりです。（1）滑らかさのゲートに合格、（2）構造上の不一致がない、（3）IoUとピクセル差分、（4）境界RMS／局所残差、（5）監査でのキンクと接線の問題が最も少ない、（6）視覚的なオーバーレイ判定、（7）編集可能な複雑さが最も低い。きれいだが少し緩い適合は、目に見える接線のキンクがあるより厳密な適合より、通常は優れています。目に見えないキンクは、既知の問題として開示する場合に限り残してもかまいません。
• 採用候補のIoUが別の不採用候補より低い場合は、それでも合格とする理由、またはプレビューにとどめる理由を報告してください（例：「ギザギザのしきい値アーティファクトを滑らかにしたためIoUは低くなっていますが、端点とシルエットのランドマークは一致しています」）。ジオメトリのみの調整では、振り付けをやり直す必要はありません。パーツIDと中心線は維持されるため、motion.css は再利用でき、再パッケージ化（animate_svg_showcase.py）とFinal Frame Contractの再確認だけが必要です。

フェーズ3 — モーション：12の原則に沿って振り付ける

references/twelve-principles-for-logos.md を参照して振り付けます。最低限、すべてのアニメーションにステージング、スローイン／スローアウト、タイミング、フォロースルー、アピールを意識して適用してください。その他の原則は、求める個性に応じて適用します。

黄金比を使ってタイムラインを構成する

Anticipation : Action : Follow-through  =  20% : 50% : 30%

1500msで表示する場合は、予備動作に約300ms、メインアクションに約750ms、収束に約450msを割り当てます。重なり合うパーツの開始時刻を、そのパーツ自身の再生時間の10～20%ずつずらしてください。すべてのパーツが同じフレームで開始または停止することがないようにしてください（機械的な動きになる最大の原因です）。重いパーツや大きなパーツほどゆっくり動かし、ドラッグの階層（ルート → プライマリ → セカンダリ → 第三のディテール）に沿って連鎖の順序を決めます。

パラメーターは推測せず、導き出す

使用状況から再生時間の範囲を、個性のマッピングからイージングトークンと誇張のレベルを、パーツ一覧から表示パターンを選択します。references/reveal-patterns.md には、原則のタグが付いた注釈付きのパターンがあります。描画による表示、段階的な組み立て、オーバーシュートを伴うスケールポップ、マスクワイプ、基本形状からのモーフィング、文字の連続表示のほか、アイドルループやホバー状態も含まれます。CSSカスタムプロパティ（--p2m-duration、--p2m-ease-*）を一度定義し、すべての箇所で使用してください。ブランドの一貫性はトークンによって保たれます。このルールには、次の例外が優先されます。@keyframes 内では、タイミング関数をリテラルで指定する必要があります（実装を参照）。そこでトークンを参照しても、エラーなしに無視され、動きが線形に劣化します。

実装

• logo_motion.html を作成する前に、references/html-delivery-template.md を読んでください。
• メインアニメーションは、motion.css 内でパーツの ID を対象とするCSS キーフレームとして作成するか、計測されたピボット、リアルタイムのシーケンス制御、または文字ごとのレイアウトが必要な振り付けの場合は、独自の JS アクト／フェーズタイムラインとして作成してください。JS を使用する場合は、以下に記載する同じ QA フックを維持してください。
• CSS キーフレームでは、animation-fill-mode: both または forwards を使用してください。そうしないと、決定論的な ?t=<ms> フレームキャプチャと ?static=1 の最終状態チェックの信頼性が確保できません。
• キーフレームのイージングはリテラルで指定してください。 @keyframes 内の animation-timing-function: var(--token) は Chromium では解決されません。宣言は警告なしに破棄され、区間はアニメーションの基本タイミング関数（通常は linear）にフォールバックします。これは原則で禁止されている、機械的な見た目そのものです。さらに悪いことに、細分化したイージングで各パーツの速度を調整した複数パーツの振り付けでは、パーツごとに一定速度となり、切り替え箇所ごとに速度が急変します（計測では速度の不連続が 4.3×となり、「カクつき」として認識されました）。animation: ショートハンド（duration／delay は問題なく解決されます）とドキュメントではトークンを使用し、各キーフレームではトークン名を記したコメントを添えて、リテラルの cubic-bezier(...) を記述してください。この不具合は気軽な再生や均等間隔のフレームストリップでは見えません。イージングプローブ（Motion QA のステップ 3）で確認してください。
• すべてのパーツアニメーションを 1 つの共通クロックで作成してください（duration は 1 つにし、フェーズオフセットはキーフレーム内のパーセンテージで指定します）。これにより、?t=<ms> が振り付けと 1 対 1 で対応し、プローブやキャプチャの把握が容易になります。
• 要素ごとにキーフレームを 1 つにする設計を優先してください。1 つの要素に独立したプロパティタイムライン（例：イージング付き移動と線形フェード）が必要な場合は、同じクロックで動作するアニメーションをカンマ区切りで並列に指定してください。
• デフォルトの成果物は scripts/animate_svg_showcase.py で作成してください。このスクリプトは JavaScript DOM 呼び出しでメイン SVG を再生成し、モーション CSS をラップして動きを減らす設定に対応させ、アトミックなモーションスタディ、原則の一覧、再生ボタン、スローモーション切り替え、速度スライダー、?t=<ms>、?static=1、window.__p2mReady を備えたテンプレートのシェルを追加します。
• scripts/animate_svg_html.py は QA やデバッグ用の最小限のフォールバックとして引き続き使用できますが、アトミックなモーションや調整機能がないため、ユーザー向けの最終 HTML としては推奨されません。
• HTML は依存関係なしで動作し、logo.svg と同じジオメトリを基にする必要があります。アトミックなバリエーションでは、装飾用に別途描き直すのではなく、同じマークを再利用してください。
• デフォルトの HTML モーションステージでは、メインロゴを SVG の固有幅の 0.7 倍（width * 0.7。ただしビューポート幅を上限とします）で表示します。これによりアニメーションの周囲に余白ができ、クリッピングのリスクを減らせます。QA 用スクリーンショットではビューポートやクロップを上書きできますが、ユーザー向けテンプレートでは 0.7 倍の表示スケールを維持してください。
• 動きを減らす設定は必須です。prefers-reduced-motion: reduce の場合、ロゴは最終的な静止状態ですぐに表示される必要があります。
• 無限ループ（ローディング／アイドル）はシームレスでなければなりません。100% のキーフレームの状態が 0% の状態と一致していることを確認してください。30 秒後も心地よく見えるか、頭の中で再生してみてください。

自己交差をまたぐ描画

自己交差する中心線をたどる太いマスク付き描画ストローク（∞のマーク、筆記体の署名、モノグラム）では、パスが交差する箇所で「もう一方」の枝まで早々に現れてしまいます。ペンが描く前に「X」の形が現れる状態です。中心線が自己交差する場合は、references/reveal-patterns.md §1b の分割塗りレシピを適用します。交差する描画パスの間で塗りを分割し、それぞれに専用のマスク用スパインを設けます。ダッシュパターンを 1 1 にしたバットキャップを使います（丸いキャップでは、見える先端がストローク幅の半分だけペンより先行するため、引き継ぎのたびに止まり、次のピースがキャップ半径の円として現れます）。全体のイージングは、デザインどおりの速度になるよう正確に（ド・カステリョー法で）分割します。また、後の描画パスで生じる、塗りがインクの下に隠れる途切れを、offset-path に沿って動く先端のグリントでつなぎます。同じリファレンスにあるダッシュ計算のアーティファクト表を使うと、t=0 のキャップの点や末尾の漏れを防げます。切り分ける位置の割合は、scripts/fit_ribbon_centerline.py のレポートから取得してください（各除外範囲の弧長に対する割合が出力されます）。各交差パスの前後のフレームに加え、連続性スイープ（Motion QA のステップ 4）で修正を検証してください。

ショーケース HTML の要件

最終的な HTML は、提示されたテンプレートのパターンに従う必要があります。

• メインアニメーション：#logo-root にメインのヒーローステージを配置し、クリック／タップと Replay ボタンの両方で再生できるようにします。
• 個別のモーション：ホバー、パルス、弧を描く動き／スピン、押しつぶし、描画、文字のカスケードなど、3 つ以上の小さな作例を用意します。可能であれば、各作例で独立したモーションの原則を示し、意味のあるパーツを対象にします。
• 調整コントロール：Replay ボタン、スローモーション切り替え、速度スライダーを用意します。速度スライダーは、今後の再生時だけでなく、実行中のメインアニメーションにも作用する必要があります。
• 原則の表示：使用する原則をコンパクトなピルで表示します。JS タイムラインを使う場合は、各原則が表示されるフェーズの間、その原則を強調表示します。
• QA 用フック：scripts/capture_motion_frames.py と互換性を保つため、#logo-root、?t=<ms>、?static=1、window.__p2mReady を維持します。

モーション QA（証拠必須）

1. 振り付け上重要なタイムスタンプで、scripts/capture_motion_frames.py を使ってフレームをキャプチャします（決定論的なシークには ?t= フックを使用します）。最低限、t=0、予備動作の終わり、動作の中間、オーバーシュートのピーク、収束時、最終フレームをキャプチャします。さらに、すべてのリスク区間も対象にします。交差するたび、パーツを受け渡すたび、オクルーダーが進入・退出するたびに、それぞれ前後を挟むフレームをキャプチャします（等間隔のフレームだけを並べたストリップでは、受け渡しの不具合が完全に隠れてしまいます）。
2. マルチモーダルビジョンでストリップを確認します。予備動作は伝わっていますか？パーツは一斉に動くのではなく、連鎖して動いていますか？オーバーシュートはキャラクターの個性に応じた範囲に収まっていますか？飛行中にビューボックスで切れている箇所はありませんか？（ビューボックスを広げるか、モーションを抑えてください。ロゴが切れることは絶対に避けてください。）
3. 実際に適用されたイージングを確認するため、scripts/probe_motion_continuity.py --probe を実行し、シークした2～3個のタイムスタンプで計算後の値（stroke-dashoffset、offset-distance など）を読み取り、設計したカーブと比較します。すべてのタイムスタンプで値が LINEAR ウィンドウの割合と一致する場合、キーフレームのタイミング関数が気付かないうちに削除されています（リテラル・イージングのルールを参照）。t=0 のフレームでは、ダッシュのアーティファクト（端点のインクドット、末端の漏れ）も確認してください。
4. リスク区間全体の連続性をスイープするには、--ink-sweep を使い、受け渡しや交差の前後で約10ミリ秒ごとのインクピクセル差分を調べます。平坦な状態が続いた後に急変するのは、停止してから飛び出す兆候であり、実行結果は不合格です。ペン先がすでに描かれたインクの下を通過する際に一度だけサンプル値がほぼゼロになるのは、物理的に起こり得ます。視覚的につながるようペン先のきらめきで補い、何もない状態のままにしないでください。
5. 最終フレームの契約：キャプチャした最終フレームは、QA 検証済みの静的ベクターである final_render.png と、形状、色、スケール、位置が一致していなければなりません。--compare-final でパイプライン間のピクセル差分値を確認した後、決定的な同一パイプラインでのチェックを実行します。同じツール、ビューポート、DPR を使って ?static=1 と ?t=<end> をキャプチャし、両者が**完全に一致（差分 0）**することを確認してください。パイプライン間に残る差分（レンダラー、DPR、リサンプリングの違いによるもの）は、数値で追い込まず、目視で確認するノイズです。アニメーションが検証済みロゴとは異なる状態で終わる場合、その実行結果は不合格です。
6. ループの場合、継ぎ目の直前と直後のフレームを1枚ずつキャプチャします。両者は視覚的に同一でなければなりません。
7. オーバーレイ進捗ストリップに相当するモーション版として、motion_strip.png を作成します。

---

同梱スクリプト

# Phase 2 — measurement / starter trace (inspect & simplify its output; never final art by default)
python3 scripts/raster_logo_trace.py source.png --out outputs

# Phase 2 — render + cyan overlay + IoU metrics in one step (headless Chrome; set CHROME_BIN if needed)
python3 scripts/render_overlay.py logo.svg source.png \
  --out outputs/fit_iterations/02_refined_overlay.png \
  --render-out outputs/final_render.png --report outputs/fit_metrics.json

# Phase 2 — closed / self-intersecting variable-width ribbons (∞ marks, scripts):
# centerline scaffold + auto-recenter + source edge snap; report includes each
# exclusion's arc fractions (= split-cut parameters for Phase 3)
python3 scripts/fit_ribbon_centerline.py source.png --seeds seeds.json --out-dir outputs/ribbon_fit

# Phase 2 — Bezier smoothness audit before accepting complex paths
python3 scripts/svg_path_audit.py logo.svg --out-svg bezier_segments.svg --report bezier_audit.json

# Phase 2 — geometry QA strip
python3 scripts/overlay_progress_strip.py --source source.png --dir outputs/fit_iterations \
  --pattern "*overlay*.png" --final-image outputs/final_render.png --out outputs/overlay_progress_strip.png

# Phase 3 — static HTML (intermediate check of JS DOM reconstruction)
python3 scripts/svg_to_js_html.py logo.svg --out logo_static.html --title "Logo"

# Phase 3 — animated showcase HTML deliverable
python3 scripts/animate_svg_showcase.py logo.svg --css motion.css --out logo_motion.html \
  --title "Logo Motion" --duration-hint 1500

# Phase 3 — minimal fallback HTML (debug/QA only, not preferred final delivery)
python3 scripts/animate_svg_html.py logo.svg --css motion.css --out logo_motion_minimal.html \
  --title "Logo Motion" --duration-hint 1500

# Phase 3 — deterministic frame capture + strip + final-frame diff (requires playwright)
python3 scripts/capture_motion_frames.py logo_motion.html \
  --times 0,300,700,1000,1250,1500 --out outputs/motion_frames \
  --strip outputs/motion_strip.png --compare-final outputs/final_render.png

# Phase 3 — easing probe: is the designed curve the one the browser runs? (requires playwright)
python3 scripts/probe_motion_continuity.py logo_motion.html \
  --times 500,700,900 --probe "#draw-stroke:stroke-dashoffset,#pen-glint:offset-distance"

# Phase 3 — ink-delta continuity sweep across handoffs/crossings (requires playwright)
python3 scripts/probe_motion_continuity.py logo_motion.html --ink-sweep 850:1010:10

環境に関する注意：システムの Python が外部管理されている場合は、venv 経由で Pillow/numpy を使用します（python3 -m venv .venv && .venv/bin/pip install pillow numpy）。ジオメトリのレンダリングにはヘッドレス Chrome（必要に応じて CHROME_BIN）を使用します。一方、モーションフレームのキャプチャには、Playwright または同等の決定論的なブラウザー画面キャプチャツールが必要です。

Playwright が利用できない場合は、環境で利用可能な実際のブラウザー用画面キャプチャツールを使い、同じ ?t=<ms> URL を指定してください。実行中のアニメーションを実時間でキャプチャしたスクリーンショットは、決定性がないため証拠として認められません。

受け入れ基準

完了には、主張ではなく証拠が必要です。

ジオメトリ（継承）:

• logo.svg が存在してレンダリングされ、オーバーレイ QA と滑らかさのゲートを通過する最低限の複雑さであること。構造上の不一致（中心、スケール、端点、幅のプロファイル、間隔、ネガティブスペース、シルエット）がなく、滑らかなマークは、予算が許す場合、または曲線にムラがあると感じられる場合に、拡大表示による目視検査とパス監査を通過すること。
• 最終的な IoU とピクセル差分を報告しますが、全体に適用する固定の IoU 合格／不合格値は設定しないでください。滑らかさと構造上の正確さを保ったうえで、IoU は実用上できる限り高くする必要があります。IoU が低めでも合格とする場合は、残差が許容される理由を正確に説明してください。
• 最終ジオメトリには、意図した滑らかな形状に目視できる階段状のエッジがあってはなりません。優れた IoU であっても、ギザギザのトレースは却下されます。ただし、元の画像が意図的なピクセルアートで、その旨が明記されている場合を除きます。
• overlay_progress_strip.png に、元画像 → 今回の実行での反復結果 → 最終レンダリングを表示します。
• 予算内での納品：10 回の反復予算を使い切った場合、滑らかさ、構造、ビジュアル QA に合格し、残差が開示されていれば、今回の実行で最良のジオメトリを納品してかまいません。残差が許容できない場合は、出力をプレビューとして明記し、outputs/fit_work/ からフィッティング状態を再開できるようにして、さらなる調整を提案してください。納品されたジオメトリには、Final Frame Contract が適用されます。

構造（融合）:

• 振り付けの対象となる各パーツは、安定した ID を持つ個別にアドレス可能な要素であること。描画パスには pathLength="1" を設定し、motion_spec.md のパーツ一覧が SVG の構造と一致していること。

モーション（新規）:

• logo_motion.html がショーケースのテンプレートに従っていること：メインアニメーションは #logo-root 内にあり、アトミックなモーションスタディ、リプレイ／スロー／速度コントロール、原則のストリップ、依存関係なしでの実行、prefers-reduced-motion、?t= によるシーク、?static=1、および window.__p2mReady を備えていること。
• 速度コントロールで、現在実行中のメインアニメーションの再生速度を変更できること。リプレイでアニメーションを決定論的に再開できること。アトミックなモーションは視覚的に操作可能で動きがあり、logo.svg を基にしていること。
• 振り付けで、motion_spec.md に記載した原則が実際に適用されていることを明確に示すこと。タイムラインが 20／50／30 の構成に従うこと（従わない場合は理由を記載）。2 つのパーツが同じ開始時刻と終了時刻を共有するのは、意図的なステージングの場合に限ること。
• motion_strip.png が存在し、マルチモーダルビジョンで検査済みであること。アニメーション中に要素が切れないこと。
• イージングの適用を検証済み（2～3 個の時刻でプローブし、意図せず線形になっていないこと）、かつ、ハンドオフ／交差を通じた連続性スイープで停止してから跳ねるような挙動がないこと。
• Final Frame Contract を満たすこと：キャプチャした最終フレーム ≡ 検証済みの静止画レンダリング（パイプライン間の差分を報告し、視覚的にも確認。?static=1 と ?t=<end> は同一パイプラインで完全一致）。ループは継ぎ目を確認します。
• IoU は必須の報告診断項目ですが、モーション全体の成果物に対する固定しきい値のゲートではありません。技術的に滑らかなアニメーションでも、ブランドの個性に合わない、機械的である（パーツが一斉に動く、イージングが線形）、または検証済みロゴと一致しない状態で終わる場合は不合格です。

参考資料

• references/twelve-principles-for-logos.md — 各ディズニー原則と、ロゴへの具体的な適用方法およびパラメーター範囲
• references/motion-personality.md — ブランドの個性 → タイミングのスケール、イージングトークン、誇張の上限、原則の強調度
• references/reveal-patterns.md — 振り付けパターンのライブラリ：リビール、アイドルループ、ホバー状態と、タイミング表および CSS のひな型。§1b 自己交差するマーク向けの分割塗りつぶし描画と、破線計算のアーティファクト表
• references/html-delivery-template.md — 最終 HTML に必須の構造：メインアニメーション、アトミックなモーション、調整機能、原則のストリップ、QA フック
• references/ribbon-fitting.md — 閉じた可変幅リボン／自己交差する可変幅リボンのフィッティング（中心線の骨組み＋再中心化＋元画像のエッジへのスナップ）とワードマークのフォント合わせ

v2 の変更履歴

本番実行で判明した問題をもとに強化しました（カリグラフィー風の ∞ とビーズ、セリフ体のワードマーク）。2 回目の自己交差で、描画アニメーションに目に見えるカクつきが発生していました。原因を 3 つに特定し、それぞれに新しいルールまたはツールを用意しました。

1. @keyframes 内の var() タイミング関数が Chromium では通知なく linear に劣化します → 文字どおりのイージングルールとイージングプローブ（scripts/probe_motion_continuity.py --probe）。これが主な原因でした。ピースごとの linear なペース配分によって、ピースの切り替わりで速度が 4.3 倍急変していました。
2. round-cap の描画マスクでは、表示される先端がペンよりもストローク幅の半分だけ先行します → 切り替わりでの停止と急な表示（50ms の停止とキャップ円盤のジャンプを測定） → butt-cap の破線レシピ、破線計算の成果物テーブル、インク差分の連続性スイープ（--ink-sweep）。
3. 後から描画される交差部分が既存のインクの 下に 描画されます → 物理的に避けられない約 10～25ms の空白時間 → 先端のきらめきによるセカンダリーアクション（中心線上の offset-path、ベースの不透明度は 0、オクルーダーの下で終了）。

そのほかの新機能：自己交差する描画アニメーション向けの分割塗りつぶしレシピ（正確な de Casteljau のイージング分割を使用。reveal-patterns §1b）、閉じた可変幅リボンのジオメトリ向け scripts/fit_ribbon_centerline.py と references/ribbon-fitting.md（そのレポートは Phase 3 に必要な分割カットの弧長比を出力）、同じパイプラインを使った Final Frame Contract のチェック（期待値は厳密に 0）、Motion QA におけるリスク区間のフレームブラケット。