Communitygithub.com

csm-kr/reference-motion-video

根據參考影片與實際產品畫面,規劃並製作產品上市影片、解說影片、功能示範影片與宣傳短片。使用 HTML 與 GSAP,搭配內建影格渲染器與根據畫面節拍創作的音樂。

reference-motion-video 是什麼?

這項技能可根據參考素材與實際產品畫面,規劃並製作專業的產品上市影片、解說影片、功能示範與宣傳短片。其核心概念是「影片即 HTML,提示清單即樂譜」:每個可見的轉場都會在時間軸上註冊一個提示,每個片段都依其功能命名。調色盤會根據這些提示自動生成音樂,讓音樂與畫面的情緒和節奏精準對應——問題陳述時沒有節奏,產品運作時產生律動,高潮前預留呼吸空間,產品刻意停止時鼓聲消失,最終 Logo 畫面則是完全靜止。 技能涵蓋完整工作流程:從需求訪談、腳本規劃、實際畫面擷取、可選旁白錄製,到使用 HTML、GSAP 與內建引擎進行合成。支援多種音樂調色盤(如明亮示範、鼓樂發表、柔和脈衝等),並會自動進行響度正規化與同步檢查。最終可輸出 H.264 MP4 影片、SRT 字幕檔與縮圖。技能內含多個可實際運行的範例(如 `examples/claude-code/`),以及完整的參考文件與測試套件。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add csm-kr/reference-motion-video

在你喜歡的 AI 中提問

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

說明文件

參考動作影片

影片就是 HTML,其提示清單就是樂譜。 每個可見的事件都會在移動畫面的常數旁註冊一個提示;影片的每個段落都以用途命名。調色盤會將這些提示轉化為擊中每個影格並演繹故事的音樂:問題陳述時沒有節奏,產品運作時有律動,回報前有呼吸,產品刻意停止時鼓聲消失,Logo 上則是完全靜止。

實際範例:examples/claude-code/(可在共享舞台上執行的發表、解說與示範影片,各有不同的調色盤)、examples/moments-v2.html(36 秒連續鏡頭廣告)、examples/ads/(Moments 廣告:鼓樂、管弦樂、小提琴)。Moments 作品需要產品素材與路徑調整;它們是參考,而非可直接渲染的示範。

過去影片的決定規則

  1. 合適優先。 音樂必須符合產品情緒,並演繹畫面的流暢度。在盲測 A/B 測試中(KIBO v4.5,30 秒,相同畫面,相同響度),擁有者選擇了為畫面創作的配樂,而非一首節拍匹配且在每項機器指標上表現更佳的免費電子流行樂曲:「第二首不合適」。預設為創作配樂;只有當使用者選擇曲庫音軌時才使用(references/music.md)。
  2. 每個提示都有一個聲音,並落在其影格上。 剪接落在拍子上,文字落在 off-beat 上,最大的揭露獲得最大的撞擊聲。
  3. 僅限真實素材與真實輸出。 動態圖形僅用於構圖與解說;絕不能偽造功能。在畫面上標註加速與等待剪接(「即時 App · 1×」、「⋯ 等待剪接」、「▶▶ 加速」),標記合成語音,並為每個數字提供來源。
  4. 語音優先。 當有旁白或對話時,背景音樂必須讓路(references/music.md,「混音」)。
  5. 機器檢查是必要條件,而非充分條件。 同步、響度與語音轉文字都可能在不合適的音樂上通過。由人員透過盲聽決定。
  6. 先詢問,再決定。 只詢問請求與儲存庫無法回答的問題,並先提供建議答案;其餘部分自行決定並說明。

工作流程

0. 設定檢查(在任何事情之前)

報告每一行為「正常」或「缺少」,並附上修復方法;切勿印出金鑰的值。

  • Google Chrome(渲染器使用已安裝的 Chrome:內建的 Chromium 無法解碼 H.264)、ffmpeg(含 rubberband)、Node ≥ 20 並在技能目錄中執行 npm ci --prefix engine --ignore-scripts。
  • Python 3.12 搭配 numpy、scipy、soundfile、pytest(在技能目錄中執行 uv venv --python 3.12 .venv,然後執行 uv pip install --python .venv/bin/python -r requirements.txt)。
  • 樣本:執行 bash engine/fetch_samples.sh core(VSCO-2-CE CC0 打擊樂、銅管、木琴;Pixabay 授權音效),然後執行 bash engine/fetch_samples.sh piano 以取得 soft_pulse(Salamander Grand Piano,CC-BY 3.0;使用時須標註出處)。當缺少樣本時,調色盤會回退到合成音,但鋼琴回退可能會導致段落平衡檢查失敗;完整的測試套件需要同時使用兩組樣本。
  • 僅在要求旁白時才需要旁白提供者及其憑證(references/voice.md)。三個可執行範例不需要 API 金鑰。旁白、轉錄與應用程式擷取客戶端未包含在內;請使用可用的工具,並在需要時驗證所選提供者的最新文件。
  • 可用磁碟空間:渲染會傳送影格(不會傾印 PNG),但樣本庫與錄音需要數 GB 的空間。

1. 需求訪談 → 一頁簡報(規劃前需批准)

僅詢問請求與儲存庫未提供的背景資訊。如果環境中有提問工具,請使用它,否則使用一般聊天;將相關問題分組,將建議選項放在前面,並重複使用已給出的答案:

  1. 目的: 影片類型(發表、概念解說、功能示範、使用案例短片、宣言)、觀看對象、發布平台(YouTube、比賽、社群媒體)、觀看後應採取的行動、截止日期與任何評判標準。
  2. 訊息與佐證: 觀眾應記住的一句話、三個佐證及其來源、絕對不能說的內容。
  3. 形式與聲音: 長度與格式(16:9、9:16、剪輯版)、畫面上、字幕與語音的語言;音樂參考連結或氛圍(提供下方表格中適合該目的的調色盤,加上「我有參考連結」);是否需要旁白,以及使用哪種聲音。
  4. 來源與規則: 是否可以錄製真實應用程式(URL、登入資訊、示範資料、兩台裝置)、是否會出現真人、品牌素材、比賽規則、第三方智慧財產權。

唸出簡報並獲得確認。將其寫入 video/BRIEF.md。

2. 類型與參考

從 references/genres.md 中選擇類型的節拍模板與測量目標(五種類型共 16 個官方參考,包含鏡頭長度、每張卡片的文字量、旁白節奏、產品與 Logo 出現的時間)。使用 /watch 觀看所選的參考;使用 engine/ref-analyze.py 測量其音樂。對於連續鏡頭廣告,請閱讀 references/transitions.md 和 references/youtube-analysis.md。

3. 規劃 → video/PLAN.md(建構前需批准)

在 BPM 格線上的一份節拍表(100 BPM = 一拍 0.6 秒,30 fps 下為 18 影格;將重拍放在強拍上):時間 | 小節數 | 場景 | 螢幕文字 | 素材 | 段落類型 | 提示 | 語音。命名英雄物件(產品中會在影片中穿梭並最終落在 Logo 上的一個元素)、固定影格,以及每個宣稱及其佐證檔案。

4. 擷取真實畫面

references/capture.md:當產品需要時,從真實應用程式進行雙裝置即時拍攝(CDP 螢幕廣播影格附帶時間戳、透過手機麥克風播放的合成客戶語音、從頁面點擊取得的 AI 回覆),轉換為同一時鐘下的固定影格率 MP4,然後透過時間地圖([[影片時間, 拍攝時間], ...]:等步長為 1×,平坦運行是停留,兩個點相距 1 ms 是剪接)在影片中播放。使用環境中可用的瀏覽器工具;references/aside-capture.md 提供了 Aside 特定的實作。終端機或工具輸出:重新排版真實輸出(Claude Code 範例),切勿編造。

5. 旁白(可選)

references/voice.md:使用所選的 TTS 提供者或提供的錄音,試聽不同版本,根據單字準確度與節奏選擇(英文示範的起點為 155-170 wpm),並在拉伸語音前調整措辭或停頓。在源頭進行清理,並將每行台詞寫入其時間段的字數預算。

6. 建構作曲

  • 一個固定的 1920×1080 #stage;所有動畫來自 ONE 暫停的 GSAP 時間軸;打字、計數器、英雄圓點與影片素材在 __seek(t) 中僅根據時間進行評估。絕不使用 CSS 動畫、setTimeout 或 requestAnimationFrame 來進行動畫。fromTo 需要 immediateRender: false。
  • 引擎的合約:window.__duration、__seek(t)、__ready、__cues、__sections、__bpm、__T。從 examples/claude-code/stage.js(提示、段落、文字彈出、打字、計數器、終端卡片、英雄圓點)或 examples/moments-v2.html(真實畫面上的虛擬攝影機)開始。
  • 在每個讓某物體可見的常數旁註冊一個提示;用用途標記每個段落(下表)。
  • 字幕:為口說台詞保留一個可讀的區域,並確保其他內容避開它;標明合成語者及其提供者,在簡報要求時加入翻譯,並從相同的字幕列表寫入 .srt 檔。
  • 在任何完整渲染之前檢查靜止畫面:node engine/stills.mjs index.html out/stills 1.7 3.6 ...。

7. 音樂:根據畫面創作

node engine/cues.mjs > cues.json                      # duration, bpm, T, cues, sections
python engine/compose.py cues.json score.wav --palette bright_demo [--narr narr.js --narr-root .]

compose.py 會寫出配樂、以語音優先的方式進行混音、將母帶處理至 -14 LUFS(真實峰值低於 -1 dBTP),並自行運行同步檢查:如果某個提示在 33 毫秒內沒有可聽聞的起始點,則會加入該調色盤的重點音效並重新混音(最多兩次);報告會列出它添加的內容。在選擇前先試聽: 使用兩個或三個合適的調色盤渲染相同的 15-30 秒片段,讓人員進行盲選。詳細資訊、混音規則與曲庫音軌路徑:references/music.md。

8. 渲染

node engine/render.mjs index.html out/film.mp4 --fps 30 --audio score.wav(JPEG q95 影格透過管道傳送至 x264:約比 PNG 快 10 倍;YouTube 標誌:High profile、影格率一半的 GOP、BT.709 標籤、AAC 48 kHz 384 kbps)。草稿使用短範圍:--from 10 --to 16。Chrome 在單一頁面中載入約 18 個不同的影片;對於不會移動的素材請使用靜止畫面。

9. 檢查(全部基於最終檔案)

references/qa.md。檢查最終 MP4 的同步(python engine/synccheck.py out/film.mp4 cues.json:每個提示在 33 毫秒內,附隨機基準線讀取)、響度、真實峰值、靜止畫面、轉場,以及人員的聆聽判斷。僅在存在這些功能時套用語音、字幕、QR 碼與修訂檢查,使用環境中可用的工具;不要將未執行的檢查報告為通過。雲端理解測試為選用,需要使用者選擇將影片傳送至該服務。

10. 交付

交付簡報所指定的長度與格式,通常為 H.264 MP4,有字幕時附帶 .srt 側邊檔案,並在要求時提供縮圖或剪輯版。內建舞台與渲染器為 1920×1080;其他寬高比需要明確調整,而非使用渲染器標誌。報告實際執行的檢查及其證據。發布是單獨的操作,除非使用者已要求。

依用途分類的段落

類型用於畫面...音樂...
intro陳述問題,產品行動前無節奏:只有鋪墊與提示音效
tease喚醒產品,第一次提問稀疏的律動(無後拍、頂擊樂或旋律)
build即將呈現結果;重新進入前的填充漸強至段落結束
groove展示產品運作(e 0.5-1.2)能量為 e 的完整律動
light包含密集台詞或大量文字的卡片無旋律樂句的律動
muffled陳述嚴肅的事實、統計數據、問題低通濾波的律動,演出進入下一段落
breath在回報前暫停一拍近乎靜音;僅有英雄物體的聲音迴盪
stop顯示產品刻意不動作(安全停止、限制)鼓聲消失,持續的鋪墊
end結束卡片靜音
riser(疊加)升起並降落結束於段落結尾的揚升音效

每個調色盤會回應的提示類型:drop(回報)、reentry、final(Logo,然後完全靜止)、break(停止開始)、cut(big 用於章節)、tap、tapTouch、pop、word、chip、node、num、count、fill、bar、key(打字)、dot(英雄物體自身的聲音)。

調色盤(engine/palettes/)

調色盤適用聲音來源
bright_demo功能示範、友善的消費者或 SaaS 應用程式、語音主導F 大調流行樂,100 BPM:有力的 kick、拍手與彈指、沙鈴與鈴鼓、馬林巴琴(VSCO 樣本或合成)、活潑的貝斯、空靈的鋪墊、水珠般的英雄音效KIBO v4.5(A2-bright),擁有者首選;贏得盲測 A/B 測試
drums_launch發表影片與廣告、產品揭幕、音樂主導D 小調現場鼓組,100 BPM:VSCO kick、snare 與 ghost notes、hi-hat、congas、牛鈴、切分貝斯、悶音吉他的 skank、小號與銅管 stabMoments 50 秒鼓樂廣告(致敬 Apple 的 MacBook Air M5 影片),擁有者最喜歡的風格
soft_pulse概念解說、圖表、旁白密集的影片C 大調,96 BPM:取樣鋼琴、調音馬林巴琴提示音效、柔和的鼓組、貝斯與鋪墊;音層隨能量進入,提示音符隨圖表建構而上升用於 examples/claude-code/explainer

仍為獨立腳本,待移植至調色盤介面:鋼琴與鐘聲(engine/score.py,Moments v2)、樂團(engine/score_band.py,B2B 宣傳片)、管弦樂與獨奏小提琴(examples/ads/orch、examples/ads/violin)。若要新增調色盤,請遵循 engine/palettes/__init__.py 並將其名稱加入 tests/test_compose.py:測試會證明它能演繹段落文法(intro 中無 kick、安靜的 breath 與 end 卡片、stop 中鼓聲消失、每個提示都能聽到、-14 LUFS)。

檔案

  • engine/:render.mjs、cues.mjs、stills.mjs、compose.py + palettes/、audio.py(匯流排、取樣器、空間)、synccheck.py、beatmap.py 與 bedmix.py(曲庫音軌路徑)、ref-analyze.py、music-analyze.py、fetch_samples.sh。
  • references/:genres.md、music.md、voice.md、capture.md、qa.md、transitions.md、youtube-analysis.md、aside-capture.md、ads/。
  • tests/:python -m pytest -q tests/(節拍地圖、曲庫混音、同步檢查、每個調色盤的段落文法)。

簡報與提交限制

  • 使用要求的時長、語言、寬高比與目標平台。若為比賽,請閱讀其實際規則並使用 ffprobe 驗證時長;不要繼承過去比賽的限制。
  • 對於功能宣稱,請展示真實的產品素材或真實輸出,並尊重使用者的品牌與素材權限。標明關於其他產品的非官方範例,如同 Claude Code 範例所做的那樣。
  • 先準備本地交付檔案。僅在使用者授權目標平台與可見性後才進行上傳。

相關技能