Motion – 以程式碼製作動態圖像 (Remotion)

Motion

Motion graphics 以程式碼編寫：每個顏色、時間與邊距皆來自品牌 token 檔案，且未經 2-3 個關鍵影格草稿核准前絕不渲染。下列規則源於實際修正經驗，每一條都說明了其存在的原因。

用途

類型	說明
動畫 B-roll	以全螢幕場景或圖形覆蓋一段語音
Alpha 遮罩	帶透明度的圖形，疊加在影片之上或人物背後
彈出視窗	數據進場、停留約 1 秒多、然後退場
字幕	無框，突顯一個詞；或動感字幕 (僅關鍵詞)
聊天模擬	一款即時通訊 App 的對話，需逼真且易讀
螢幕畫面	4:3 比例卡片中的網頁或桌面應用程式，附標題
封面	Reel 的第 0 影格

在進行排版前，先決定以下兩種形式之一：

1. 展示數據或產品內部 (面板、指標、收件匣)：平面且密集的介面，所有內容需同時可讀，卡片內含真實照片與影片，鏡頭幾乎靜止 (縮放比例 1.00 → 1.02)。狀態在其原位改變：該行已經存在，僅其標籤變動。畫面要填滿。
2. 敘述一個場景：以素材為主。特寫鏡頭、鏡頭真實移動、裝飾簡潔、僅一句話。

圖表並非一種類型：如果想法可以畫成箭頭流程圖，就直接用產品展示來呈現該流程。

準備工作

• 一個 Remotion 專案 (npx create-video@latest)、Node 與 ffmpeg。
• 品牌 token 程式碼 位於 src/marca/：tokens.ts (顏色、字型、圓角半徑、邊距)、movimiento.ts (時間與曲線) 以及一個 useMarca() 鉤子，用以提供所有已縮放的設定值。建構方式與範例請見：references/tokens.md。
• 每種圖像類型一個獨立入口 (src/piezas/<pieza>.tsx，包含其 registerRoot 與 Composition)：如此打包檔才會小，且各類型不會互相影響。
• 畫布預設為 1080×1920，30 fps，除非時間軸另有指定：開始前請先確認時間軸的尺寸與 fps。

工作流程

1. 簡報 (Brief)。時間軸中的確切區段 (入點 → 出點)、該區段的語音內容、允許使用的數據及其來源、可用的素材以及避免使用的元素。若有遺漏，請提問。
2. 語音轉寫 (Voice)。以最終時間軸上實際的語音逐字轉寫，而非原始音檔 (refs/subtitles.md)。實際拍攝的語音常與劇本有出入。
3. 時長 (Duration)。區段的時長，以常數表示並在註解中標註 timecode，再加上 1 個影格的緩衝：export const DURACION = 157; // 00:00:51:22 → 00:00:56:29。
4. 設計 (Design)。畫面內容須與語音逐句對應。動畫與音效同步的時刻 (每個進場的訊息、每個節拍) 需標記為常數，供 Composition 與特效腳本讀取。
5. 草稿 (Sketch)。使用 remotion still 製作 2-3 張關鍵影格，並繪製安全區域輔助線。展示草稿並等待確認。
6. 渲染 (Render) 含背景或 Alpha 透明通道 (詳見下方)。
7. 音效 (Sound)。每個動畫皆需附帶其音效：將時刻傳遞給 sonido 技能。
8. 檢查與交付 (Check and Delivery) (見此頁末尾)。

不可違反的原則

• 禁止在元件內手動設定任何顏色或尺寸：所有值必須來自 token。原因： 更改色調只需編輯一個檔案，且沒有人會在每個圖像中發明新的灰色。
• 每影格只允許一個焦點，使用品牌強調色：標題中的一個詞 或 一個按鈕，絕不能兩者同時。原因： 兩個東西同時搶眼，等於一個也看不清。(模擬介面中的自有顏色不在此限。)
• 禁止彈跳動畫。進出場使用 token 定義的時間與曲線；禁止使用 spring()。原因： spring() 會超調並回彈，看起來像玩具。
• 時間以秒為單位，絕不使用影格數。原因： 若延遲以影格計，從 30 fps 轉為 60 fps 時速度會加倍。
• 安全區域需保留足夠空間 (請見數值表格)。可讀內容應距離左右邊緣約 100 px、距離頂部約 290 px：54 和 224 是底線，而非設計的基準線。原因： App 介面會遮擋邊緣，若貼緊邊界會感覺「所有東西都太靠邊了」。
• 構圖中心點位於 x 540。不得為避開 App 按鈕而偏移構圖：位於該高度的內容應對稱縮窄。原因： 偏移的構圖比上方的圖示更明顯。
• 每個物件必須完整顯示在畫面內。不得被邊框切斷；未扮演主要角色的物件應以淡出方式移開。原因： 被切斷的手機或卡片看起來像錯誤。
• B-roll 中必須有事件發生：鏡頭移動，且發生一個具體動作，該動作 就是語音中的那句話，而非主題。原因： 「什麼都沒發生」是最常見的退件理由。唯一例外是客戶的實際產品：應直接展示，而非重建或為其發明動作。
• 最長每 4 秒必須有新元素出現，且不得連續出現兩個相同動畫。原因： 兩個接連的放大動畫會抹去剪輯點。
• 結尾不可靜止：在最後一段加上極慢的推鏡。原因： 凍結的畫面看起來像渲染錯誤。
• 上升的數字是圖表；直接出現的數字是標籤。在 Alpha 圖層中，每個數字都需有其本身的動畫物件 (計數器、測量儀、長條圖、圖示動作)，文字為輔助。原因： 純文字疊在影片上會看起來像字幕。
• 一鏡到底、景深與細節。使用連續鏡頭橫掃場景，而非獨立的入場動畫；物件有不同的深度；每個元素都帶有名稱、時間與狀態。原因： 那些充滿空白的圖表式圖像曾被以「太過簡單」為由退回。
• 無框字幕，每句突顯一個詞；絕不疊在 B-roll 上，也不與已表達相同資訊的圖形重疊 (refs/subtitles.md)。
• 可讀的模擬聊天：手機置中，整個 App 均勻放大，一次只顯示一則訊息並給予足夠閱讀時間；若要強調，應將其餘部分模糊，而非使用暗色遮罩 (refs/alpha-and-chats.md)。
• 畫面中的真實螢幕內容優先：不得覆蓋其文字或標題列；彈出視窗應放置於其空白區域。
• 禁止黑色邊框或生硬邊緣：若鏡頭在素材上移動，最小縮放比例為 1.04 (若橫向平移則為 1.18)；使用平滑漸層與圓角。原因： 縮放時露出黑色邊框，或跳躍的漸層，看起來像一個框。
• 不得虛構數據或重複使用圖像。數字、名稱與截圖必須來自使用者；模擬內容不得顯示真實客戶數據。每個圖像都應帶有獨立的圖形：重複使用他人圖形會被察覺。
• 動畫必須配合語音，絕不能反過來：不得為了配合圖形而在語音中插入停頓。
• 修正時不應重新渲染整個作品：僅渲染有變動的區段，進行拼接並使用新檔名 (refs/3d-and-pitfalls.md)。原因： 不覆蓋已放置的版本，且不會為了三秒的修改浪費一小時的渲染時間。

數值

項目	數值 (1080×1920 畫布)
左右邊距	每側 54 px (可讀內容距邊約 100 px)
頂部	可讀內容不得高於 y 224 (實際可讀內容從約 y 290 開始)
可讀區域	y 420 至 y 1495
按鈕列	從 x 897 開始，y 1228 向下；在該高度，可讀內容應位於 x 183–897 範圍內
大而寬的數字	完全位於 y 1228 以上
手機特寫	最多佔畫面寬度的 0.8
全景組合	最寬為 1080 − 2 × 54
彈出視窗	停留在畫面上約 1 秒多後消失 (若停留，8 秒後將出現六個視窗，導致無法閱讀)
節奏	每 4 秒或更短時間出現新元素
鏡頭在素材上移動的最小縮放比例	1.04 (橫向平移時為 1.18)
數據類型圖像的填充率	約 75% 的可用區域；低於 50% 會看起來像草稿
場景類型圖像的填充率	40–60%
封面裁切參考	Feed 4:5：y 285–1635 · 個人頁面 3:4：y 240–1680

填充率是指可用區域中非背景部分所佔的比例；請依據靜態圖測量，而非目測。

渲染

# 草稿：單張靜態圖
npx remotion still src/piezas/mi-pieza.tsx MiPieza out/boceto_f45.png --frame=45

# 含背景 (不透明：遮擋底層畫面)
npx remotion render src/piezas/mi-pieza.tsx MiPieza out/mi-pieza_FONDO.mov \
  --codec=prores --prores-profile=4444 --pixel-format=yuv444p10le

# 含 Alpha (透明：可看見底層影片)
npx remotion render src/piezas/mi-pieza.tsx MiPieza-Alfa out/mi-pieza_ALFA.mov \
  --codec=prores --prores-profile=4444 --pixel-format=yuva444p10le --image-format=png

# 所有含 3D (CSS 或 three.js) 的圖像，在靜態圖與渲染時需加上：--gl=angle

• 含背景與含 Alpha 版本是同一個 Composition，透過 transparente prop 區分；Alpha 版本不繪製背景，且其 ID 結尾為 -Alfa。
• 僅使用 --prores-profile=4444 不會產生 Alpha 通道。 請確認：ffprobe -v error -select_streams v:0 -show_entries stream=pix_fmt -of csv=p=0 out/mi-pieza_ALFA.mov 的開頭應為 yuva。
• Alpha 版本沒有畫布背景：每個文字都需要自己的表面，否則在深色底層影片上會消失。
• 若磁碟空間不足：含 Alpha 的 ProRes 4444 在 1080p 下約佔 1.35 GB/分鐘。將其轉換為 MOV 內的 PNG (ffmpeg -i x.mov -c:v png -pix_fmt rgba y.mov) 為無損格式，保留 Alpha 通道，且體積縮小約 7.5 倍。
• 具有透視的介面若出現文字模糊：使用 --scale=2 渲染，再透過 Lanczos 縮小至 1080p。
• 若要輸出多張靜態圖，可編寫腳本，僅建立一次 bundle 並在完成後刪除 (refs/3d-and-pitfalls.md)。

第 0 影格封面

• 封面是匯出 Reel 的第一個影格：使用 <Sequence durationInFrames={1}> 放置封面，並在 <Sequence from={1}> 中放置完整的 Reel。社群平台會從影片影格中選取封面；這種做法可避免產生獨立的封面檔案。若選取器未能正確選到第 0 影格，則給予兩個影格。
• 人物置中：中心軸在 x 540，人物中心約在 y 900–960，且需完整位於 4:5 與 3:4 裁切範圍內，標題也應在範圍內。原因： 個人頁面與 Feed 的網格會裁切封面，而縮圖決定了使用者是否點擊。
• 避免在角落放置大型裝飾。交付前，請輸出模擬裁切版本 (4:5 外圍遮罩、3:4 線條與中心軸) 並仔細檢查。
• 若使用 ffmpeg 從 JPG 拼接封面，請注意色彩範圍 (refs/3d-and-pitfalls.md)。

「液態玻璃」風格 (選擇性)

類似 iOS 的玻璃效果，用於卡片與按鈕，搭配淺色背景。此效果需有物體可折射、全場景使用單一光源、以及內部有動態內容才能奏效；否則「看起來像宣傳單」。規則與數值請見 refs/glass.md，該文件也說明了如何遮蓋素材中燒錄的文字。沒有哪種風格會永遠使用：每個新圖像都應帶來前作沒有的元素。

常見且代價高昂的陷阱

• 影片凍結：若 <OffthreadVideo> 在第 0 影格之後才開始，請將其放入 `<Sequence from={entrada} layout=