nolangz/pixel2motion

AI logo animation skill: turn raster logos into smooth SVG animation, animated HTML demos, GIF/video previews, and motion QA evidence.

解決する課題

Pixel2Motion は、静的なラスタロゴ（PNG、JPG、WebP）をプロフェッショナルなアニメーション SVG ロゴに変換するプロセスを簡素化します。ロゴをベクター化し、モーションを振り付ける手作業を排除し、AI 支援によるブランドモーションデザインの構造化されたワークフローを提供します。

仕組み

本プロジェクトは Claude や Codex といった AI モデル向けの「スキル」として機能し、複数ステップのパイプラインをガイドします：

  1. ベクタライズ：ラスタロゴをクリーンでセマンティックな SVG に変換し、ロゴの各パーツ（マーク、ドット、ワードマーク）を個別にアドレス可能にします。
  2. フィッティング & QA：Python スクリプトでベクタ候補を元のラスタソースにオーバーレイし、位置合わせ、スケール、インクウェイトの正確さを確認します。
  3. 振付：SVG の ID を対象とした CSS アニメーションを生成し、"ロゴリビール" やモーションシーケンスを作成します。
  4. デリバリー：最終成果物を依存関係のない HTML ショーケースとしてエクスポートし、GIF/動画プレビューとモーション QA 証拠を添付します。

対象ユーザー

  • ブランドデザイナー：アニメーションロゴを素早くプロトタイプしたい方。
  • 開発者：開発者フレンドリーな HTML/CSS ベースのアニメーションワークフローを求める方。
  • AI モーションデザイナー：LLM を活用してブランド資産の作成を支援したい方。

ハイライト

  • QA 検証済みフィッティング：IoU 診断とジオメトリオーバーレイを使用し、ベクタ版が元画像を忠実に再現していることを保証。
  • 決定的フレームキャプチャ：品質保証のために特定のモーションフレームをキャプチャするスクリプトを含む。
  • セマンティック SVG 構造：出力 SVG がアニメーション用に特化した構造となっており、単なるフラットトレースではない。
  • インタラクティブ HTML デモ：速度コントロールとリプレイ機能を備えた単体 HTML ファイルを生成し、アニメーションのレビューを容易にします。