oil-oil/oil-motion

Oil Motion とは？

Oil Motion は、ウェブページ用のインタラクティブな AI 生成アニメーションを作成できるツールです。CSS や JavaScript を書いたり、ビデオ素材を手作業で作ったりする代わりに、実現したいことを説明し、ソース画像やビデオを渡すと、システム（エージェントと呼ばれます）が以下のことを行います。

1. キーフレームを設計 – アニメーションの構造を定義する重要な「開始」「中間」「終了」の画像。
2. AI ビデオモデルで中間モーションを生成。
3. 結果のフレームをクリーンアップ、圧縮、パッケージ化して、ウェブに適した形式（MP4、WebP スプライトシートなど）に変換。
4. アニメーションをユーザー入力に配線 – スクロール、マウス移動、ドラッグ、タッチ、デバイスの向きなどに応じて、ビジュアルがリアルタイムで反応します。

パイプライン全体はスキルとしてパッケージ化されており、AI エージェントプラットフォームにインストールできます（例：npx skills add oil-oil/oil-motion）。インストールすると、エージェントに自然言語のコマンド一つで完全なインタラクティブアニメーションの作成を依頼できます。

---

誰が使うのか？

• プロダクトマーケター – 訪問者がスクロールするにつれて展開する製品の分解図が必要な場合。
• ゲームやキャラクターデザイナー – キャラクターの顔がカーソルを追従する必要がある場合。
• テクニカルドキュメント作成者 – WebGL コードを書かずにデバイスの 3D 風ウォークスルーを実現したい場合。
• フロントエンドチーム – 手動で何十ものフレームを描くよりも AI 生成アセットを好む場合。

CSS/JS で実現できる単純な UI トランジション（ボタンのホバー、モーダルのフェードイン）や、フルレングスのビデオ編集には向いていません。

---

どのように機能するのか？

1. 目標を定義 – ユーザーがエージェントに、希望する効果、入力メディア、操作方法（スクロール、マウスなど）を伝えます。
2. キーフレームを確認 – エージェントはまずいくつかの重要なフレームを生成し、被写体、スタイル、構図が一貫しているかを確認します。
3. モーションを生成 – AI ビデオモデル（ZenMux サービス経由でアクセス）が、キーフレーム間を補間するフレームを作成します。
4. 後処理 – エージェントはポーズ、重複フレーム、視覚的なグリッチを除去し、結果を適切な形式に圧縮します：
   • ナラティブショット用のフルシーン MP4。
   • 小さな 2D アセット用のアルファ WebP スプライトシート。
   • 大規模なスクロール駆動シーケンス用のグリーンスクリーン MP4。
5. エクスポート – すぐに使える JavaScript バンドル、設定ファイル、最適化されたメディア、およびプレビューページが生成されます。

すべての重い処理（AI 生成、圧縮）はオフラインで行われます。ブラウザは事前生成されたフレーム内をシークするだけで、スムーズで低遅延のインタラクションを保証します。

---

リポジトリには何が含まれていますか？

項目	目的
SKILL.md	スキルのコマンド、入力、出力の仕様。
references/	API キー設定、ZenMux 統合、その他の技術詳細に関するドキュメント。
assets/readme/hero.svg	README 用のビジュアルバナー。
ライセンス	MIT – 自由に使用および変更可能。

リポジトリには AI モデル自体は含まれておらず、画像/ビデオ生成のために外部の ZenMux サービス（API キーでアクセス）に依存しています。

---

始めるには？

1. スキルをインストール – エージェントに依頼するか（帮我安装 …）、npx skills add oil-oil/oil-motion を実行します。
2. API キーを提供 – 一度だけの設定ページ（Node 22+）で、キーを OS の資格情報ストアに保存します。
3. 自然言語でリクエストを発行 – 例：

   使用 oil-motion，把这两张产品图制作成随页面滚动逐步展开的动画。
   

4. エージェントは以下を行います：
   • キーフレームを生成/検証、
   • ZenMux を呼び出してモーションを作成、
   • アセットをクリーンアップして圧縮、
   • 埋め込み可能なアニメーションバンドルを出力。

---

制限と範囲

• 被写体が形状やポーズを変える必要がある場合（製品の分解、キャラクターの回転、カメラのフライスルー）に最適です。
• 単純な CSS/JS トランジション、静的画像ギャラリー、フルレングスのビデオ編集には意図されていません。
• 外部の AI ビデオサービス（ZenMux）が必要で、生成ごとに使用コストが発生します。
• エージェントは根本的に間違ったモーションデザインを修正できません。キーフレームやプロンプトを修正する必要があります。

---

要約

Oil Motion は、説明とソースメディアをスクロール、マウス、またはタッチで制御されるアニメーションに変換し、ウェブですぐに使用できるようにする AI 駆動のパイプラインです。スキルとしてインストールし、API キーを提供し、エージェントにアニメーションの作成を依頼するだけで、システムがキーフレーム設計、AI ビデオ生成、クリーンアップ、圧縮、コード統合を処理します。