社群影片格式處理器是做什麼的？

你拿到的影片已經正確——故事、動態與品牌都已完成——但你要讓它 在動態牆上站穩腳步。這和創作影片是截然不同的工作。一個在筆電上看來很棒的橫向展示影片，放到直向動態牆上就死了：它會被加上黑邊變成一條細線，字幕會跑到 UI 按鈕下方，首影格是黑色的，而且也不會迴圈。這項技能會針對每個平台解決這五個問題，並輸出機械工具組所需的精確規格。

這是品味層。它與 remotion-video-production 工具組搭配使用：你在這裡決定重新構圖、安全區、字幕樣式與迴圈方式，然後將具體規格交給 remotion-compose（負責設定新的 <Composition> 寬高與燒錄字幕）和 remotion-render（負責依平台匯出）。請勿在此撰寫組成程式碼或執行渲染——只需命名規格並交付即可。

當你收到任何關於重新構圖、調整大小、裁切、轉直向、加字幕、加說明文字，或「為社群平台格式化/匯出」的請求，甚至只是「讓這個在手機上能看」，都應主動觸發此技能。

工作流程

請依序執行。先重新構圖再處理字幕（字幕的安全區取決於新的長寬比），並在交付渲染前設計好首影格與迴圈。

步驟 1 - 確定目標平台並擷取其規格

詢問要上架哪些平台，然後從 references/platform-specs 的表格中擷取每個平台的硬性限制。每個平台你需要四個數字：長寬比、解析度、最大長度，以及安全區域（平台 UI 覆蓋的像素範圍——使用者名稱、字幕、動作列、進度條）。絕對不要猜測這些數字；放在動作列間隙中的字幕在裝置上是看不見的，但在預覽中卻沒問題。一部原始影片通常會產生兩到三個匯出版本（例如一個給 TikTok/Reels/Shorts 的 9:16 主版本，加上一個給 LinkedIn/X 的 1:1 或 16:9 版本）。

步驟 2 - 選擇重新構圖策略（9:16 ↔ 16:9）

裁切會決定哪些像素保留下來，所以主體必須保持在新的畫面範圍內。為每個匯出選擇一個策略——請參閱 references/reframe-strategies：

重新佈局（最佳）。 不要裁切 16:9 的像素——直接為新的畫布重新創作場景：將原本並排的內容堆疊起來、放大文字、將主體移至垂直中心。這是 remotion-compose 的變更（新的寬高，相同內容），而且總是優於裁切。請交付目標尺寸。
中心裁切。 保留 16:9 畫面的中間列以變成 9:16。快速，但它會丟棄外側的三分之一——只有當主體居中時才安全。
填補 / 模糊條。 將整個 16:9 畫面放入 9:16 中，並用一個模糊的縮放副本填滿上下方。對於談話性頭像或螢幕錄製來說可以接受；但在動態設計作品中顯得很懶散。
追蹤裁切。 裁切到主體，並隨著時間移動裁切視窗以跟隨動作。效果最強，工作量最大；請為 remotion-compose 指定關鍵影格。

從 9:16 轉為 16:9 是同樣的邏輯反過來：重新佈局以利用新的橫向空間，而不是將直向片段加黑邊變成橫向條狀。

步驟 3 - 將安全區域映射到新的畫面

對於每個匯出版本，疊加平台的安全區域，並確保所有必要元素——字幕、標誌、CTA、關鍵主體——都保持在安全矩形內。右/下邊界（動作列 + 字幕區塊）是 9:16 上常見的殺手。執行下面的 safe_area.js 來將百分比邊距轉換為你確切解析度的像素方塊，然後將這些數字作為佈局邊界傳遞給 remotion-compose。將不安全地帶視為任何需要被閱讀的內容的禁區。

步驟 4 - 設計平台原生的首影格

首影格就是縮圖和吸引目光的關鍵；自動播放是靜音開始的，所以第 0 影格必須在沒有音訊的情況下傳達意義。不要以黑色、標誌開場或淡入中途作為開頭。以一個可讀的鉤子作為開場：最終結果、一個粗體字幕行，或主體已經在畫面上。這是 remotion-compose 對開場場景的編輯（或是一個 1-2 秒的預掛鉤子）。請確切指定第 0 影格顯示什麼。

步驟 5 - 指定燒錄字幕

假設為靜音播放：字幕是強制的，不是選項，並且必須是 燒錄進去的（渲染到像素中），因為上傳的 .srt 側邊欄在不同平台上不一致且無法設定樣式。為 remotion-compose 指定：位置（在安全區域內，通常是下方三分之一處，但在字幕區塊邊界之上）、樣式（大、高對比、半粗體，並帶有描邊或實色背景以便在任何背景上都能閱讀）、時機（與語音同步的短語級別區塊，而不是一整塊文字），並且螢幕上永遠不要超過大約 2 行。對於動態逐字字幕，請將動態設計委託給 kinetic-typography，並在此僅指定安全區域框和時機。

步驟 6 - 設計迴圈

動態牆會立即重播影片，所以乾淨的迴圈能倍增觀看時間。選擇一種：

無縫迴圈 - 最後一影格與第一影格匹配（相同的構圖、位置、顏色），使重播不可見。最適合短暫的氛圍/品牌迴圈。
鉤子迴圈 - 以一句引導觀眾回到開頭的話作為結尾（「……這是第一步」），使重看成為有意的行為。
硬停止 - 一個明確的 CTA 結尾卡；適用於較長的敘事性作品，在這些作品中迴圈會感覺不連貫。

對於無縫迴圈，開頭和結尾是 remotion-compose 的限制條件（匹配第 0 影格和最後一影格）。指定迴圈類型以及要匹配的影格。

步驟 7 - 輸出匯出規格並交付

填寫下面的 export-spec 模板——每個平台一個區塊。該規格是給機械工具組的簡報：remotion-compose 根據每個長寬比建立一個帶有安全區域佈局、首影格和燒錄字幕的 <Composition>；然後 remotion-render 匯出每一個（一個 9:16 的匯出就是在 1080×1920 下建立的 Composition，符合 remotion-render 的直向預設）。請勿在此渲染——只需交付規格。

品質標準

只有當下列所有條件都成立時，匯出才算 A+：

每個平台匯出都指定了真實的長寬比、解析度、最大長度以及安全區域框——從規格表中擷取，從未猜測。
在任何目標平台上，沒有必要元素（字幕、標誌、CTA、主體）位於不安全的邊界中；已根據 safe_area.js 的方塊驗證。
重新構圖是重新佈局或追蹤裁切，否則主體會遺失——而不是盲目的中心裁切或懶散的模糊條填補。
第 0 影格在靜音下也能閱讀：一個鉤子、結果或主體——絕不是黑色、不是單純的標誌、也不是淡入中途。
字幕已燒錄、位於安全區域內、以短語區塊呈現、≤2 行、高對比。
迴圈類型是有意選擇的，並且為了匹配而指定了無縫迴圈的首/末影格。
輸出是一份交給 remotion-compose / remotion-render 的規格——此技能沒有編寫任何組成程式碼或執行任何渲染。

請勿

請勿在此建立專案結構、編寫組成程式碼或執行渲染——指定規格並委託給 remotion-setup / remotion-compose / remotion-render。
當主體不在中心時，請勿將 16:9 來源中心裁切為 9:16；你會將主體裁掉。請改用重新佈局或追蹤裁切。
請勿將字幕、CTA 或標誌放在右/下邊界，那裡會被平台的動作列和字幕區塊覆蓋。
請勿依賴上傳的 .srt/.vtt 側邊欄字幕給社群平台使用；將它們燒錄到像素中，這樣它們總是會渲染，而且你可以控制樣式。
請勿以黑色、標誌開場或淡入作為開頭——第 0 影格就是縮圖。
請勿將一個 16:9 的檔案傳送到每個平台；直向動態牆會把它加黑邊變成一條細線。請根據長寬比匯出。
請勿超過平台的最大長度，並期望它「仍然可以發佈」——它會被截斷或拒絕；請在剪輯中將長度修剪到限制內。
請勿在此設計逐字字幕動畫——那是 kinetic-typography 的工作；只需指定安全框和時機。
請勿在此規劃分鏡腳本或鏡頭順序——如果影片還不存在，那是 video-storyboard 的工作；此技能是重新構圖一個已經剪輯好的影片。
請勿在此調整元素的移動方式（緩動、間距、跟隨動作）——那是 motion-design-principles 的工作；此技能僅指定新的畫布和邊界。
請勿在此為重新構圖選擇色調、對比度或燈光——將這些選擇委託給 motion-color-and-light。
請勿在此指導產品示範內容或螢幕編排——那是 product-demo-director 的工作；此技能假設內容已鎖定。
請勿在此設計配樂、節拍同步或聲音——字幕假設為靜音自動播放，但音訊是 sound-and-music-sync 的工作。

計算工具

自包含的 Node 腳本。儲存為 safe_area.js 並使用 node safe_area.js 執行。它將每個平台的百分比安全區域邊距轉換為該平台解析度的像素方塊，以便你可以將確切的佈局邊界交給 remotion-compose。無依賴項。當規格變更時編輯 platforms 區塊。

// Social safe-area calculator. Run: node safe_area.js
// Insets are the % of each edge the platform UI covers (top/right/bottom/left).
// Right + bottom are large on 9:16 because of the action rail and caption block.
const platforms = [
  { name: 'TikTok',         w: 1080, h: 1920, top: 6,  right: 11, bottom: 17, left: 3 },
  { name: 'Reels',          w: 1080, h: 1920, top: 7,  right: 12, bottom: 18, left: 3 },
  { name: 'Shorts',         w: 1080, h: 1920, top: 5,  right: 12, bottom: 13, left: 3 },
  { name: 'X (in-feed)',    w: 1080, h: 1080, top: 4,  right: 4,  bottom: 12, left: 4 },
  { name: 'LinkedIn',       w: 1080, h: 1350, top: 4,  right: 4,  bottom: 10, left: 4 },
]

function box(p) {
  const insetX = (pct) => Math.round((pct / 100) * p.w)
  const insetY = (pct) => Math.round((pct / 100) * p.h)
  const x = insetX(p.left)
  const y = insetY(p.top)
  const safeW = p.w - insetX(p.left) - insetX(p.right)
  const safeH = p.h - insetY(p.top) - insetY(p.bottom)
  return { x, y, safeW, safeH }
}

for (const p of platforms) {
  const b = box(p)
  console.log(
    p.name.padEnd(14),
    `${p.w}x${p.h}`.padEnd(11),
    'safe box -> x:' + String(b.x).padEnd(4),
    'y:' + String(b.y).padEnd(4),
    'w:' + String(b.safeW).padEnd(5),
    'h:' + b.safeH
  )
}

工作範例輸出

TikTok         1080x1920   safe box -> x:32   y:115  w:929   h:1479
Reels          1080x1920   safe box -> x:32   y:134  w:918   h:1440
Shorts         1080x1920   safe box -> x:32   y:96   w:918   h:1574
X (in-feed)    1080x1080   safe box -> x:43   y:43   w:994   h:907
LinkedIn       1080x1350   safe box -> x:43   y:54   w:994   h:1161

解讀：在 TikTok 上，將所有必讀元素佈局在 x 32→961, y 115→1594 的範圍內。右邊界（動作列：喜歡、留言、分享）佔用了最後約 119px，而下邊界（使用者名稱 + 字幕）佔用了約 326px——那裡的所有東西在裝置上都會被遮蓋，儘管在 Studio 預覽中看起來正常。將這些作為佈局邊界傳遞給 remotion-compose；在一個 1080×1920 的直向 Composition 上，將字幕和 CTA 定位在框內，而不是原始畫面的邊緣。

模板：export-spec

每個平台填寫一個區塊。這是 remotion-compose 和 remotion-render 所消耗的簡報——從 safe_area.js 貼上安全區域數字。

SOCIAL EXPORT SPEC. [FILL: video name]. Source: [FILL: 16:9 master, 1920x1080]

PLATFORM: [FILL: TikTok / Reels / Shorts / X / LinkedIn]
  Aspect / resolution:   [FILL: 9:16 / 1080x1920]
  Max length:            [FILL: e.g. <= 60s in-feed]
  Safe box (px):         x:[FILL] y:[FILL] w:[FILL] h:[FILL]   (from safe_area.js)
  Reframe strategy:      [FILL: re-layout / center crop / blur-pad / punch-and-track]
    -> remotion-compose: [FILL: new Composition WxH + layout notes / crop keyframes]
  First frame (frame 0): [FILL: the muted hook shown at 0 - never black/logo/fade]
  Captions:              burned-in, [FILL: position in safe box], <=2 lines,
                         phrase-chunked, [FILL: style - size/contrast/backing]
  Loop:                  [FILL: seamless / hook-back / hard stop]
    -> if seamless:      frame 0 matches last frame at [FILL: position/color]
  Render:                remotion-render [FILL: preset, e.g. 1080x1920 H.264 MP4]

(repeat the block for each target platform)

references/platform-specs

在發佈前請根據每個平台當前的創作者文件進行驗證；這些是穩定的形狀，但限制會漂移。長寬比和安全區域比確切的最大長度更重要。

TikTok - 9:16, 1080x1920。動態牆中的最佳點是短片（約 60 秒以下），上傳可以更長。右邊的動作列和下邊的字幕區塊很大；將必讀內容保持在高處並置中。有聲文化，但為了無障礙和靜音自動播放，仍然要加字幕。
Instagram Reels - 9:16, 1080x1920。最多約 90 秒。與 TikTok 類似的右/下 UI，加上底部的個人資料/音訊列。網格中的裁切是 1:1，所以中心也必須能作為方形縮圖閱讀。
YouTube Shorts - 9:16, 1080x1920。最多 60 秒（任何更長的都會被截斷）。類似 Instagram 和 TikTok 的 UI。字

社群影片格式處理器