Kreesten-hsh/video - 下三分之一字幕

下三分之一字幕

构建一个干净、品牌化的下三分之一字幕——位于画面底部区域的姓名/角色说明——它动画进入、停留足够长的阅读时间，然后退出，不抢夺镜头。关键在于克制：清晰的揭示、强烈的类型层次、正确的安全区域放置，以及一个能驱动整组演讲者的模板。

何时使用

• 演讲者/访谈姓名标签、小组名单、人物访谈字幕。
• 广播风格标题、新闻条、播客/网络研讨会姓名牌。
• 将一种设计模板化应用于一系列姓名/标题 → 多个视频片段（这是其价值所在）。

结构

下三分之一字幕由两行文字加上一个图形背景组成，放置在画面底部区域：

元素	作用	字体处理
姓名（主要）	谁	最大、最粗、字距最紧
角色/头衔（次要）	做什么/在哪里	约为名字尺寸的45–60%，较轻字重，通常使用品牌强调色
条 / 面板 / 装饰线	在任何背景下都能阅读	实色或70–85%不透明度；装饰线与品牌关联

保持两行。名字行 + 角色行就是全部工作——额外行数会破坏层次结构并挤占安全区域。

三个防止字幕显得廉价的规则

1. 切勿让标题生硬地出现或消失。 单纯的显现/消失会被视为错误。即使是12帧的淡入或滑动也会让它显得经过制作。
2. 交错进入，不要一拥而上。 先动画显示背景条，然后是名字，接着是角色，每个之间偏移3–6帧。所有元素同时到达会显得平淡；短暂的级联效果则显得经过设计。
3. 停留时间足够读两遍。 大致在屏幕上停留3–5秒（大声读两遍）。太短则容易被错过；太长则显得烦人。只在进入和退出时动画，绝不在中间段。

进入与退出动画

选择一种运动语言并重复使用。最可靠、最显档次的揭示效果：

揭示方式	感觉	如何实现
滑动 + 淡入	干净、默认	平移约24–40像素同时淡入；进入时缓出
擦除条	广播风格	一条栏缩放/扫入（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–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.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 来选取停留帧和退出帧。

在完成之前：

1. 静帧在进入、停留和退出阶段都能干净渲染——无缺失字体/品牌资源。
2. 在停留帧：名字比角色占主导，品牌强调色 + 背景条正确，完全（而非部分）揭示。
3. 字幕条在9:16安全区域内——在每个检查帧中，抬升至底部UI区域之上，避开顶部和右侧操作栏。
4. 仅由帧驱动——无 Date.now() / Math.random() / 定时器；进入/退出显示运动，绝无硬切。
5. 一个真实的名单行（非 defaultProps）正确渲染；MP4已编码，GIF可选。

参考文件

• references/lower-third-component.md — 一个完整可运行的下三分之一字幕：包含交错弹簧进入、可读停留和纯帧驱动的更快退出的Remotion组件；用于品牌锁定的类型化主题对象；列表到多实例的排序模式；每行批处理渲染脚本；以及带有遮罩揭示和擦除条变体的无依赖CSS/HTML版本。