Communitygithub.com

octaviosilva2/claude-video-motion

使用 HyperFrames 產生確定性影片——透過 Chrome/FFmpeg 捕獲 HTML/CSS 畫面,並明確宣告格式、影格率、持續時間與解析度,且需經使用者授權才能渲染。

claude-video-motion 是什麼?

此技能專為需要產生可重複、確定性媒體檔案(如 MP4、WebM、MOV、PNG)的情境設計。核心機制是 HyperFrames——一個將 HTML/CSS 動畫畫面以擷取方式轉為影片的生產流程,依賴 Node、Chrome 與 FFmpeg 基礎設施。技能強調所有關鍵參數(格式、解析度、影格率、持續時間)皆無預設值,必須由使用者明確指定,以避免套用常見但不合適的設定。操作上,渲染行為絕不自動執行,需取得使用者明確授權,並要求先確認基礎環境是否完備。此技能支援開發者工具如 Claude Code 或 Cursor,適合用於輸出可播放的媒體資產(如社群短片、動畫展示),但禁止用於網頁內的影片資產或互動式 UI 動畫,因其交付格式為媒體檔案而非網頁應用。文件中也詳細規範了音樂、音效、旁白的授權處理,以及如何透過鎖定版本(HyperFrames、Chrome、FFmpeg 等)來達到真正位元組層級的可再現性。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/octaviosilva2/claude-video-motion/tree/HEAD/skill/frontend-video

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

閘門——在任何合成開始之前

觸發條件:交付的結果是一個渲染完成的媒體檔案。 MP4、WebM、MOV、PNG。 這是交付格式,而非視覺外觀。

請勿啟用此技能:

  • 網站中使用的影片——主視覺、背景、客戶見證。這屬於一般的網頁資產。
  • 看似影片但可互動的動畫 UI 元件——這仍屬前端網頁範疇。

區別的關鍵在於交付格式。如果結果能在瀏覽器中開啟並回應點擊,就不屬於此技能。

格式、解析度、影格率與持續時間沒有預設值

四者皆無。選擇「因為常見所以用 1080p 30fps」正是閘門所要防止的。在合成開始之前,這四項參數必須向使用者確認(使用 AskUserQuestion),並根據影片的用途提供建議(例如,Reels/TikTok/Shorts 建議使用直立 1080×1920)。

操作成本——在承諾前先確認

HyperFrames 不是一個匯入套件:它是一個生產流程。依賴 Node、Chrome 和 FFmpeg 的安裝,且畫面擷取耗費大量資源。

在承諾採用此路線之前,請先確認基礎設施已就緒。等到渲染時才發現缺少 FFmpeg,就表示整個合成已經寫完才發現問題。

安裝任何相依套件(Node、FFmpeg、Chrome、hyperframes 套件)都是由使用者決定。 請指出缺少什麼以及對應的安裝指令,然後等待使用者確認。

渲染永遠不會自動進行

未經使用者明確授權,絕不執行任何渲染。 渲染會耗費機器時間,而當涉及媒體生成時,更會產生實際金錢成本。

當缺少某個素材且替代方案是生成它時:請指出缺少什麼以及會生成什麼——然後就此打住。

使用方式

frontend-video/
├── SKILL.md                ← 本檔案。唯一一定會被讀取的檔案
└── referencias/
    ├── hyperframes.md      閘門、格式/影格率/持續時間、確定性時間、
    │                       轉接器、字幕、渲染授權
    ├── direcao-visual.md   附帶書面理由的標記、反通用原則、分解的參考
    ├── assets.md           來源、授權、最佳化——此處的資產就是交付成果
    └── validacao.md        適用於媒體的閘門
你的任務開啟檔案
決定格式、解析度、影格率、持續時間hyperframes.md §3
內容、字型、字幕、權利hyperframes.md §4
確定性時間、可重複輸出、場景轉接器hyperframes.md §5
影片的可及性與效能hyperframes.md §6
授權渲染hyperframes.md §7
合成的美學方向direcao-visual.md
圖片、字型、音樂、特效、旁白的授權assets.md
完成交付validacao.md

永遠忽略: SEO、可索引的 DOM、瀏覽路徑與應用狀態——確定性媒體沒有這些概念。網頁執行時期作為最終交付也不適用:此處的瀏覽器是捕獲工具,而非最終目的地。

音樂、特效與旁白

  • 音樂與音效: 只能在使用者逐個檔案確認後下載。授權必須允許預期的使用方式(若為商業用途則需商業授權)。記錄每首曲目的來源、作者與授權。詳情見 assets.md。
  • 旁白: 本技能不產生語音。請撰寫旁白文字(簡短段落),並要求使用者在其語音服務(例如 ElevenLabs)中生成並提供音檔。生成語音需要成本:請指出段落範圍,然後就此打住。

可再現性——「確定性」的真正要求

引擎讓合成可依時間搜尋。但這本身並不能保證輸出完全相同。

要承諾位元組層級可重複的檔案,必須鎖定以下所有項目:HyperFrames、Chrome、FFmpeg、字型、素材、編解碼器與參數、解析度、影格率、持續時間與環境。即使提交相同程式碼,若未進行此鎖定,也無法做出此承諾。

已稽核來源:heygen-com/hyperframes 儲存庫,提交 af1cb1c10da33bade100db8233435c7591b7c0bc,主要套件版本 0.8.17(基於此提交),根目錄與 CLI 採用 Apache-2.0 授權。於 2026-08-28 驗證。該儲存庫中的 exemplo-p01/ 使用 0.8.166 版渲染,版本鎖定於 package.json 中。請在你的專案中鎖定版本,若合成依賴未涵蓋於記錄中的功能,請重新稽核。

永遠適用的原則

  1. 真實內容,絕不虛構——不要使用看起來像最終成果的佔位符。
  2. 字幕與對比度是交付成果的一部分,而非附加功能。
  3. 在實際輸出上驗證,而非預覽畫面。預覽畫面顯示的內容與最終檔案包含的內容可能不同——兩者之間的編解碼器、色彩與時間軸存在差異。
  4. 原創場景程式碼仍需負責自身的資源釋放。 合成中的 Three.js/WebGL 場景,如同其他地方一樣,需要正確的清除(teardown)。

相關技能