X Motion
創作出能傳達特定內容的動態作品。品味是脈絡化的:一段安靜的技術展示與一段熱鬧的音樂識別需要不同的決策。一個功能強大的渲染器並不等於好的設計。作品的品質來自於藝術指導、執行、觀察與反覆修改。
這是一套原創、可攜帶的動態設計方法,靈感來自 LangChain 的文章 中有關設計代理的討論。它不依賴 LangChain 程式碼或服務,也不暗示任何附屬關係。
工作契約
- 遵循主機專案的指示與使用者的實際範圍。此技能不授予發布、花費、呼叫模型、取得憑證或使用未授權資產的權限。
- 在特定時刻使用一個視覺論點與一個主導焦點。複雜性可以支持論點,但不能意外地與之競爭。
- 將類型、間距、影像處理、動態與聲音設計為一個系統。不要用裝飾來將一個薄弱的概念偽裝成複雜的精緻。
- 根據任務與可用環境選擇工具。不需要特定的模型、框架或渲染引擎。
- 將技術證據與美學判斷分開。切勿捏造品味評分、觀眾反應或認可。切勿在僅檢查靜止畫格時就聲稱已觀看過影片。
- 保持資產在本機,並明確說明其來源。鎖定依賴項。除非專案刻意要求,否則不要將產生的渲染版本納入版本控制。
選擇最小的有用流程
小型編輯: 複製修正、時間調整、資產替換或孤立的緩動修正可能可以跳過新的簡報、分鏡腳本與動畫預覽。保留已核准的方向;檢查受影響的段落及其相鄰段落,重新渲染,並執行相關檢查。如果變更改變了訊息、層級或敘事,則升級到完整流程。
新合成或大幅重新設計: 遵循以下階段。根據任務調整產出物的規模;一個六秒的片頭不需要一本製作聖經。如果遺漏了關鍵意圖,請提出一個聚焦的問題。當無法提出問題時,標記一個保守的假設,並避免不可逆轉的工作。
1. 簡報 → 視覺論點
確定受眾、預期收穫、觀看情境、持續時間、長寬比、交付物、所需副本/資產、品牌限制、可及性需求,以及聲音是否能承載意義。將硬性要求與偏好分開標記。
以下列形式撰寫論點:
針對 [受眾],讓 [概念] 透過 [視覺機制] 感覺 [特定品質],使他們理解或做到 [結果]。
命名組織隱喻、主導主體、字體角色與動態邏輯。像「高級、電影感、乾淨」這樣的清單不是方向。解釋哪些選擇讓這些詞彙具體化。使用參考文獻來識別原則,而不是複製他人作品的身份。
閱讀 藝術指導 以了解簡報解析、參考分析與一致的視覺語言。
2. 分鏡 → 可讀的論證
在打磨畫格之前先規劃段落。針對每個段落,記錄:
| 時間範圍 | 觀看者學到什麼 | 焦點 / 關鍵畫格 | 轉場與理由 | 音訊提示 |
|---|---|---|---|---|
| 開始–結束 | 一個訊息 | 主體與層級 | 改變了什麼,以及為什麼 | 事件或有意的靜默 |
使用真實副本與實際資產比例繪製或渲染代表性畫格。給予足夠的閱讀與辨識時間;不要習慣性地均勻分配每個段落的時間。確認開場承諾、段落之間的因果關係以及最終收穫。在必要時,在昂貴的製作開始前與人類驗證關鍵副本或方向。
在鎖定構圖或文字時間之前閱讀 字體排版。
3. 動畫預覽 → 低成本測試時間
建立粗略的計時畫格、區塊或低細節動態。僅在法律允許且清楚標示的情況下使用臨時音效。以預期速度測試完整運行時間,而不僅僅是拖動檢查。
檢查注意力是否落在資訊所在處、文字是否可讀,以及結尾是否有空間收尾。在此處修正結構。將對方向的不確定性表面化,而不是將其打磨掉。
閱讀 動畫與攝影機 以了解時間設計與確定性場景建構;當聲音是作品的一部分時,閱讀 音訊。
4. 製作 → 有意識的執行
使用最終字體、資產、燈光或圖形處理、動態曲線、轉場與聲音,精煉已核准的段落。保留論點。每個添加的效果必須有一個任務:揭示、連接、強調、定位或解決。如果它不執行其中任何一項,則移除它或證明其表達角色的合理性。
可選的 HTML 渲染器合約
使用 X Motion HTML 渲染器時,每個合成公開:
window.motion = { width: 1920, height: 1080, duration: 8, fps: 30, poster: 5.5 };
window.renderFrame = function (tSeconds) {
// 從此時間戳與固定的場景資料設定每個動畫屬性。
// 重複呼叫(包括順序錯誤的呼叫)會產生相同的畫格。
};
window.renderAudio = async function ({ sampleRate }) {
// 可選。在 OfflineAudioContext 中建構配樂並返回其 AudioBuffer。
};
這些數字是說明性的,不是設計預設值。寬度與高度為像素;duration、poster 與 tSeconds 為秒;fps 為影格率。poster 為可選,命名用作縮圖的畫格。將它們與簡報匹配。
- 直接從提供的時間戳計算狀態。不使用實時時間、自主 CSS 動畫、累積模擬步驟、網路資產或未設定種子的隨機性。
- 在捕捉之前載入並解碼本地資產與字型。不要在
renderFrame返回後引入非同步影格變更;驗證主機渲染器的就緒機制。 - 定義在段落邊界與活動區間之外的行為。測試重複的時間戳與向後搜尋。
- 畫格函數定義視覺,而非音訊播放。聲音僅來自
renderAudio:一個或兩個聲道,離線渲染,每次呼叫相同。永不捕捉 HTML 媒體播放。
首先解析此技能目錄的真實位置,遵循任何安裝符號連結到完整的 X Motion 克隆。相對於已解析的 skills/x-motion 目錄,儲存庫根目錄為 ../..,而不是相對於使用者的目前工作目錄。在執行這些命令之前,請切換到該儲存庫根目錄;下面的合成路徑是相對於它的。
匯出分鏡 PNG 與 manifest.json(預設無影片)。加上 --times 0.5,2,4.25 以選擇靜止畫格,加上 --audio 以同時匯出 sound.wav 以及音量數據:
node scripts/render.mjs path/to/scene.html --out renders/name-storyboard --audio
匯出分鏡 PNG、完整畫格、poster.webp、film.mp4(當存在 renderAudio 時,將配樂以 AAC 格式多工合成)與 manifest.json:
node scripts/render.mjs path/to/scene.html --out renders/name-video --video
為每次修訂使用一個新的輸出目錄。在報告成功之前檢查 manifest.json 與實際輸出:它記錄了畫格確定性檢查、音訊確定性檢查、整合響度、真實峰值與削波樣本。影片編碼需要 ffmpeg。在其他主機中,保留確定性時間戳語義並調整匯出命令。
5. 評論 → 修改 → 交付
當反饋指定一個已發布的影片 ID 時,閱讀 圖庫反饋。解析確切的影片,保留其身份與反饋,並在新的關聯 ID 下發布修訂版本。向前推進範圍內的教訓,而不是將每個特定片段的指令視為通用規則。
檢查渲染成品,而不僅僅是原始碼。檢視分鏡以了解構圖,播放影片以感受節奏;聆聽導出的音訊(如果有的話)。如果無法播放或聆聽,請確切說明哪些部分尚未審查。
使用 評論與交付 將可測量的失敗與主觀疑慮分開。首先解決影響最大的問題。將評論/修改循環限制在每個方向的 三次反覆運算。如果方向仍未解決,請停止,解釋相互競爭的疑慮,並要求人類在繼續之前做出選擇或澄清。技術通過不等於美學批准。
交付成品位置、原始碼位置、匯出規格、驗證證據、已知限制以及未解決的批准問題。報告您實際觀察到的內容。未經授權請勿對外發布。
參考文獻地圖
僅載入當前階段所需的參考文獻: