Repolode
投稿する
oil-oil

oil-oil/oil-motion

Claude CodeとCodex向けのエージェントスキル。AI生成モーションを入力連動のWebアニメーションに変換

GitHub で見る
スター
2,632
フォーク
197
未解決の Issue
1
最終コミット
16 日前

これは何？

Oil Motionは、インタラクティブなWebアニメーションを作成するためのエージェント非依存のスキルです。モーションを計画し、AI動画モデルで連続フレームを生成してレビュー・トリミングし、ページ上での実際の表示サイズに合わせてアセットを圧縮したうえで、スクロール、ポインター、ドラッグ、タッチ、デバイスの向きをアニメーションの進行に割り当てます。

まず、開始・中間・終了状態などの主要なキーフレームを確認し、被写体の特徴や構造が一貫するようにします。次にAI動画でその間の動きを補完し、変位、拡大縮小、クロップ、イージング、回転速度はコードで処理します。出力は用意済みのフレーム列または動画で、入力に応じてブラウザーがシークまたは再生します。操作のたびに何かを再生成することはありません。

サイズ、透過、再生要件に応じて、合成済みMP4、アルファ付きWebPスプライトシート、またはWebGLでキーイングするグリーンスクリーンMP4としてアセットを提供できます。生成には画像・動画モデル用のZenMuxを使用し、システムの認証情報ストアに保存したAPIキーが必要です。

主な機能

  • 01生成したモーション全体で被写体の一貫性を保つため、最初に主要なキーフレームを計画します。
  • 02スクロール、マウス、ドラッグ、タッチ、デバイスの向きをアニメーションの進行に割り当てます。
  • 03停止部分をトリミングし、重複フレームを削除して、ちらつきや構造の変化を検出します。
  • 04ページ上での実際の表示サイズに合わせてアセットを圧縮します。
  • 05合成済みMP4、アルファ付きWebPスプライトシート、グリーンスクリーンMP4の形式で提供できます。
  • 06ZenMuxのAPIキーをシステムの認証情報ストアに保存します。

ユースケース

  • ユーザーがスクロールするとデバイスが展開し、分解図になる製品ページ。
  • ホバー操作中にカーソルを追うキャラクターやマスコットの顔。
  • ドラッグで操作する360°製品ターンテーブル。
  • 複数のつながった動画シーンを移動する、スクロール連動のストーリーテリング。

トピック

#agent-skill#web-animation#scroll-animation#frontend#ai-video#interaction#motion-design#agent-skills#animation#claude-code

よくある質問

oil-motion とは？
Claude CodeとCodex向けのエージェントスキル。AI生成モーションを入力連動のWebアニメーションに変換 Oil Motionは、インタラクティブなWebアニメーションを作成するためのエージェント非依存のスキルです。モーションを計画し、AI動画モデルで連続フレームを生成してレビュー・トリミングし、ページ上での実際の表示サイズに合わせてアセットを圧縮したうえで、スクロール、ポインター、ドラッグ、タッチ、デバイスの向きをアニメーションの進行に割り当てます。
oil-motion は無料で使えますか？ライセンスは？
oil-motion は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
oil-motion は今もメンテナンスされていますか？
活発にメンテナンス中。oil-motion の最終コミットは 2026年10月4日 です。
oil-motion は何に使えますか？
ユーザーがスクロールするとデバイスが展開し、分解図になる製品ページ。 ホバー操作中にカーソルを追うキャラクターやマスコットの顔。 ドラッグで操作する360°製品ターンテーブル。 複数のつながった動画シーンを移動する、スクロール連動のストーリーテリング。
oil-motion はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/oil-oil/oil-motion

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト