lower-thirds

Lower thirds

Lower third 是位于画面底部、标明讲话者姓名和身份的图形，叠加在它无法看到的素材画面上。交付文件带有 Alpha 通道：所有未绘制的部分都会保持透明。

将 templates/lower-third.html 复制到工作文件夹，在其中编写设计，用 scripts/render.mjs 检查，然后渲染文件。从工作文件夹运行脚本（node <this skill>/scripts/render.mjs …）；输出文件会放在那里。一次完成：不要询问说明中已经回答或可用合理默认值处理的问题，并在交付时列出你选择的默认值。

1. 阅读需求说明

• 要显示的文字，必须完全一致：姓名、身份、节目名称、账号、经文出处、歌曲名称。保留用户的拼写和标点（将某行设为大写属于样式处理；文字仍须照原样）；绝不要臆造头衔或姓氏。如果用户没有提供第二行，就用用户自己的文字写一行（说明直播的主题），或者省略第二行。
• 卡片数量：每个人或项目各占 CARDS 中的一项，并渲染为单独文件，设计保持一致。如果某张卡片需要 title 和 sub 以外的内容，就添加字段。
• 输出用途：OBS 或直播 → 仅 WebM；网页 → WebM 加 Safari HEVC 副本（references/delivery.md）；Premiere Pro、DaVinci Resolve、Final Cut → ProRes 4444 .mov；同时指定多种用途 → 全部提供；手机编辑器或不支持 Alpha 的工具 → 绿色背景 MP4，用于色度键抠像。未说明用途时：提供 WebM 和 .mov。
• 视觉风格：节目、品牌颜色、氛围（新闻、播客、游戏、纪录片、教会、企业）。设计应由这些因素决定，而不是照搬模板。
• 未指定时的默认值：1920×1080，30 fps；约 8 秒（入场不到 1 秒，静止停留 5–6 秒，出场半秒）；左下方；无声。

2. 为节目设计

模板中的 drawGraphic 展示的是结构示例，不是视觉样式：请根据需求说明重新编写。所有设计都应遵循以下原则：

• 在任何素材画面上都清晰可读。 图形无法知道背景是什么，因此文字应置于专属底板上（面板、横条、色带或明显阴影）。亮色画面上直接叠加纤细的浅色文字会看不清。
• 位于标题安全区内。 每个像素都应与画面边缘至少相隔 5%（模板中的 SAFE 为 6%）。Lower third 应位于画面下三分之一处；角标应放在角落；画面中央要留空，供讲话者显示。
• 尺寸要小。 姓名条只覆盖画面的几个百分点；在 1080p 画面中，姓名高度约为 50–80 px，身份文字约为其一半。
• 阅读期间保持静止。 动效只用于入场和出场；停留期间不应移动，或只做极轻微的移动，以免分散注意力（最多加一道缓慢掠过的光泽）。
• 起止画面保持空白。 第一帧和最后一帧都不要显示任何内容，这样剪辑时片段不会突然出现或被截断。保留 LEAD 和 TAIL。
• 文字绝不被裁切。 使用 fit() 让较长的姓名缩小到文本框范围内，而不是溢出；每个擦除或裁切区域的大小都要足以容纳它所显示的最长内容。检查 CARDS 中最长的条目。
• 字体：每个字体系列使用一个 Google Fonts <link>，并包含实际用到的字重和斜体；同时在 FONTS 中列出绘制时使用的每种字体（如 '700 Inter'、'italic 400 Libre Baskerville'），避免渲染时回退到其他字体。许多衬线字体（Cormorant、EB Garamond、Playfair Display）会绘制下沉到基线以下的旧式数字，Canvas 无法将它们切换为等高数字：如果卡片包含数字（“Psalm 1:3”、“Episode 12”），请选择支持等高数字的字体（例如 Lora），并检查静帧。

屏幕上的多个元素（主持人姓名条、嘉宾姓名条、贯穿整个片段的角标）可以放在同一页面并分别设置时间，也可以每个图形单独占一页，方便剪辑师分别放置；请说明采用了哪种方式。

3. 检查

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 必须通过，但它看不到被擦除效果截断的文字，也看不出难以辨认的文字：这些需要用眼睛检查。在静帧中，每个词在深色和浅色背景上都清晰可读，间距均匀。在图层中，没有任何内容突然出现；揭示之前或超出面板已揭示部分的文字都不会显示；没有文字在停留期间被截断；退场效果与入场效果一样干净。检查 CARDS 中的每一项（--card N 从 0 开始计数：--card 1 是第二项）。修正后再次查看，直到效果令人满意。

4. 渲染并交付

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）。