Back to Details

lower-thirds

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Lower Thirds

Lower Third

Build a clean, branded lower third — the name/role caption that lives in the bottom band of the frame — that animates in, holds long enough to read, and exits without stealing the shot. The craft is restraint: a crisp reveal, a strong type hierarchy, correct safe-area placement, and one template that drives a whole roster of speakers.
制作一个简洁、符合品牌风格的Lower Third——即位于画面底部区域的姓名/职位字幕条——它能平滑入场、停留足够时长供人阅读，退场时不会干扰画面内容。核心设计原则是克制：清晰的揭示动画、明确的字体层级、符合安全区域的布局，以及可复用的模板来批量生成所有演讲者的字幕条。

When to use

使用场景

  • Speaker/interview name tags, panel rosters, talking-head captions.
  • Broadcast-style titles, news straps, podcast/webinar name plates.
  • Templating one design across a list of names/titles → many clips (the payoff).
  • 演讲者/受访者姓名标签、嘉宾名单、访谈字幕条
  • 广播风格标题、新闻条、播客/网络研讨会姓名牌
  • 基于单一设计模板批量生成多组姓名/职位对应的字幕条（核心优势）

Anatomy

组成结构

A lower third is two text lines plus a graphic bed, placed in the lower band:
ElementRoleType treatment
Name (primary)WhoLargest, heaviest, tightest tracking
Role/title (secondary)What/where~45–60% of name size, lighter weight, often a brand accent color
Bar / panel / accentReads against any backgroundSolid or 70–85% opacity; an accent rule ties to brand
Keep it to two lines. A name line + role line is the whole job — extra lines erode the hierarchy and crowd the safe area.
Lower Third由两行文本加一个背景图形组成，放置在画面底部区域：
元素作用字体处理
姓名（主元素）展示人物身份字号最大、字重最粗、字距最紧凑
职位/头衔（次元素）展示人物角色/所属机构字号为姓名的45-60%、字重更轻，通常使用品牌强调色
背景条/面板/装饰元素确保在任何背景下都清晰可读纯色或70-85%透明度；装饰线条需符合品牌规范
严格控制在两行内容。姓名行+职位行就是全部内容——多余的行会破坏层级结构，挤占安全区域。

Three rules that prevent cheap-looking titles

避免廉价感标题的三条规则

  1. Never hard-cut a title on or off. A bare appear/disappear reads as a mistake. Even a 12-frame fade or slide makes it feel produced.
  2. Stagger, don't slam. Animate the bar first, then the name, then the role, each offset by 3–6 frames. Everything arriving at once feels flat; a short cascade feels designed.
  3. Hold long enough to read twice. Roughly 3–5s on screen (read it aloud twice). Too short and it's missed; too long and it nags. Animate in/out, never mid-segment.
  1. 绝对不要硬切标题的显示/隐藏。直接出现或消失会显得像失误。哪怕是12帧的淡入淡出或滑动动画，也能让整体显得专业。
  2. 分步入场，而非同步弹出。先让背景条动画入场，再是姓名，最后是职位，每个元素间隔3-6帧。同步入场会显得平淡，短时间的依次入场会更具设计感。
  3. 停留时长足够读两遍。大约在屏幕上停留3-5秒（大声读两遍的时间）。太短会被忽略，太长会让人厌烦。仅在片段开头和结尾添加动画，不要在片段中间动效。

Enter & exit animations

进出动画

Pick one motion language and reuse it. The most reliable, premium-reading reveals:
RevealFeelHow
Slide + fadeClean, defaultTranslate in ~24–40px while fading; ease-out on enter
Wipe barBroadcastA bar scales/sweeps in (
scaleX
/clip), text fades behind it
Mask revealPremiumClip text to a moving rectangle so letters "wipe on"
Use asymmetric easing: a snappy 
ease-out
(
cubic-bezier(.22,1,.36,1)
) on enter, a quicker 
ease-in
on exit. Exit faster than you entered (~⅔ the duration) so the title gets out of the way.
css
/* 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); } }
选择一种动效语言并保持统一。以下是最可靠、质感高级的揭示方式：
揭示方式风格实现方法
滑动+淡入简洁、默认风格平移24-40px的同时淡入；入场时使用缓出效果
背景条擦除广播风格背景条缩放/扫入（
scaleX
/clip），文本在其后淡入
蒙版揭示高级质感通过移动的矩形裁剪文本，实现文字“擦除式出现”
使用不对称缓动：入场时使用明快的
ease-out
（
cubic-bezier(.22,1,.36,1)
），退场时使用更快的
ease-in
。退场时长要短于入场时长（约为入场的⅔），让标题快速让出画面空间。
css
/* 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); } }

In/out timing & dwell

进出时间与停留时长

Think in three phases. Budget frames, not vibes (at 30fps):
PhaseBudgetNote
Enter12–18f (0.4–0.6s)Staggered: bar → name → role
Hold90–150f (3–5s)The readable dwell; scale with line length
Exit8–12f (0.27–0.4s)Faster than enter
In code, drive every state from the current frame (or a paused timeline), not wall-clock time — a video renderer demands deterministic frames. Express enter/hold/exit as a single progress curve so the same component works live in a browser and frame-by-frame in a renderer.
分为三个阶段。按帧数计算（以30fps为例），而非凭感觉：
阶段帧数预算说明
入场12-18帧（0.4-0.6秒）分步入场：背景条 → 姓名 → 职位
停留90-150帧（3-5秒）可读停留时长；根据文本长度调整
退场8-12帧（0.27-0.4秒）比入场更快
在代码中，所有状态都由当前帧（或暂停的时间线）驱动，而非实际时间——视频渲染器需要确定的帧序列。将入场/停留/退场表达为单一进度曲线，这样同一个组件既能在浏览器中实时运行，也能在渲染器中逐帧渲染。

Safe area & broadcast conventions

安全区域与广播规范

The lower third must survive every screen and platform UI. Compose inside the title-safe area (inner ~90% / margin 5%) and respect platform chrome:
FrameAnchorAvoid
16:9 (1920×1080)Left edge at ~5% margin; baseline ~80–85% downOuter 5% (title-safe), action-safe outer 10%
9:16 (1080×1920)Same left margin; lift the band upBottom ~18% (captions/UI), top ~12%
1:1 (1080×1080)Lower band, center-leftOuter 5%
Anchor to the left and grow rightward so names of different lengths stay pinned and never re-center awkwardly. Keep the role line within the same left margin as the name. For 9:16, do not park the title at the very bottom — platform captions and buttons sit there.
Lower Third必须适配所有屏幕和平台的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画幅，不要将标题放在最底部——平台字幕和按钮通常位于此处。

Type hierarchy & brand styling

字体层级与品牌样式

Hierarchy is the whole design. Make the name unmistakably dominant:
  • Size contrast ≥ 1.6× (name vs role). If unsure, push the name bigger, not the role.
  • Weight + color: name in bold/near-white; role in a lighter weight and a brand accent color (one accent, used consistently).
  • Contrast for legibility: text rides over unknown footage. Use a solid/semi-opaque bar, a subtle scrim, or a soft text shadow so it reads over both bright and dark plates.
  • Brand lock: pin font, accent color, bar style, and corner radius in one theme object so every title across a series matches.
层级结构是设计的核心。要让姓名的主导地位一目了然：
  • 字号对比 ≥1.6倍（姓名 vs 职位）。不确定时，放大姓名，而非职位。
  • 字重+颜色：姓名使用粗体/近白色；职位使用更轻的字重和品牌强调色（统一使用一种强调色）。
  • 可读性对比：文本要在未知背景上清晰可读。使用纯色/半透明背景条、微妙的遮罩或柔和的文本阴影，确保在明亮和黑暗背景上都能看清。
  • 品牌锁定：将字体、强调色、背景条样式和圆角半径统一在一个主题对象中，确保系列内容中的所有标题风格一致。

Templating one design across a list

基于列表批量生成模板

The reason to build this in code: change the text/data, re-export — no re-animating. Make name/role/theme props, never hardcoded, then map a roster to instances.
jsx
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} />)}
In a renderer, make the roster an input prop and render once per row (
--props
) to emit one branded clip per person — same animation, same brand, only the text changes. See 
references/lower-third-component.md
for the full runnable component and batch script.
用代码实现的优势：修改文本/数据后重新导出即可——无需重新制作动画。将姓名/职位/主题设为属性，而非硬编码，然后将名单映射为多个实例。
jsx
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
。

Output checklist

输出检查清单

  • Two lines only: dominant name, secondary role (≥1.6× size contrast).
  • Animated in and out (no hard cut); enter staggered bar→name→role; exit faster.
  • Hold 3–5s (readable twice); motion only at the ends, never mid-segment.
  • Left-anchored inside title-safe; 9:16 band lifted above the bottom-18% UI zone.
  • Text legible over any plate (bar/scrim/shadow); one brand accent throughout.
  • Name/role/theme are props — one template renders the whole roster.
  • 仅两行内容：主导姓名、次要职位（字号对比≥1.6倍）。
  • 带有入场和退场动画（无硬切）；入场时背景条→姓名→职位分步进行；退场速度更快。
  • 停留3-5秒（可读两遍）；仅在开头和结尾有动效，片段中间无动效。
  • 左锚定在标题安全区内；9:16画幅的字幕条需上移至底部18%的UI区域之上。
  • 文本在任何背景上都清晰可读（背景条/遮罩/阴影）；全程使用统一的品牌强调色。
  • 姓名/职位/主题为属性——单一模板可渲染整个名单。

Deliver & verify (rendered stills → MP4)

交付与验证（渲染静帧→MP4）

Packaged helper (
scripts/
): tile your stills with 
scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png
, then assert the encode with 
scripts/probe-mp4.sh out.mp4 [WxH] [fps]
. See 
scripts/README.md
.
The lower third ships as a Remotion composition (
<Composition>
+ zod 
schema
+ 
defaultProps
, name/role/theme as props) — enter/dwell/exit all driven by 
useCurrentFrame()
, never 
Date.now()
/ 
Math.random()
/ timers. Deliverable = 
out/*.mp4
+ the project (re-render per roster row). 9:16 vertical (1080×1920) is the default.
Verify loop — render stills → inspect → encode. Sample the three phases so you catch a stagger or safe-area bug before encoding (or batching the whole roster).
bash
undefined
打包工具（
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
。
Lower Third以Remotion合成组件形式交付（
<Composition>
+ zod 
schema
+ 
defaultProps
，姓名/职位/主题为属性）——入场/停留/退场均由
useCurrentFrame()
驱动，绝不使用
Date.now()
/ 
Math.random()
/ 计时器。交付物 = 
out/*.mp4
+ 项目文件（可按名单行重新渲染）。默认画幅为9:16竖屏（1080×1920）。
验证流程——渲染静帧→检查→编码。采样三个阶段的帧，在编码（或批量渲染整个名单）前发现分步入场或安全区域的问题。
bash
undefined

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"}'
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):

检查每个PNG——重点关注停留帧（完全显示状态）：

- hierarchy holds: name dominant (>=1.6x role), role in brand accent; both fully revealed, not mid-wipe

- 层级清晰：姓名主导（字号≥职位1.6倍），职位使用品牌强调色；两者完全显示，非半擦除状态

- 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

- 9:16安全区域：字幕条上移至底部约20-35%的UI区域之上，避开顶部约12%区域和右侧操作栏；左锚定在标题安全区内

- 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

**Batch roster**: verify ONE row via stills *before* rendering all names — catch a layout/overflow bug once, not N times. Use `npx remotion compositions` for `durationInFrames`/`fps` to pick the dwell + exit frames.

**Before you finish:**
1. Stills render cleanly at enter, dwell, and exit — no missing font/brand assets.
2. At the dwell frame: name dominant over role, brand accent + bar correct, fully (not partly) revealed.
3. The band is inside the 9:16 safe area — lifted above the bottom UI zone, clear of top and right rail — at every checked frame.
4. Frame-driven only — no `Date.now()` / `Math.random()` / timers; enter/exit show motion, never a hard cut.
5. A real roster row (not `defaultProps`) renders correctly; MP4 encoded, GIF optional.
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可选。

Reference files

参考文件

  • references/lower-third-component.md
    — a complete runnable lower-third: a Remotion component with staggered spring enter, readable hold, and faster exit driven purely by frame; a typed theme object for brand lock; the list→many-instances sequencing pattern; a per-row batch render script; plus a dependency-free CSS/HTML version of the same design with mask-reveal and wipe-bar variants.
  • references/lower-third-component.md
    —— 完整可运行的Lower Third组件：基于Remotion的组件，包含分步弹性入场、可读停留、帧驱动的快速退场；用于品牌统一的类型化主题对象；列表→多实例的序列模式；逐行批量渲染脚本；以及无依赖的CSS/HTML版本，包含蒙版揭示和背景条擦除变体。