twodorz/motion-studio

Motion Studio

完全以程式碼製作短片（通常為 9:16 1080×1920 的 Reels，也支援 16:9 / 1:1 / 4:5）。

• 畫面。一個 HTML 頁面（comp.html），其 window.renderAt(t) 會繪製出時間 t 的準確影格。
• 捕捉。無頭 Chromium 捕捉每個影格；ffmpeg 進行編碼。
• 聲音。以 Python 從同一時間軸合成：音樂、音效與環境音，母帶處理至 −14 LUFS。
• 3D（選用）。鏡頭來自一個輕量級 GPU 路徑追蹤器（pt.js），具備柔和光線、真實反射、景深與動態模糊。

觀眾所見的一切皆是 t 的純函數。這使得渲染結果可重複、可跳轉、可續傳。

如果請求是編輯、加字幕、壓縮或調整已存在影片的色彩，或是要製作簡報或網站動畫，請說明此技能並非合適工具，並直接提供協助。從提供素材（活動、DJ、去年的派對）剪輯出宣傳片則在範圍內：請使用 templates/footage/ 與 references/footage-promos.md。

此技能的內容

路徑	說明	何時閱讀
references/setup.md	一次性安裝工作室（Node、ffmpeg、Playwright、Python 虛擬環境、GPU 檢查）	在機器上首次使用時
references/render-pipeline.md	渲染合約、render.mjs 模式、分段渲染、ffmpeg 常見問題、確定性、聯絡表	建置或渲染任何影片時
references/design-rules.md	從真實客戶回饋中學到的敘事、佈局、字體排印、動態與轉場規則；審查	在腳本分鏡前與每次審查前
references/sound.md	事件驅動配樂 + 音效設計、混音目標、測量、響度完成	處理音訊時
references/path-tracer-3d.md	3D 路徑追蹤器：場景、材質、燈光、精確尺寸的產品建模、攝影機、匹配剪輯、成本	僅當影片需要 3D 場景時
references/claims-and-sources.md	確保事實正確：官方來源、CLAIMS.md、絕對不能聲稱的事項、安全擷取網站	任何包含產品事實、價格、規格或客戶品牌的影片
references/footage-promos.md	從提供素材剪輯的活動/俱樂部/藝人宣傳片：客戶要求、節拍網格音樂、DJ 轉場、臉部構圖、圖像技術	任何從真實素材建置的宣傳片
templates/film/	一個完整可運作的 2D 短片（15 秒、動態文字、產品卡片、計數器、圖表、CTA）+ 渲染、音效與完成腳本	每次從頭製作 2D 影片
templates/film-3d/	路徑追蹤器 + 範例場景（工作室、房間、房屋）+ 一個可運作的 3D 影片與外觀開發工具	從頭製作 3D 影片
templates/footage/	素材宣傳片流程：節拍網格上的鏡頭列表（剪輯、網格、分割、條帶、坡度、光圈）、臉部構圖、測量 BPM / 踢鼓相位 / 重拍、DJ 轉場、圖像工具箱（文字遮罩、人物後方文字、跑馬燈、光學置中）+ 範例	每次從頭製作素材宣傳片
scripts/setup_studio.ps1 / .sh	建立工作室資料夾並安裝所有項目（下載前會詢問）	首次使用
scripts/new_film.mjs	將範本複製到 <studio>/films/<name>	每次製作新影片時

工作流程

請依序執行以下步驟。每個步驟之所以存在，是因為跳過它曾導致一次客戶修改。

1. 簡報。
   • 取得影片長度、格式、幀率（預設 30；PAL 編輯器用 25）、語言、CTA 以及影片將張貼的平台。
   • 要求品牌檔案（Logo SVG/PNG、字體、顏色、現有貼文）。若無，則從他們的網站讀取品牌資訊。
   • 如果對方說「全力發揮」，仍須確認任何會改變產品或宣稱內容的事項。節奏與風格由你決定。
2. 研究與事實（references/claims-and-sources.md）。
   • 在撰寫任何文案之前，從官方來源收集每個數字與宣稱，放入 CLAIMS.md。
   • 當兩個來源衝突時，省略該數字並說明原因。廣告中的錯誤規格比沒有規格更糟。
3. 在節拍網格上繪製腳本分鏡。
   • 選擇 BPM，使影片長度為整數拍（例如：30 秒 = 96 BPM 下的 48 拍；15 秒 = 120 BPM 下的 30 拍）。
   • 將每個場景變換、字幕和聲音事件放在該網格上（bar(n, beat) / bt(b)）。
   • 將腳本分鏡寫成簡短表格（拍 → 畫面 → 文字 → 聲音），並在開始建置前與對方分享（若可聯繫到）。
4. 建立骨架。 執行 node <skill>/scripts/new_film.mjs <studio> <name> [film|film-3d|footage]，然後編輯 comp.html（2D）、film.js + world.js + comp.html（3D），或 sources.json + edit.json + comp.html（素材；請遵循 references/footage-promos.md）。
5. 在小循環中建置。 以低品質渲染聯絡表（node render.mjs beats 0.5,4,8,… 0.25 sheet）並查看。修正後重新製表。不要僅從一個影格判斷動態。在進行最終渲染之前，針對整個影片的每個拍（或半拍）製表。
6. 審查（node render.mjs audit 0.25）。文字不得與產品或其他文字重疊，且必須保持在平台安全區域內。修正每個問題；不要與審查結果爭辯。
7. 聲音。 執行 python audio.py out/mix.wav out/stems，然後執行 python check.py：檢查每個段落的響度、頻譜、警笛聲/滑音測試、咔嗒聲。
8. 最終渲染。先詢問（請見「渲染禮儀」）。
   • 2D 影片只需幾分鐘：node make.mjs frames + encode。
   • 3D 影片需要數小時：node render.mjs chunks + concat。
9. 完成。 node make.mjs finish 會正規化響度（−14 LUFS，−1.5 dBTP），並將音訊多工至畫面（畫面是主時鐘，絕不使用 -shortest），並寫入一個較輕量的 -share 副本。檢查輸出中的影格數、長度與響度。
10. 審查最終檔案，而不是預覽畫面。 從編碼後的 mp4 中擷取影格（每 0.5 秒）製成表格，並檢查每一個影格。然後附上一段簡短說明交付（依客戶語言使用羅馬尼亞文或英文）：內容是什麼、事實來源為何、客戶需要確認的事項。

渲染禮儀（對方的電腦是他們的）

3D 渲染會使 GPU 以 100% 負載運行一小時或更久，導致機器卡頓。寫入數百個影格圖片也會讓 Windows Defender 重新掃描每個檔案。曾經有人必須大喊「停，你把我的電腦搞壞了」。因此：

• 在任何會讓機器負載超過幾分鐘的工作開始前，說明那是什麼、需要多久時間、使用體驗會如何，然後等待對方同意。 提供以下選項：
  • 溫和模式（NICE_MS=25 DUTY=.35）：在 GPU 運算之間暫停，讓桌面仍可使用；
  • 全速模式；
  • 之後 / 夜間執行。
• 偏好使用 render.mjs chunks（1 秒 mp4 片段，可續傳），而非將每個影格寫為 PNG。
• 將長時間渲染啟動為分離程序，如此一來關閉對話不會導致其中途停止（Windows：Start-Process node -ArgumentList 'render.mjs','chunks' -WindowStyle Hidden）。
• 被告知停止時，立即停止。 終止程序樹（Windows：taskkill /T /F /PID …），以程序列表確認無任何殘留，並說明還有哪些項目正在使用機器（例如 Defender 正在掃描寫入的檔案），且不將責任歸咎於對方。
• 短聯絡表和單一測試影格不需要許可。 它們只需幾秒鐘。

不可協商的事項（每一項都曾導致一次修改）

• renderAt(t) 必須是純函數。
  • 影格之間不得攜帶狀態，不得使用 Math.random()（請使用種子化的 mulberry32），不得使用 CSS 轉場或動畫，不得使用計時器。
  • node render.mjs verify 會以順序與亂序渲染影格；它們必須相符。
• 在第 0 影格之前載入每個字重（對每個使用的字型面執行 document.fonts.load）。如果在影片中途才首次使用某個字型面，會導致一個影格顯示為空白。
• 絕不讓兩個文字區塊重疊，或讓文字覆蓋產品。
  • 即將消失的標題必須在下一個標題出現之前完全消失。
  • 計數器應依序切換（舊數字消失，然後新數字出現）；兩個數字疊在一起看起來像壞掉了一樣。
• 字幕停留在畫面上 ≥ 1.5 秒，每段 ≤ 7 個字，每個拍傳達一個想法。 讓第 0 影格成為可讀的縮圖。
• 絕不捏造數字、客戶、評論或結果。 僅在畫面上顯示有日期佐證的價格，且僅在客戶同意下。
• 除非另有要求，否則聲音必須嚴肅。 不要為科技產品使用玩具般的馬林巴琴或鈴鐺聲，也不要使用連續的音調滑音：曾有短片的火花聲被形容為「末日警笛」。
• 使用真實 UI 與真實素材（以高 DPR 從客戶自己的網站進行 Playwright 裁剪）。絕不手動重新繪製客戶的 UI 或 Logo。絕不在真實網站上點擊購買、提交或發送按鈕。