下三分之一標題
建立一個乾淨、品牌化的下三分之一標題 — 位於畫面底部區域的姓名/職稱說明 — 它會動畫化進入、停留足夠長的時間以便閱讀，然後在不搶鏡頭的情況下退出。這項工藝的重點在於克制：清晰的揭示、強烈的排版層級、正確的安全區域位置，以及一個能驅動整個講者名單的模板。
使用時機
- 講者/訪談姓名標籤、座談會名單、談話性人物說明。
- 廣播風格標題、新聞跑馬燈、播客/網路研討會姓名牌。
- 將一個設計模板化套用到多個姓名/職稱 → 大量剪輯（這是真正的價值所在）。
結構
一個下三分之一標題包含兩行文字加上一個圖形背景，放置在畫面底部區域：
| 元素 | 角色 | 字體處理 |
|---|---|---|
| 姓名（主要） | 誰 | 最大、最粗、字距最緊 |
| 職稱/頭銜（次要） | 做什麼/在哪裡 | 約為名字大小的 45–60%，較輕的字重，通常使用品牌強調色 |
| 背景條 / 面板 / 裝飾線 | 讓文字在任何背景上都可讀 | 實心或不透明度 70–85%；裝飾線與品牌連結 |
維持在兩行以內。一行名字加一行職稱就是全部工作 — 額外的行數會破壞層級並擠壓安全區域。
三個避免標題看起來廉價的規則
- 絕對不要讓標題直接硬切進或退出。 直接出現/消失看起來像是錯誤。即使是 12 影格的淡入或滑入，都能讓它感覺像是精心製作的。
- 交錯，不要同時出現。 先動畫化背景條，然後是名字，接著是職稱，每個之間間隔 3–6 影格。所有東西同時到達感覺很平淡；短暫的串聯效果看起來經過設計。
- 停留時間要夠長到能讀兩次。 大約在畫面上停留 3–5 秒（大聲唸兩次）。太短會錯過，太長則會讓人煩躁。只在片頭片尾做動畫，絕對不要在片段中間做。
進場與退場動畫
選擇一種動態語言並重複使用。最可靠、最具高級感的揭示方式：
| 揭示方式 | 感覺 | 做法 |
|---|---|---|
| 滑入 + 淡入 | 乾淨、預設 | 平移約 24–40px 同時淡入；進場使用 ease-out |
| 擦拭背景條 | 廣播風格 | 背景條縮放/掃入（scaleX/裁剪），文字在其後淡入 |
| 遮罩揭示 | 高級感 | 將文字裁剪到一個移動的矩形內，使字母「擦拭顯現」 |
使用不對稱緩動：進場使用乾脆的 ease-out (cubic-bezier(.22,1,.36,1))，退場使用更快的 ease-in。退場速度應比進場快（約 ⅔ 的持續時間），讓標題能迅速離開畫面。
/* 遮罩揭示：文字從左→右擦拭顯現，無需外掛 */
.lt-name { clip-path: inset(0 100% 0 0); animation: wipe .5s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }
進出時機與停留時間
考慮三個階段。用影格數來規劃，而不是憑感覺（以 30fps 為例）：
| 階段 | 預算 | 備註 |
|---|---|---|
| 進場 | 12–18f (0.4–0.6s) | 交錯：背景條 → 名字 → 職稱 |
| 停留 | 90–150f (3–5s) | 可閱讀的停留時間；根據行數調整 |
| 退場 | 8–12f (0.27–0.4s) | 比進場快 |
在程式碼中，用當前影格（或暫停的時間軸）驅動所有狀態，而不是用牆上時鐘時間 — 影片渲染器需要確定性的影格。將進場/停留/退場表示為單一的進度曲線，這樣同一個元件既能在瀏覽器中即時運行，也能在渲染器中逐格運作。
安全區域與廣播慣例
下三分之一標題必須能在所有螢幕和平台 UI 上正常顯示。在標題安全區域（內部約 90% / 邊距 5%）內構圖，並尊重平台界面元素：
| 畫面比例 | 錨點 | 避免 |
|---|---|---|
| 16:9 (1920×1080) | 左邊緣在大約 5% 邊距處；基準線在大約 80–85% 處 | 外部 5%（標題安全區），動作安全區外部 10% |
| 9:16 (1080×1920) | 相同的左邊距；將背景條上移 | 底部約 18%（字幕/UI），頂部約 12% |
| 1:1 (1080×1080) | 底部區域，左中 | 外部 5% |
靠左錨定，向右延伸，這樣不同長度的名字就能固定位置，永遠不會尷尬地重新置中。讓職稱行與名字使用相同的左邊距。對於 9:16，不要將標題放在最底部 — 平台字幕和按鈕放在那裡。
排版層級與品牌風格設定
層級就是整個設計。讓名字無庸置疑地主導：
- 大小對比 ≥ 1.6 倍（名字 vs 職稱）。如果不確定，請放大名字，而不是職稱。
- 字重 + 顏色：名字使用粗體/近白色；職稱使用較輕的字重和品牌強調色（僅一個強調色，一致使用）。
- 可讀性對比：文字疊加在未知的影片素材上。使用實心/半透明背景條、微妙的遮罩或柔和的文字陰影，以便在明亮和黑暗的畫面上都能閱讀。
- 品牌鎖定：將字型、強調色、背景條樣式和圓角半徑固定在一個主題物件中，這樣系列中的每個標題都能匹配。
將一個設計模板化套用到多個姓名
用程式碼來做的原因：更改文字/資料，重新匯出 — 無需重新製作動畫。將 name/role/theme 設定為屬性，永遠不要硬編碼，然後將名單映射到實例。
const ROSTER = [
{ name: "Ada Lovelace", role: "Founder, Analytical Engines" },
{ name: "Grace Hopper", role: "Rear Admiral, US Navy" },
{ name: "Alan Turing", role: "Mathematician" },
];
// 一個 <LowerThird> 設計；映射列表 → 多個實例（在渲染器中依序排列）
{ROSTER.map((p, i) => <LowerThird key={p.name} {...p} theme={BRAND} startFrame={i * 150} />)}
在渲染器中，將名單作為輸入屬性，並為每一行渲染一次（--props），以便為每個人產出一個品牌化的剪輯 — 相同的動畫、相同的品牌，只有文字改變。請參閱 references/lower-third-component.md 取得完整的可執行元件和批次指令稿。
輸出檢查清單
- 僅兩行：主導的名字，次要的職稱（大小對比 ≥ 1.6 倍）。
- 有進場和退場動畫（無硬切）；進場交錯背景條→名字→職稱；退場更快。
- 停留 3–5 秒（可閱讀兩次）；僅在頭尾做動畫，絕對不在片段中間做。
- 靠左錨定在標題安全區域內；9:16 的背景條需高於底部 18% 的 UI 區域。
- 文字在任何畫面上都可讀（背景條/遮罩/陰影）；全片一致使用一個品牌強調色。
- 姓名/職稱/主題是屬性 — 一個模板渲染整個名單。
交付與驗證（渲染靜態影格 → MP4）
打包好的輔助工具（
scripts/）：使用scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png拼貼您的靜態影格，然後使用scripts/probe-mp4.sh out.mp4 [WxH] [fps]驗證編碼。請參閱scripts/README.md。
下三分之一標題以 Remotion 組合（<Composition> + zod schema + defaultProps 的形式提供，name/role/theme 作為屬性） — 進場/停留/退場全部由 useCurrentFrame() 驅動，絕對不使用 Date.now() / Math.random() / 計時器。交付物 = out/*.mp4 + 專案（每列名單重新渲染）。預設為 9:16 垂直畫面 (1080×1920)。
驗證循環 — 渲染靜態影格 → 檢查 → 編碼。 取樣三個階段的影格，以便在編碼（或批次處理整個名單）之前發現交錯或安全區域的錯誤。
# 進場 / 停留 / 退場的靜態影格 — 使用實際提供的屬性（真實的名單列，而非預設值）
npx remotion still LowerThird out/f-enter.png --frame=10 --props='{"name":"Ada Lovelace","role":"Founder, Analytical Engines"}'
npx remotion still LowerThird out/f-dwell.png --frame=75 --props='{"name":"Ada Lovelace","role":"Founder, Analytical Engines"}'
npx remotion still LowerThird out/f-exit.png --frame=N --props='{"name":"Ada Lovelace","role":"Founder, Analytical Engines"}'
# 檢查每個 PNG — 專注於停留影格（完全顯示在畫面上）：
# - 層級關係成立：名字主導（>= 1.6 倍於職稱），職稱使用品牌強調色；兩者完全揭示，非擦拭中
# - 品牌鎖定：字型、強調色、背景條/遮罩正確；在畫面上可讀
# - 9:16 安全區域：背景條**高於**底部約 20-35% UI 區域，避開頂部約 12% 和右側操作欄；在標題安全區內靠左錨定
# - 進場/退場影格顯示部分揭示（動畫確實有執行），非硬切
npx remotion render LowerThird out/lower-third.mp4 --props='{"name":"Ada Lovelace","role":"Founder, Analytical Engines"}'
npx remotion render LowerThird out/demo.gif --codec=gif # README 展示剪輯
批次名單：在渲染所有名字之前，先透過靜態影格驗證一列 — 一次抓到佈局/溢出錯誤，而不是 N 次。使用 npx remotion compositions 取得 durationInFrames/fps 來選擇停留和退場的影格。
在完成之前：
- 靜態影格在進場、停留和退場時渲染清晰 — 沒有缺少字型/品牌素材。
- 在停留影格：名字主導職稱，品牌強調色 + 背景條正確，完全（非部分）揭示。
- 背景條在每個檢查的影格中都位於 9:16 安全區域內 — 高於底部 UI 區域，避開頂部和右側操作欄。
- 僅由影格驅動 — 無
Date.now()/Math.random()/ 計時器；進場/退場顯示動畫，非硬切。 - 一個真實的名單列（非
defaultProps）能正確渲染；MP4 已編碼，GIF 為選擇性。
參考檔案
references/lower-third-component.md— 一個完整可運行的下三分之一標題：一個 Remotion 元件，具有交錯的彈簧進場、可讀的停留，以及完全由影格驅動的更快退場；一個用於品牌鎖定的型別化主題物件；列表到多個實例的序列化模式；一個逐列批次渲染指令稿；以及相同設計的無相依性 CSS/HTML 版本，包含遮罩揭示和擦拭背景條的變體。