lower-thirds

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Lower thirds

Lower Thirds（画面下三分之一标题）

A lower third is the name-and-role graphic in the bottom part of the frame that says who is speaking, laid over footage the graphic never sees. The deliverable is a file with an alpha channel: everything you do not draw stays see-through.

You copy

templates/lower-third.html

into the working folder, write the design into it, check it with

scripts/render.mjs

, and render the files. Run the script from the working folder (

node <this skill>/scripts/render.mjs …

); outputs land there. Make it in one go: don't ask questions the brief already answers or a sensible default covers, and list the defaults you chose when you deliver.

lower third 是位于画面底部、用于显示说话者姓名和身份的图形，叠加在图形本身无法预先获知的素材上。交付物是带 alpha 通道的文件：所有未绘制的内容都保持透明。

将

templates/lower-third.html

复制到工作目录，在其中实现设计，使用

scripts/render.mjs

检查，然后渲染文件。从工作目录运行脚本（

node <this skill>/scripts/render.mjs …

）；输出文件会生成在该目录中。一次性完成：不要询问需求说明已经回答或合理默认值已涵盖的问题，并在交付时列出所选默认值。

1. Read the brief

1. 阅读需求说明

The words, exactly as they should read: names, roles, show name, handle, scripture reference, song title. Keep the user's spelling and punctuation (setting a line in capitals is styling; the words stay theirs); never invent a title or a surname. If they give no second line, use their own words for one (what the stream is about) or leave it out.
How many cards: each person or item is one entry in
```
CARDS
```
, rendered to its own file with the same design. Add fields when a card needs more than
```
title
```
and
```
sub
```
.
Where it goes: OBS or a stream → WebM only; a web page → WebM plus the Safari HEVC copy (
```
references/delivery.md
```
); Premiere Pro, DaVinci Resolve, Final Cut → ProRes 4444
```
.mov
```
; both named → both; a phone editor or tool without alpha → an MP4 on a green ground for chroma key. Not said: WebM and
```
.mov
```
.
The look: the show, the brand colours, the mood (news, podcast, gaming, documentary, church, corporate). The design comes from this, not from the template.
Defaults when not given: 1920×1080 at 30 fps; about 8 seconds (under a second in, a still hold of 5–6 seconds, half a second out); lower left; silent.

文字必须完全按指定内容呈现：姓名、身份、节目名称、账号名、经文出处、歌曲标题。保留用户的拼写和标点（将某一行设为全大写属于样式处理；文字内容仍保持原样）；绝不虚构标题或姓氏。如果未提供第二行，可以使用用户自己的内容补充（说明直播主题），也可以省略。
卡片数量：每个人或每个条目都是
```
CARDS
```
中的一个条目，并使用相同设计渲染为独立文件。卡片需要多于
```
title
```
和
```
sub
```
的信息时，添加相应字段。
输出位置：OBS 或直播 → 仅 WebM；网页 → WebM 加 Safari HEVC 版本（
```
references/delivery.md
```
）；Premiere Pro、DaVinci Resolve、Final Cut → ProRes 4444
```
.mov
```
；同时指定多个目标 → 全部输出；手机编辑器或不支持 alpha 的工具 → 绿底 MP4，供 chroma key 使用。未指定时：WebM 和
```
.mov
```
。
视觉风格：根据节目、品牌色和氛围（新闻、播客、游戏、纪录片、教会、企业）进行设计。设计应源于这些信息，而不是照搬模板。
未指定时的默认值：1920×1080、30 fps；约 8 秒（不到 1 秒入场、静止保持 5–6 秒、约 0.5 秒出场）；左下角；无音频。

2. Design it for this show

2. 为节目进行设计

The template's

drawGraphic

is a working example of the structure, not the look: rewrite it for the brief. What holds for every design:

Legible over any footage. The graphic cannot know what is behind it, so text sits on its own backing (a panel, a bar, a band, a heavy shadow). Thin light text straight on the picture disappears on a bright shot.
Inside title-safe. Keep every pixel at least 5% in from each edge (
```
SAFE
```
in the template is 6%). The lower third lives in the bottom third; a corner bug in a corner; the middle of the frame stays empty for the speaker.
Small. A name strap covers a few percent of the frame; the name is roughly 50–80 px tall at 1080p, the role about half that.
Still while it's being read. The motion is in the build-in and build-out; the hold does not move, or moves so little it doesn't pull the eye (one slow sheen at most).
Starts and ends empty. The first and last frames have nothing in them, so the clip never pops on or cuts off in the edit. Keep
```
LEAD
```
and
```
TAIL
```
.
The words are never cut. Use
```
fit()
```
so a long name shrinks to its box instead of overflowing it, and size every wipe or clip to the widest thing it reveals. Check the longest entry in
```
CARDS
```
.
Fonts: one Google Fonts
```
<link>
```
per family with the weights and italics you use, and every face you draw with listed in
```
FONTS
```
(
```
'700 Inter'
```
,
```
'italic 400 Libre Baskerville'
```
), so nothing renders in a fallback font. Many serifs (Cormorant, EB Garamond, Playfair Display) draw old-style numerals that drop below the line, and canvas can't switch them to lining ones: if the card has digits ("Psalm 1:3", "Episode 12"), pick a face with lining numerals (Lora, for one) and check the stills.

Several things on screen (a host strap, a guest strap, a corner bug for the whole segment) can be one page with their own timings, or one page per graphic when the editor needs to place them separately; say which you did.

模板中的

drawGraphic

是结构的工作示例，而非视觉样式示例：应根据需求说明重写。所有设计都应遵循以下原则：

在任何素材上都要清晰可读。 图形无法知道背后有什么，因此文字应置于自身的衬底上（面板、条带、色带或厚重阴影）。直接放在画面上的浅色细字在明亮镜头中会消失。
位于 title-safe 区域内。 所有内容与各边缘至少保持 5% 的距离（模板中的
```
SAFE
```
为 6%）。lower third 位于画面下方三分之一；角标位于角落；画面中央留空，避免遮挡演讲者。
尺寸要小。 姓名条只占画面的几个百分点；1080p 下姓名高度约为 50–80 px，身份约为其一半。
阅读期间保持静止。 动效集中在 build-in 和 build-out 阶段；停留期间画面应保持不动，或移动幅度小到不会吸引注意（最多可有一次缓慢的光泽（sheen）效果）。
开头和结尾为空。 首帧和末帧不包含任何内容，避免片段在剪辑中突然出现或被截断。保留
```
LEAD
```
和
```
TAIL
```
。
文字绝不能被裁切。 使用
```
fit()
```
，让较长的姓名缩小至其框内，而不是溢出；每次 wipe 或 clip 的尺寸都应足以容纳其揭示的最宽内容。检查
```
CARDS
```
中最长的条目。
字体：每个字体系列使用一个 Google Fonts
```
<link>
```
，并包含所用的字重和斜体；绘制时使用的每一种字体都应列在
```
FONTS
```
中（如
```
'700 Inter'
```
、
```
'italic 400 Libre Baskerville'
```
），以免任何文字回退到备用字体。许多衬线字体（Cormorant、EB Garamond、Playfair Display）使用 old-style numerals，其数字会低于基线，而 canvas 无法切换为 lining numerals：如果卡片包含数字（“Psalm 1:3”、“Episode 12”），应选择支持 lining numerals 的字体（例如 Lora），并检查静帧。

屏幕上的多个元素（主持人姓名条、嘉宾姓名条、整段视频使用的角标）可以放在同一页面中并分别设置时序；如果剪辑师需要单独放置，也可以每个图形使用一个页面；交付时说明采用哪种方式。

3. Check it

3. 检查

bash

node render.mjs page.html --check                                    # fonts, transparency, empty first/last frame, title-safe, timing
node render.mjs page.html shot --stills 3s                           # the hold, full frame, over a checkerboard, dark and light footage
node render.mjs page.html in.jpg --sheet 0.1 --in                    # the build-in, frame by frame, cropped to the graphic
node render.mjs page.html out.jpg --sheet 0.1 --out                  # the build-out (both read window.PHASES)

--check

must pass, but it can't see text cut off by a wipe or text that's hard to read: your eyes do that. In the stills, every word reads over both the dark and the light ground and the spacing is even. In the sheets, nothing jumps, no text shows before or outside the part of its panel that is revealed, none gets cut mid-hold, and the build-out is as clean as the build-in. Check every entry in

CARDS

(

--card N

counts from 0:

--card 1

is the second). Fix and look again until it holds up.

bash

node render.mjs page.html --check                                    # fonts, transparency, empty first/last frame, title-safe, timing
node render.mjs page.html shot --stills 3s                           # the hold, full frame, over a checkerboard, dark and light footage
node render.mjs page.html in.jpg --sheet 0.1 --in                    # the build-in, frame by frame, cropped to the graphic
node render.mjs page.html out.jpg --sheet 0.1 --out                  # the build-out (both read window.PHASES)

--check

必须通过，但它无法识别被 wipe 裁切的文字或难以辨读的文字，这需要你用肉眼检查。在静帧中，每个词在深色和浅色背景上都能清晰阅读，间距均匀。在图像表中，不得出现跳动；文字不得在对应面板区域被揭示之前或之外显示；停留期间不得裁掉文字；build-out 应与 build-in 同样干净。检查

CARDS

中的每个条目（

--card N

从 0 开始计数：

--card 1

表示第二个）。持续修复并复查，直到效果合格。

4. Render and deliver

4. 渲染与交付

bash

node render.mjs page.html maya-chen.webm                    # VP9 with alpha
node render.mjs page.html maya-chen.mov                     # ProRes 4444 with alpha (large)
node render.mjs page.html daniel-ortiz.webm --card 1        # the next card
node render.mjs page.html maya-chen-4k.webm --scale 2       # 3840x2160
node render.mjs page.html maya-chen-green.mp4 --ground '#00ff00'

The script refuses an MP4 without

--ground

(H.264 has no alpha) and confirms that WebM and

.mov

files really carry an alpha channel, by decoding a frame from the hold. Hand over the files, the page (they can change a name and re-render), and how to use them in their tool from

references/delivery.md

, in two or three lines (a web page also needs the Safari file described there). Say what you chose that they didn't ask for.

Needs: Node 18+,

npm i playwright-core

in the working folder or any folder above it, ffmpeg, and Chrome (or

npx playwright install chromium

bash

node render.mjs page.html maya-chen.webm                    # VP9 with alpha
node render.mjs page.html maya-chen.mov                     # ProRes 4444 with alpha (large)
node render.mjs page.html daniel-ortiz.webm --card 1        # the next card
node render.mjs page.html maya-chen-4k.webm --scale 2       # 3840x2160
node render.mjs page.html maya-chen-green.mp4 --ground '#00ff00'

如果没有

--ground

，脚本会拒绝输出 MP4（H.264 不支持 alpha），并通过解码停留阶段的帧，确认 WebM 和

.mov

文件确实包含 alpha 通道。交付时提供文件、页面（用户可以修改姓名后重新渲染），并根据

references/delivery.md

用两到三行说明如何在他们的工具中使用这些文件（网页还需要其中所述的 Safari 版本）。说明你替他们做了哪些未明确要求的默认选择。

需要：Node 18+、在工作目录或其任一上级目录中执行

npm i playwright-core

、ffmpeg，以及 Chrome（或执行

npx playwright install chromium

）。