oil-oil/oil-motion

设计并实现随滚动、拖动、指针或状态变化响应的网页动画，覆盖素材、时间轴和运行时。

何であるか

Oil Motion は、AIエージェントが再利用可能な Skill として、インタラクティブなウェブアニメーションの作成を自動化するものです。エージェントは、デザインの概要（何を表示すべきか、利用可能なアセット、ユーザーの操作—スクロール、マウス、タッチ、デバイスの傾き—がアニメーションを制御するか）を受け取り、3段階のパイプラインを実行します：

キーフレームの定義 – エージェントは、製品全体、分解図、最終状態などの重要な画像を生成し、被写体、スタイル、構図の一貫性を確認します。
中間の動きの生成 – AI動画モデルがキーフレーム間を滑らかに変化させる連続したクリップを作成します。
ウェブ用の後処理 – 動画はトリミングされ、重複が除去され、圧縮され、サイズ、透明度の要件、デバイスの制約に応じてMP4またはアルファWebPスプライトシートとして再パッケージ化されます。結果のリソースは、ページに直接接続され、スクロール、マウスの動き、ドラッグ、タッチ、デバイスの向きがアニメーションの進行にマッピングされます。

どのような人が使うか

手動で何千枚ものフレームを設計しなくても、高品質なAI生成製品デモ、キャラクターのインタラクション、データ駆動型のトランジションを必要とするフロントエンド開発者。
コンセプトアートや製品写真を持っているデザイナーで、素早く「スクロールで表示」や「マウス追従」アニメーションが必要な人。
AI駆動のアシスタントを構築しているチームで、このスキルをインストールし、特定のアニメーションをオンデマンドで作成できるようにしたい人。

コアコンセプト

コンセプト	意味
Skill	AIエージェントがインストールできるプラグイン（`npx skills add oil-oil/oil-motion`）。エージェントはすべての生成、検証、パッケージングステップを処理します。
キーフレーム	アニメーションの開始、重要な中間状態、終了を定義する、保証された安定した画像の少数セット。
連続的な動き	AI動画モデルがキーフレーム間のギャップを埋め、滑らかなクリップを生成します。
リソース形式	使用状況に応じて、フルフレームMP4、グリーンスクリーンMP4（WebGLのクロマキー処理用）、またはアルファWebPスプライトシートのいずれかになります。
コントロールマッピング	ユーザー入力（スクロールオフセット、マウスX/Y、タッチドラッグ、デバイスの向き）がフレームインデックスまたは再生速度に変換されます。

使い始め方

スキルのインストール – AIアシスタントにリポジトリをインストールするように指示するか、以下のコマンドを実行します：
```
npx skills add oil-oil/oil-motion
```

プロンプトの提供 – アセットと具体的なリクエストをエージェントに渡すか、最初にオプションを設計するように依頼します。例：

使用 $oil-motion、この2枚の製品画像をページのスクロールに応じて徐々に展開するアニメーションにします。
デスクトップでは表示領域が大きいため、高解像度を維持する必要があります；モバイルでは軽量なリソースを使用します。

エージェントがパイプラインを実行 – キーフレームを生成し、選択されたAI動画サービスを呼び出し、映像をクリーニングし、圧縮して、設定ファイルと埋め込み可能なコードを出力します。
生成されたコードを挿入 – スキルは、選択された入力（例：window.scrollY）をアニメーションタイムラインにバインドする小さなJavaScriptスニペットを出力します。

必要なもの

Python（AI動画サービスとの通信やFFmpegを実行するバックエンドスクリプト用）。
FFmpeg – トリミング、フレームレベルの検査、圧縮に使用されます。
選択したAI動画生成プロバイダのAPIキー（keyringを介して安全に保存されます）。
Node.js 22.18+（オプションの設定UI用）。
scripts/requirements.txt に記載されたPython依存関係（pip install -r scripts/requirements.txt でインストール）。

得られるもの

検証済みのキーフレームとその生成元のプロンプト。
ターゲットデバイスに最適化されたクリーンアップされた動画またはWebPスプライトシート。
インタラクションマッピング、リソースURL、フォールバック用の静的画像を記述するJSON/YAML設定ファイル。
任意のウェブページにインポート可能な、アニメーションを制御する小さなフロントエンドヘルパー。

埋め込まれた品質チェック

フレーム間での被写体、比率、照明の一貫性。
一時停止、重複フレーム、視覚的な不具合の削除。
透明なアセット用のエッジクリーンなアルファ。
パフォーマンスのガードレール – 宣言された表示サイズを満たしつつ、最小のリソースを選択します。
アニメーションの読み込み失敗やモーションの無効化時に、フォールバック用の静的フレームを提供します。

ライセンス

MIT – 生成されたリソースを商業プロジェクトに自由に使用、変更、埋め込みできます（ただし、下位のAI動画サービスの利用条件に従います）。