動畫影片
此處所有內容都在 remotion/ 中渲染，不消耗任何點數。分為兩個層級 — 永遠先嘗試層級 1：
- 組合內建場景 於規格檔案中 (數分鐘內完成，無需程式碼)。
- 新增場景類型 到引擎中，當某個點子確實需要時 (需編寫程式碼、測試，之後所有代理皆可重複使用)。
在本機渲染前：若 remotion/node_modules 遺失，請執行 cd remotion && npm ci
(首次渲染也會下載 Remotion 的無頭 Chrome，約 170 MB，僅需一次)。
層級 1 — 場景套件
場景 (shots[].type) | 最佳用途 | 關鍵欄位 |
|---|---|---|
kinetic | 鉤子、關鍵台詞 | text, highlight, per_word (0.18) — 單字逐一彈入 |
title | 單一醒目標題 | text ≤ 6 個字, highlight |
number | 一個驚人數字 | value, prefix, suffix, decimals, caption, color — 向上計數 |
bars | 比較各項目大小 | title, unit, items[{label,value,color}] |
compare | 他們 vs 你、迷思 vs 事實、前後對比 | title, left{label,items,color}, right{…} |
list | 「3 件事」、做 / 不做 | items, style 勾號/叉號/數字 |
timeline | 事情發生的順序 | items[{year,text}] |
chat | 以文字對話呈現的故事 | title (聯絡人), messages[{from: me/them, text, at}] |
quote | 有來源的引文 | text, by |
media | 輔助畫面、照片、AI 片段 | src, kenburns, headline, fit |
每個場景都可設定 label (引言標籤)、stamp (橡皮圖章數字)、bg (背後淡出的照片或影片，需附 credit) 以及 transition (fade 為預設，另有 cut, slide, zoom, wipe)。疊加層 (headline, textover, lowerthird, stamp) 可置於任何場景之上。完整參考： remotion/SPEC.md。
每個新場景的實作範例： remotion/examples/animated.json。
範本
- 無臉解說 (20–40 秒)：
kinetic鉤子 →number→bars/compare→list→title呼應鉤子的收尾。旁白作為audio，字幕來自words，搭配音量 0.08–0.12 的輕柔music背景音樂。 - 文字訊息故事：
kinetic鉤子 ("她在凌晨三點回覆了") → 每段對話一個chat場景 (at間隔 0.8–1.4 秒，配合旁白節奏) →title轉折。每個對話泡泡 ≤ 10 個字。 - 談話影片中的動畫插播：CLIP_1 … 在提到關鍵處時使用
number或compare持續 2–3 秒 (過場:"zoom") … 回到 CLIP_1，並將start設為片段應繼續播放的位置。 - 迷思 vs 事實：使用
compare，其中left.color: "danger",right.color: "good"，然後在下一個title上蓋上stamp"FALSE"。
用 video-script 規劃節拍 (tools/beats.mjs 會將場景時間對齊旁白)，然後執行：
cd remotion
node render.mjs job/spec.json --validate
node render.mjs job/spec.json job/final.mp4 --preview job/check.jpg --at 0.1,<每個場景的中間點>,<結束前 1 秒>
在交付前一定要查看預覽條：鉤子應在 0.1 秒時完整顯示、沒有文字被邊緣裁切、沒有文字重疊、強調色易於閱讀、AI 生成標籤與浮水印必須存在。
風格規則
- 品牌色來自
settings.brand(規格檔案中的theme)：使用一個強調色，用於每個場景中唯一重要的事物。 - 每個標題 ≤ 7 個字、每個文字疊加層 ≤ 12 個字、每個列表 / 比較欄位 ≤ 4 個項目 (手機螢幕較小)。
- 一個場景應至少停留 1.5 秒 (根據其中每行文字計算)。
- 數字必須符合
citations；切勿對未註明來源的數字進行動畫處理。 - 不得使用品牌標誌、真實人物照片或真實對話截圖。
層級 2 — 新增場景類型
僅在以上任何組合都無法表達點子時才使用 (例如地圖路線、進度環、分割畫面反應)。
src/types.ts：新增XShot = ShotBase & { type: "x"; … }並將其加入Shot聯集型別。src/shots/Shots.tsx：在現有組件旁編寫該組件 — 使用useCurrentFrame()的spring/interpolate製作動畫 (永遠不要用 CSS 動畫或Math.random：渲染必須確定性)，使用t.font、t.accent、tone(t, color)，尺寸為 1080×1920，然後在ShotView中加入一行if (s.type === "x") body = …。若該場景在 0 秒時就在畫面上 (base === 0)，則應完整繪製它，不需進場動畫。render.mjs：將"x"加入types並為其必要欄位加入驗證 (檢查代理依賴這些訊息)。SPEC.md與上方的表格：為其撰寫文件。並將其加入examples/animated.json。- 測試：
npx tsc --noEmit -p .，node render.mjs examples/animated.json out/animated.mp4 --preview out/animated.jpg --at …，然後檢查結果。