下三分之一字幕条
构建一个干净、品牌化的下三分之一字幕条（位于画面底部区域的姓名/角色说明），它具有入场动画、足够的停留时间，并在不破坏画面的情况下退场。其核心设计在于克制：清晰的揭示效果、强大的文字层级、正确的安全区域放置，以及一个可驱动整个演讲者名单的模板。
使用场景
- 演讲者/受访者姓名标签、小组名单、人物头像配文。
- 广播风格标题、新闻滚屏、播客/网络研讨会名牌。
- 将一个设计模板化，应用于一系列姓名/头衔 → 生成多个片段（这是其价值所在）。
构成
一个下三分之一字幕条由两行文字和一个图形背景组成，放置在画面下部区域：
| 元素 | 作用 | 文字处理方式 |
|---|---|---|
| 姓名（主要） | 谁 | 最大、最粗、字间距最紧 |
| 角色/头衔（次要） | 做什么/在哪里 | 约为姓名大小的 45–60%，字重较轻，通常使用品牌强调色 |
| 条 / 面板 / 装饰 | 确保在任何背景上可读 | 实色或 70–85% 透明度；装饰线与品牌关联 |
保持两行。姓名行 + 角色行就是全部工作——额外的行会破坏层级并挤占安全区域。
防止廉价感标题的三个规则
- 切勿硬切标题的入场或退场。 简单的出现/消失会让人以为是错误。即使是 12 帧的淡入或滑动也能让它显得专业。
- 错开，不要同时出现。 先让背景条动起来，然后是姓名，最后是角色，每个之间间隔 3–6 帧。所有元素同时到达会显得平淡；短时间内的级联效果则显得经过设计。
- 停留足够长的时间以便阅读两遍。 大约在屏幕上停留 3–5 秒（大声朗读两遍）。太短会错过，太长会令人烦躁。在片段的开始和结束进行动画，切勿在片段中间。
入场与退场动画
选择一种运动语言并重复使用。最可靠、阅读效果最佳的揭示方式：
| 揭示方式 | 感觉 | 方法 |
|---|---|---|
| 滑动 + 淡入 | 干净、默认 | 平移约 24–40px 同时淡入；入场时使用 ease-out |
| 擦拭条 | 广播风格 | 条状元素缩放/扫入（scaleX/剪切），文字在其后淡入 |
| 遮罩揭示 | 高级感 | 将文字裁剪到一个移动的矩形中，使字母“擦入” |
使用非对称缓动：入场时使用快速的 ease-out（cubic-bezier(.22,1,.36,1)），退场时使用更快的 ease-in。退场速度要比入场快（约 2/3 的时长），以便标题快速让位。
/* 遮罩揭示：文字从左到右擦入，无需插件 */
.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 角色）。如果不确定，请放大姓名，而不是缩小角色。
- 字重 + 颜色：姓名用粗体/接近白色；角色用较轻的字重和品牌强调色（使用一种强调色，并保持一致）。
- 可读性对比：文字需叠加在未知的视频素材上。使用实色/半透明背景条、微妙的暗角或柔和的文字阴影，确保在明亮和暗色背景上都能阅读。
- 品牌锁定：将字体、强调色、条风格和圆角半径固定在一个主题对象中，确保整个系列中的每个标题都匹配。
模板化一个设计应用于列表
在代码中构建此功能的理由：更改文字/数据，重新导出——无需重新制作动画。将姓名/角色/主题作为属性，切勿硬编码，然后将列表映射到实例。
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.6x 角色），角色使用品牌强调色；两者完全揭示，非中间擦除状态
# - 品牌锁定：字体、强调色、背景条/暗角正确；在素材上可读
# - 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 版本，包含遮罩揭示和擦拭条变体。