lower-thirds

下三分之一标题

制作简洁、体现品牌特色的下三分之一标题——即位于画面底部区域的姓名／职位字幕，让它动效入场、停留足够久以便阅读，并在不抢镜的前提下退场。关键在于克制：清晰利落地呈现、明确的字体层级、正确的安全区域位置，以及用一个模板适配整组发言者。

适用场景

• 演讲者／访谈姓名标签、嘉宾名单、人物访谈字幕。
• 广播风格标题、新闻字幕条、播客／网络研讨会姓名牌。
• 用一个设计模板套用一组姓名／职位 → 多段片段（其价值所在）。

构成

下三分之一标题由两行文字和一块图形底板组成，放置在画面底部区域：

元素	作用	字体处理
姓名（主项）	是谁	字号最大、字重最粗、字距最紧
职位／头衔（次项）	做什么／来自哪里	字号约为姓名的 45–60%，字重较轻，通常使用品牌强调色
色条／面板／强调元素	确保在任何背景上都清晰可读	使用纯色或 70–85% 不透明度；用强调线条呼应品牌

控制在两行。姓名行＋职位行就是全部内容——增加行数会削弱层级，并挤占安全区域。

避免标题显得廉价的三条规则

1. 切勿直接切入或切出标题。 突然出现／消失会让人觉得是失误。即使只有 12 帧的淡入或滑入，也能让它显得经过制作。
2. 依次错开入场，不要同时涌入。 先让色条动起来，再显示姓名，最后显示职位，每项间隔 3–6 帧。所有元素同时出现会显得平淡；短促的层叠入场则更有设计感。
3. 停留时间要足够长，让人能读两遍。 屏幕上大约停留 3–5 秒（出声读两遍）。时间太短会错过；太长则会让人厌烦。只在片段开始和结束时做动效，不要在片段中途出现。

入场与退场动效

选定一种运动风格并重复使用。以下是最可靠、观感高级的呈现方式：

呈现方式	感觉	做法
滑入＋淡入	简洁、默认	移动约 24–40px，同时淡入；入场时使用缓出
色条擦入	广播风格	色条缩放／扫入（scaleX／clip），文字在其后淡入
遮罩揭示	高级	将文字裁剪在移动的矩形中，让字母以“擦入”方式显现

使用不对称缓动：入场时使用利落的 ease-out（cubic-bezier(.22,1,.36,1)），退场时使用更快的 ease-in。退场速度要快于入场（时长约为入场的 ⅔），让标题迅速让出画面。

/* Mask reveal: text wipes on left→right, no plugin needed */
.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×（姓名与角色）。拿不准时，就放大姓名，而不是角色。
• 字重 + 颜色：姓名使用粗体／近白色；角色使用较轻的字重和品牌强调色（只用一种强调色，并保持一致）。
• 确保对比度，便于辨读：文字会叠加在未知素材上。使用纯色／半透明色条、柔和的遮罩，或轻微的文字阴影，确保文字在明暗画面上都清晰可读。
• 锁定品牌样式：将字体、强调色、色条样式和圆角半径固定在一个主题对象中，让系列中的每个标题都保持一致。

将同一设计套用到一组名单

使用代码构建设计的理由：更改文本／数据，然后重新导出，无需重新制作动画。将姓名／角色／主题设为属性，绝不硬编码，再将名单映射到各个实例。

const ROSTER = [
  { name: "Ada Lovelace",  role: "Founder, Analytical Engines" },
  { name: "Grace Hopper",  role: "Rear Admiral, US Navy" },
  { name: "Alan Turing",   role: "Mathematician" },
];
// One <LowerThird> design; map the list → many instances (sequence them in a renderer)
{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）。

验证流程——渲染静帧 → 检查 → 编码。 对三个阶段进行采样，在编码前（或批量处理整份名单前）发现错开的动画或安全区问题。

# Stills at enter / dwell / exit — WITH SHIPPED PROPS (a real roster row, not defaults)
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"}'

# Inspect each PNG — focus the DWELL frame (fully on screen):
#  - hierarchy holds: name dominant (>=1.6x role), role in brand accent; both fully revealed, not mid-wipe
#  - brand lock: font, accent color, bar/scrim correct; legible over the plate
#  - 9:16 safe area: band LIFTED above the bottom ~20-35% UI zone, clear of top ~12% and the right action rail; left-anchored inside title-safe
#  - enter/exit frames show partial reveal (animation actually runs), not a hard cut

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 proof clip

批量处理名单：先通过静帧验证名单中的一行，再渲染所有姓名——发现布局／溢出问题只需一次，而非重复 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 版本，带遮罩揭示和擦除色条变体。