oil-oil/oil-motion

是什麼

Oil Motion 是一個可重複使用的 Skill，專為 AI 代理設計，用於自動化建立互動式網頁動畫。該代理接收一個設計簡報（要展示的內容、可用的資產，以及由哪種使用者互動——滾動、滑鼠、觸控、裝置傾斜——驅動動畫），並執行三步流程：

1. 定義關鍵幀 – 代理生成少數關鍵影像（例如，產品整體、爆炸視圖、最終狀態），並檢查主體、風格和構圖的一致性。
2. 生成中間動畫 – AI 影片模型創建一段連續的影片片段，平滑地在關鍵幀之間過渡。
3. 為網頁進行後處理 – 影片被裁剪、去重、壓縮，並根據大小、透明度需求和裝置限制，重新打包為 MP4 或帶透明通道的 WebP 精靈圖。 生成的資源可直接嵌入頁面，使滾動、滑鼠移動、拖曳、觸控或裝置方向映射到動畫進度。

---

誰會用到它

• 希望無需手工製作數千幀即可獲得高品質 AI 生成的產品示範、角色互動或資料驅動過渡的前端開發者。
• 擁有概念圖或產品照片，需要快速實現「滾動揭示」或「滑鼠跟隨」動畫的設計師。
• 正在構建 AI 驅動助手的團隊，希望該助手能 安裝 此技能，並按需創建特定動畫。

---

核心概念

概念	含義
Skill	AI 代理可安裝的外掛（npx skills add oil-oil/oil-motion）。代理隨後處理所有生成、驗證和打包步驟。
關鍵幀	定義動畫起始、重要中間狀態和結束的少數保證穩定的影像。
連續運動	AI 影片模型填補關鍵幀之間的空白，生成平滑的影片片段。
資源形式	根據使用情境，輸出為全幀 MP4、綠幕 MP4（用於 WebGL 色度鍵）或帶透明通道的 WebP 精靈圖。
控制映射	使用者輸入（滾動偏移、滑鼠 X/Y、觸控拖曳、裝置方向）被轉換為幀索引或播放速度。

---

如何開始

1. 安裝技能 – 告訴你的 AI 助手安裝該倉儲，或執行：

   npx skills add oil-oil/oil-motion
   

2. 提供提示 – 向代理提供資產和具體請求，例如：

   使用 $oil-motion，將這兩張產品圖製作成隨頁面滾動逐步展開的動畫。
   桌面端的展示區域較大，需要保持清晰；行動端使用較輕的資源。
   

   或者先讓代理設計選項。
3. 代理執行流程 – 生成關鍵幀，呼叫選定的 AI 影片服務，清理影片，壓縮並產生設定檔 + 可直接嵌入的程式碼。
4. 插入生成的程式碼 – 該技能輸出一小段 JavaScript 程式碼，將選定的輸入（如 window.scrollY）綁定到動畫時間軸。

---

所需條件

• 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 影片服務的條款）。