Communitygithub.com

ErtanLabs Motion

透過確定性的 HTML 轉影片管線,直接設計、渲染並驗證動態圖像。每個片段都從真實的「源世界」文物借用視覺語法,將每個選擇記錄在決策帳冊中,以影格編號的節拍表規劃時間,透過內建的並行渲染器產生影格精確的 MP4、ProRes(含 Alpha)或 WebM 檔案,並由內建的檢查器測量停頓、音量、閃爍、顏色標籤及平台安全區域。

ErtanLabs Motion 是什麼?

ErtanLabs Motion 是一套嚴謹的動態圖像製作技能,專為需要高度一致性與可追溯性的影片創作而設計。它強制執行一條核心規則:「每個可見的選擇都必須有來源」,避免產生千篇一律的通用成品。此技能定義了從決策、製作到驗證的完整三階段流程(A·決定、B·製作、C·驗證),並支援多種工作模式,包括衝刺(Sprint)、工作室(Studio)、系列(Series)、修訂(Revision)以及有旁白的解說影片(Narrated explainer)。 在技術上,它透過 HTML 作為組合來源,利用內建的 `render.mjs` 腳本進行確定性渲染(支援 Node、Playwright 或 Chrome/Edge),並可輸出影格精確的 MP4、ProRes 4444(含 Alpha)或 WebM 格式。核心概念包括:從真實世界文物(如潮汐表、藥局傳單)借用「規則而非圖片」的「源世界」、記錄所有決策的 `ledger.md` 帳冊、以影格為單位的節拍表,以及用於驗證的 `check.py` 檢查器。它特別適合製作動態文字、解說影片(尤其是所謂的「Vox 風格」紙拼貼紀錄片)、電影級展示片、品牌影片、片頭、動態圖表(地圖、航線)、產品宣傳、字卡、計數器、社群媒體直式影片(Reels、Shorts、TikTok)以及編輯器疊加層,並且可以整合到 Remotion 或 HyperFrames 專案中。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ErtanLabs/ertanlabs-motion/tree/HEAD/skills/ertanlabs-motion

在你喜歡的 AI 中提問

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

說明文件

ErtanLabs Motion 是做什麼的?

動態製作往往會以一種可預測的方式變得平庸:簡報中所有未明確規定的選擇,都會被最常見的選項填補,而由最常見選項組成的影片,與成千上萬的其他作品毫無區別。此技能讓這些未明確的選擇變得清晰,為每個選擇賦予可追溯的來源,進行確定性渲染,並在任何人看到成品之前就先進行測量。

基本規則:每個可見的選擇都有其擁有者。 如果你無法指出字體、顏色、曲線或聲音的來源,那就代表沒人選擇了它。

流程

階段步驟產出物
A · 決定A1 檢測機器--doctor 結果,選擇的後端
A2 拆解簡報故事線、畫布、庫存、配樂、護欄、標記為假設的項目
A3 尋找源世界片段借用其語法的文物、敘事裝置、英雄節拍
A4 撰寫預設,然後推翻它最常見的版本及其替代方案
A5 維護帳冊與組合檔案並排的 ledger.md
B · 製作B1 以影格規劃包含預定停頓的節拍表
B2 權衡每個元素權重類別、主導與跟隨
B3 讓世界設定字體、顏色、聲音從來源填入帳冊的列
B4 校樣,然後渲染檢查過的主畫面,然後是影片檔案
C · 驗證C1 測量與檢視check.py 報告、連絡表、問題索引
C2 標記宣稱並交接以證據分組的交接清單

工作模式

  • 衝刺(短篇單一想法作品,或「直接做」):自行選擇源世界,撰寫五行帳冊(故事線、世界、英雄節拍、三個被替換的預設項、畫布),然後開始製作。校樣和測量流程仍會執行。
  • 工作室(品牌作品、較長片段、不明確的簡報):使用 --stills 為兩個候選源世界渲染主畫面,並排展示兩張圖片;人們判斷圖片比判斷描述快。由使用者挑選;如果沒有可用的人,則保留其主畫面在縮圖瞇眼測試(C1)中勝出的那個,並在帳冊中註明原因。
  • 系列(同一個頻道或活動的集數):首先閱讀專案中的所有舊有 ledger.md。新的一集不能同時重複上一集的源世界和英雄節拍結構;品牌常量帶有 fixed 標籤,可豁免此限制。
  • 修訂(對已交付片段的修改意見):將每個意見對應到節拍表的列,並將變更撰寫為一個節拍表差異比較,即舊列 → 新列。範例:「開頭太慢」→ grid 6-30 → 4-16、hold 30-60 → 16-40,其後的每一列都向後偏移 −20 影格。僅渲染變更的範圍(--range)供審閱,然後再渲染完整片段,並將差異比較附加到帳冊中。
  • 有旁白的解說影片(由旁白驅動的影片論文、紀錄片、歷史、金錢、犯罪或科學故事、紙拼貼風格):旁白即是時鐘,每個句子變成一個節拍。有兩條規則涵蓋了大部分品質:停頓與其句子同時結束,並且螢幕上的每個事實要不是被說出來,就是有來源。閱讀 references/paper-collage-explainer.md 並從 assets/collage-template.html 開始。

製作等級

無論工作模式為何,每個片段都有一個等級,寫在帳冊中:

  • 圖形(預設):在平面畫布上應用源世界的語法。適用於疊加層、字卡、UI 元件、數據展示以及編輯需要合成的任何東西。
  • 電影:放置在其實際場景中的文物,透過攝影機觀看,由世界解釋的來源照明,具有材質、節拍之間的生命力、三到四個場景以及包含音樂的設計聲音。適用於展示片、登陸頁面和儲存庫首頁、品牌影片、產品發布、地圖和路線展示,以及每當有人要求「電影感」、「生動」、「高級」或「不那麼扁平」的時候。在規劃前閱讀 references/film-level.md;它會在節拍表之上增加一個場景列表及其自身的檢查。

階段 A · 決定

A1 檢測機器

node scripts/render.mjs --doctor

輸出決定後端:Node、Playwright 或已安裝的 Chrome/Edge、ffmpeg、ffprobe、NVENC。用一行文字向使用者報告結果。如果 HTML 路徑不可用,B4 會列出替代方案;如果使用者已經有 Remotion 或 HyperFrames 專案,請在其中工作。

A2 拆解簡報

  1. 故事線: 影片想表達的唯一一句話。如果沒有這個,片段就會變成裝飾品;草擬一個並確認它。
  2. 畫布: 比例、長度、fps、目的地。尺寸和安全區域詳見:references/formats-and-safe-zones.md。
  3. 庫存: 影片素材、螢幕錄影、標誌、照片、數據、AI 生成的畫面。已有的素材會塑造概念,而不是附加在概念之上。
  4. 配樂: 旁白、音樂或無。如果有旁白或音樂,音訊會決定時間(references/sound-and-sync.md)。使用者提供的音訊是最終版本:未經使用者同意,切勿新增或移除停頓、剪輯、拉伸或重新調整時間;應改為調整畫面。
  5. 護欄: 品牌字體和顏色、必要和禁止的元素、截止日期。

未知項會成為帳冊中的假設,標記為 assumed。僅在答案會改變源世界時才提出問題。

A3 尋找源世界

不要選擇「一種風格」。選擇一個來自主題世界的真實文物,並借用其語法:一個潮汐表、一張藥局傳單、一個翻頁式航班資訊板、一卷地震儀記錄紙、一份經過塗黑的機密檔案、一個編輯的剪報桌。一個文物可以同時解決好幾個決定——它使用的字體、賦予色票的墨水和材質、事物在其中變化的方式(翻轉、印刷、蓋章、填充、繪製)、它的表面——這樣做就能讓這些決定彼此協調一致。

  1. 列出五個與該主題相關的人實際會接觸或閱讀的文物。
  2. 優先選擇本身內建動態的:那些會自己翻轉、印刷、填充、繪製、蓋章或滾動的東西。
  3. 借用規則,而非圖片。不是在文字後面放一張車票照片,而是借用車票的邏輯:穿孔分隔、序號計數、蓋章註銷。

references/source-worlds.md 描述了按運動方式分組的 31 個世界。將其視為校準工具;最適合某項工作的世界往往不在列表中。

再命名兩個東西:

  • 敘事裝置: 一句話說明故事線如何變得可見(「潮汐曲線繪製出來,畫面中的水跟隨著筆尖」)。
  • 英雄節拍: 承載故事線的節拍。它會獲得最長的預定停頓,以及片段中最大的狀態或尺度變化。渲染後,check.py 測量到的最長停頓應該是英雄節拍的;如果不是,則表示重點放錯了位置。在有旁白的情況下,停頓仍然與其句子以及句後的停頓同時結束。如果英雄節拍需要更多時間,請在旁白仍在撰寫或錄製時要求更長的停頓;對於已完成的旁白,則讓停頓符合時間,且切勿讓畫面停留在下一句台詞上。

A4 撰寫預設,然後推翻它

第一個想法通常是最常見的。讓它變得可見,然後替換它:

  1. 誠實地用一句話寫下這個影片的預設版本:一個平均水準的模型會根據這個提示做出什麼。
  2. 從那句話中選擇至少三個決定(字體、色票、佈局、入場方式、轉場、聲音),並為每個決定撰寫一個替代方案及其來源:源世界、材質、數據或配樂。
  3. 一個你無法用理由替換的預設可以保留;它會被放入帳冊,標記為 owned default。

A5 維護帳冊

在開始製作之前填寫它,展示它,並將其與組合檔案並排儲存為 ledger.md。它同時也是下一集的記憶體。

LEDGER · <專案名稱> · <日期>
故事線:
畫布: 1080×1920 · 30 fps · 8 s · Reels · 安全區域: 直式
源世界:
敘事裝置:
英雄節拍(影格):
預設版本(一行):

| 圖層        | 決定                  | 來源 / 原因                 | 它替換的預設項 |
|-------------|------------------------|-----------------------------|----------------|
| 字體        |                        |                             |                |
| 色票        | 十六進位值 + 各角色   | 從 ... 取樣                 |                |
| 佈局        |                        |                             |                |
| 時間基底    | fps, 權重類別, 停頓   |                             |                |
| 材質        |                        |                             |                |
| 聲音        |                        |                             |                |
| 轉場        |                        |                             |                |

權利(字體, 音樂, 數據, 圖像):
假設:

階段 B · 製作

B1 以影格規劃

一個節拍表是一個精簡的曝光表:在撰寫程式碼之前,就將動態以數據形式寫出。範圍使用影格的 [in, out) 表示法;停頓會有自己的列。

BEAT SHEET · 30 fps · 240 frames (8 s) · 1080×1920
| 節拍 | 影格範圍   | 元素        | 類別        | 動作                          | 承載         | 聲音        |
|------|------------|-------------|-------------|-------------------------------|--------------|-------------|
| 1    | 6-30       | grid        | mark        | lines plot, staggered         | enter        | pen         |
| 1    | 30-60      | -           |             | HOLD                          |              |             |
| 2    | 60-168     | tide curve  | set piece   | plots; water follows the tip  | link         | low swell   |
| 2    | 168-198    | -           |             | HOLD (hero)                   |              | silence     |
| 3    | 198-200    | headline    | stamp       | lands in the water            | land         | one knock   |
HOLDS: 30-60, 168-198, 200-240  →  預定停頓比例 42%

承載 描述了觀眾獲得的資訊:一個元素 進入、兩個事物 連結、一個狀態 改變,或一個節拍 落地 在配樂上。空的承載儲存格代表裝飾;刪除它。

停頓比例 是沒有顯著動態的影格所佔的比例。解說影片和標題作品通常在 20-35% 左右,音樂剪輯的蒙太奇較低,沉思性的作品較高。顆粒感和緩慢的次像素漂移屬於材質,而非移動。check.py 會測量此比例,以便比較計畫與結果。

有旁白或音樂時,將單詞和節拍的時間戳記轉換為影格編號並寫入表中。在有旁白的情況下,每個節拍還有一個 提示,即其第一個重音詞:節拍的主要元素應在提示出現時就定位,且沒有任何停頓會延伸進入下一個句子。

B2 權衡每個元素

為每個元素指定一個權重類別;該類別會從 references/motion-and-timing.md 中的集合選擇其曲線和持續時間,因此持續時間的差異是源於質量的不同,而非個人品味。

類別典型元素出現消失曲線
prop點點、標籤、小數字6-12 f4-8 fsettle 入場, launch 退場
panel標題、卡片、圖表區塊14-24 f10-16 fheavy
set piece攝影機、水面、地圖、大範圍30-90 f20-45 fheavy;機械類使用 linear
mark線條、路線、底線、手寫字長度÷ ~30 px/影格淡出pen
stamp註銷章、最終數值、切入1-2 f-step
  • 主導與跟隨。 在任何時刻,只有一個動作為主導;其他任何動作都由它引起(筆尖到達極限點,因此它的標籤才打開)。
  • 依賴順序。 一個元素只能在其依賴的元素出現在螢幕上之後才能出現:軸線先於其數據,路線先於其標記。
  • 海報影格。 影格 0 通常是縮圖,因此將其構建成一個完成、可讀的圖像,並讓動態從中生長出來。
  • 影格純粹。 每個值都僅從影格編號計算得出:不使用基於掛鐘時間的 CSS、計時器或未設定種子的隨機性(references/composition-contract.md)。

B3 讓世界設定字體、顏色、聲音

  • 字體 繼承自源世界。強調效果必須能通過縮圖瞇眼測試(C1):一個僅由色相強調的單詞,在灰色調且小尺寸時會消失,因此應使用尺寸、粗細、位置或時間來強調。設定 <html lang> 並使用符合地區的大小寫;render.mjs 會對頁面上實際的文字進行字形測試。詳情:references/typography.md。
  • 顏色: 每種顏色都有一個命名的職責(底色、字體、信號、數據系列)。沒有職責的顏色會被移除。應從真實樣本取樣數值,而非自行憑空創造:python scripts/check.py --palette reference.jpg。詳情:references/color-and-texture.md。
  • 聲音 陳述只能是「已測量」或「未驗證」,因為音訊無法用肉眼檢查。聲音欄中的每個條目都指向一個可見的成因或背景音。詳情:references/sound-and-sync.md。

B4 校樣,然後渲染

後端時機
HTML + render.mjs每當 --doctor 通過時的預設選項。從 assets/composition-template.html 開始(有旁白的解說影片則從 assets/collage-template.html 開始);合約詳見 references/composition-contract.md。
Remotion / HyperFrames使用者已在其中工作。使用相同的帳冊和節拍表,語法不同:references/backends.md。
文物預覽僅在環境提供動態或影片文物類型時使用,且僅作為預覽;可交付成果仍是一個渲染出的檔案。
基底畫面程式碼無法令人信服地繪製的鏡頭(人物、動態中的真實地點)可以來自影片素材或影片模型,作為不含文字的基底畫面;所有排版元素仍保留在組合中。references/backends.md。

地圖、地球儀和路線:也請閱讀 references/maps.md(展示路線請看 §7a)。

在建立其餘部分之前,先校樣英雄節拍:

node scripts/render.mjs comp/index.html --stills 0,170,last             # 海報影格, 英雄節拍, 結束影格
node scripts/render.mjs comp/index.html --range 150-210 --scale 0.5     # 以半尺寸渲染英雄節拍
node scripts/render.mjs comp/index.html -o comp/out.mp4                  # 完整渲染
node scripts/render.mjs comp/index.html --alpha -o comp/overlay.mov     # 含 Alpha 的 ProRes 4444

使用你的影像工具開啟校樣圖片...

相關技能