Lower Thirds
建立一個乾淨、具品牌感的下方字幕——即位於畫面底部區域的姓名/職稱標題卡——使其流暢進場、停留足夠時間以閱讀，並在完成後優雅退場，不搶走畫面的風采。這項技術的關鍵在於克制：俐落的揭示、強烈的字型層級、正確的安全區域擺放，以及一個能驅動整批講者的模板。
使用時機
- 講者/訪談姓名標籤、座談會名單、發言人標題
- 廣播風格的標題、新聞條、Podcast/網路研討會名牌
- 將同一設計套用至多個姓名/職稱清單 → 產出多個片段（這才是真正的價值）
結構分析
一個下方字幕由兩行文字與一個圖形底層組成，置於畫面底部區域：
| 元素 | 功能 | 字型處理方式 |
|---|---|---|
| 姓名（主要） | 顯示是誰 | 最大、最粗、字距最緊 |
| 職稱/頭銜（次要） | 顯示做什麼/在哪裡 | 約姓名大小的 45–60%、字重較輕、常用品牌強調色 |
| 長條 / 面板 / 裝飾元素 | 確保在任何背景上都可讀 | 實色或 70–85% 不透明度；裝飾線條與品牌連結 |
限制為兩行。一行姓名加上一行職稱就是全部工作——多餘的行數會破壞層級並壓縮安全區域。
三步驟避免廉價的標題
- 絕不讓標題直接切換出現或消失。 單純的出現/消失看起來就像失誤。即使是 12 幀的淡入淡出或滑動，也能讓它看起來經過精心製作。
- 交錯進場，不要一次全部出現。 讓條形先動，再來是姓名，最後是職稱，每個之間間隔 3–6 幀。所有元素同時到達感覺很平淡；短暫的層疊則顯得有設計感。
- 停留時間夠長讓觀眾閱讀兩次。 大約在螢幕上停留 3–5 秒（大聲朗讀兩遍）。太短則容易被忽略；太長則會讓人感到煩躁。動畫應該只在進場和退場發生，絕不要在片段中間。
進場與退場動畫
選擇一種動態語言並重複使用。最可靠、最適合閱讀的揭示方式：
| 揭示方式 | 感覺 | 做法 |
|---|---|---|
| 滑入 + 淡入 | 乾淨、預設風格 | 橫向移動約 24–40px 同時淡入；使用 ease-out 曲線 |
| 條形擦拭 | 廣播風格 | 條形縮放/掃入（scaleX / clip），文字在其後淡入 |
| 遮罩揭示 | 高級感 | 用移動的矩形遮罩文字，使字母「擦入」 |
使用不對稱的加減速曲線：進場用乾脆的 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–18 幀 (0.4–0.6 秒) | 交錯：條形 → 姓名 → 職稱 |
| 停留 | 90–150 幀 (3–5 秒) | 可讀的停留時間；根據文字長度調整 |
| 退場 | 8–12 幀 (0.27–0.4 秒) | 比進場快 |
在程式碼中，所有狀態應由當前幀（或暫停的時間軸）驅動，而非牆上時鐘時間——影片渲染器需要確定性幀。將進場/停留/退場表達為單一的進度曲線，使同一個元件在瀏覽器中即時運作，也能在渲染器中逐幀工作。
安全區域與廣播慣例
下方字幕必須能在所有螢幕和平臺 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 職稱）。如果不確定，請放大姓名，而不是職稱。
- 字重 + 顏色：姓名使用粗體/接近白色；職稱使用較輕的字重和品牌強調色（一種強調色，一致使用）。
- 可讀性對比：文字會疊加在未知的畫面上。使用實色/半透明條形、輕微的漸層遮罩或柔和的文字陰影，使其在明亮和黑暗的素材上都能閱讀。
- 品牌鎖定：將字體、強調色、條形樣式和圓角半徑固定於一個主題物件中，確保系列中的每個標題都一致。
將一個設計套用至多個名單
用程式碼建構的理由：改變文字/資料，重新匯出——無需重新製作動畫。將姓名/職稱/主題設定為屬性（props），絕不寫死，然後將名單映射到多個實例。
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，姓名/職稱/主題作為屬性）形式提供——進場/停留/退場全部由 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 版本（包含遮罩揭示與條形擦拭變體）。