OpenMontage 逐字幕条（Lower-Thirds）分类模块实战：姓名条、标注卡与社交角标的透明叠加合成指南

导读

本文聚焦 OpenMontage 仓库中 motion-graphics 技能体系下的 lower-thirds 分类模块（见 categories/lower-thirds/module.md），它是面向"叠在其他画面上层"的短动态图形的形式类目：姓名/职务条、标注 callout、社交平台关注卡等。读完本文你将掌握：Director 如何为该类目产出 shot-plan 规划字段（name/role/position/brand_colors）、Builder 如何以"复用优先"原则选用 caption 块与 overlay 注册块、如何手写"横条擦入 + 文字上滑"的关键帧逻辑，以及如何用 alpha-overlay 透明导出（webm/mov）把结果无痕叠加到实拍素材之上。

一、什么是 lower-thirds 类目：定位、时长与使用边界

在 motion-graphics 技能的调度入口（SKILL.md）中，所有动态图形请求先按"是否需要搜索素材"分成两组。lower-thirds 属于"形式类目（form category）"——无需搜索，内容由用户直接提供，其 asset_needs 恒为 []，在六阶段流水线中会直接跳过素材寻源阶段（source ◇）。

类别	意图	依赖的能力
kinetic-type	冲击力短句/引言，文字即主角	caption-* 块 + 动画规则
stat	单一英雄数字/计数 + 圆环	apple-money-count / 计数规则
charts	由数据驱动的柱/线/饼/竞赛图	data-chart 块
logo-reveal	Logo 转场 / 品牌字标（用户 Logo）	logo-outro / svg-path-draw 规则
lower-thirds	姓名/职务条、callout、社交叠加层	caption-* + 注册表 overlay 块

分类模块原文对它的定义是："用于覆盖在其他镜头上方的图形（Name/title bars, callouts, social overlays）"，无素材依赖（可加可选 Logo），通常时长约 3–6 秒，可做循环或保持（loop/hold）。在 Director 的角色识别表中对应"姓名/职务条、标注、社交叠加"场景即命中本类目（见 agents/director.md）。

关键区分：lower-thirds 与 kinetic-type 都使用 caption-* 家族，但前者永远服务于"叠在既有画面/产品图之上"的辅助信息表达，而后者是"文字即 hero"的独立画面；同时它区别于嵌入式硬字幕（那属于 embedded-captions 技能），因为它本质是一条可复用的品牌化图形覆盖层。

二、规划（Director）阶段：shot-plan 的 content 结构

lower-thirds 模块在 shot-plan IR（中间表示，见 references/shot-plan-ir.md）中对应如下内容形状：

"content": {
  "name": "演示者姓名 / 嘉宾名",
  "role": "职务 / 头衔 / 一句话描述",
  "position": "lower-left | lower-third | corner",
  "brand_colors": ["#E63946", "#F1FAEE"]
}

各字段语义与设计影响：

字段	类型	作用与设计要点
name	string	主信息，字形权重与字号最大
role	string	副信息，通常弱化为次级字重/字号或置于竖线之后
position	lower-left / lower-third / corner	决定条与画框的相对锚点；必须落在标题安全区内
brand_colors[]	hex[]	驱动条底色、强调条、文字强调色的取色来源，避免把任意颜色散落写进 HTML

规划时 envelope 的默认导出即为 alpha-overlay（透明背景），Director 在绘制整条拍的 content.block + content.customize 指示时应显式保留该导出设置，从而让 Builder 与 Render 阶段走向透明合成路径。Director 的其它通用约束（30fps、画布默认 9:16 亦可按平台切换 16:9/1:1、调色板、字体、beats、风格）一并写入 envelope，见 agents/director.md 的 Part 1/Part 2 约定。

三、表达素材：caption 块、注册表 overlay 块与动作原语

lower-thirds 模块将自己的"语汇（Vocabulary）"划分为三层，Builder 在动手前应先在下列能力中挑选最贴近的组件：

1. caption 系列块：pill-karaoke（胶囊逐字）、neon-accent（霓虹强调）、editorial-emphasis（编辑式强调）等 caption-* 文字块，负责字幕条中的"文字区"表现层；
2. 注册表 overlay 块：instagram-follow、tiktok-follow、yt-lower-third、x-post、spotify-card、macos-notification —— 面向社交平台的"关注卡/卡片"形态，可定制 handle、头像、指标等；
3. 动作原语（primitives）：slide/wipe-in（滑入/擦入）、bar reveal（条带揭示）、glow（辉光强调）、fade/slide-out（淡出/滑出）。

其中动作原语与共享词汇表 references/motion-vocabulary.md 是一一对应的可执行 GSAP 配方：

lower-thirds 原语	共享词汇中的对应配方	适用氛围
slide-in / wipe-in	slide_left/right/bottom：from({ x:±200 / y:±150, opacity:0, ease:"power4.out" })	沉稳、专业、渐进
bar reveal	underline_sweep / bar_wipe：fromTo({scaleX:0},{scaleX:1}, transformOrigin:"left center")	条形锚点揭示
glow（强调）	glow：to({ textShadow:"0 0 46px <ink/accent>", yoyo:true, repeat:1 })	重要信息、节拍峰值
fade / slide-out	fade_out / slide_out：to({ opacity:0 / y:x off, ease:"power2.in" })	退场与转场

词汇表还强调**"能用注册组件就别自己造轮子"**：当某条 lower-thirds 恰好能由 caption-pill-karaoke、caption-editorial-emphasis、caption-neon-glow 等已渲染验证过的块覆盖时，Builder 应优先引用它们而非手写等价实现（见 references/motion-vocabulary.md 末尾组件清单）。这与目录映射文档 catalog-map.md 的"复用优先"默认策略一致。

四、构建（Build）阶段：两条路径

模块给出两条构建路径，均以"覆盖最近似的 overlay/caption 块"为默认：

路径 A：复用 + 就地定制 通过 HF CLI 拉取注册块源码，再就地修改 name / role / handle / brand_colors / position。目录映射文档描述了完整机制：npx hyperframes add <block> 会把块源码落进 compositions/<block>.html，随后内联引用或通过 data-composition-src 引用，并就地定制内容/数据/调色板/位置；块本身已按固定画布（1920×1080 / 1080×1920 / 1080×1080）与 HF 暂停时间线契约交付，需做匹配或自适应即可（见 catalog-map.md）。

路径 B：手写"条带擦入"序列 当无块可完全覆盖时，模块给出了参考实现骨架：

一条 scaleX 从 0 起、transform-origin:left 的横条擦入（wipe-in），文字在其后方向上滑（slide up）进入；保持（hold）一段时间后整体滑出。背景保持透明（export: alpha-overlay → render --format webm/mov），以便叠加到画面之上；并将内容约束在标题安全的下方区域。

这条骨架与 Builder 契约（references/builder-contract.md）中的强制约定完全对齐：

• 先静态后动画：先为 hero frame 用纯 CSS 摆好布局，再写 GSAP；gsap.from() 负责从画外/不可见态"到达"CSS 的 ground-truth 位置；
• 结构约束：外层容器至少保持约 ≥80px 内边距以维护标题安全边距（与模块"title-safe lower band"呼应）；不要用 position:absolute; top:Npx 承载内容容器；
• 确定性渲染：单一 gsap.timeline({paused:true}) 挂在 window.__timelines["<id>"]，tl.seek(0)，禁止 tl.play()、Date.now()、Math.random()；延迟元素需用 gsap.set(el,{autoAlpha:0}) + gsap.to(el,{autoAlpha:1}) 方式揭示，否则在 seek 渲染下会永久不可见（这是该文档记录的评估发现）；
• 调色板纪律：全部颜色收敛进一个 palette 对象 / CSS 变量，不在标签中散落十六进制——正对应 brand_colors[] 的使用方式；
• 节奏纪律：每场一个主导动机，data-layout-allow-overflow 需显式标记，产出用 hyperframes inspect 复核。

五、透明导出：alpha-overlay 与叠加工作流

lower-thirds 的核心技术特征是透明通道。规划 envelope 的 export 字段写 alpha-overlay（而非普通 mp4），渲染阶段即由 --format webm（或 mov）输出透明背景的视频，供合成软件或程序化管线直接叠到实拍/产品画面上。

整个 motion-graphics 流水线（SKILL.md 的 Step 0–Step 6）的关键命令：

# Step 0 — 初始化（仅在 hyperframes.json 缺失时）
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank

# Step 5 — 渲染：普通画面用 mp4
(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q draft -o ./renders/video.mp4)
# lower-thirds 走透明叠加变体：--format webm 或 mov

# Step 6 — 校验
(cd "$PROJECT_DIR" && npx hyperframes lint . && npx hyperframes inspect .)

合规性说明：流程约束"绝不把 hyperframes init 跑在工作区根目录；每个 Bash 命令都必须包裹在 (cd "$PROJECT_DIR" && …) 子 shell 中"，对 lower-thirds 这类叠加件尤其重要，因为其产物注定要与其他镜头在更外层合成。渲染后的 .webm/.mov 透明件自带 alpha 通道，可直接被上层视频编辑/合成环节消费（本仓库的合成类工具如 tools/video/video_compose.py、tools/video/video_stitch.py 所在链路即可作为叠加使用场景的参考）。

六、标题安全与画面规范：约束即风格

模块对 lower-thirds 的"画面卫生"要求贯穿规划与构建两个阶段：

• Title-safe 下缘带：条与文字必须留在标题安全区（安全区外左右区域由上层画面的文字设计占用），Builder 契约给出的 ≥80px 内边距是可落地的量化起点；
• 时长感：3–6s（或 loop/hold），配合视觉节奏做"约 0.1s 提前预示节拍"的感知同步；整体不超过 motion-graphics 的 ~30s 上限；
• 主导动机唯一：一条 lower-thirds 只需一个 wipe/reveal 动机；若整段超过 ~2.5s 应做"恰好改变一件事"的 pattern-interrupt；
• 可读性底线：关键元素保持 ≥~0.3s 的清晰可读时长（这些设计启发来自 agents/director.md 的 heuristics 章节）。

换言之，lower-thirds 的设计自由度集中在"横条的材质与颜色、强调点亮起方式、文字入场顺序"，其余都应按透明覆盖层的职责让位于底层画面。

七、端到端产物形态与核对

遵循模块与主技能，一个 lower-thirds 项目在项目目录内最终呈现为：

videos/<project-name>/
  hyperframes.json          # Step 0 init 产物
  context.log
  shot-plan.json            # 含 lower-thirds content: {name, role, position, brand_colors[]}
  assets/                   # 本类目 asset_needs=[]，通常为空
  compositions/index.html   # Builder 输出（复用的 caption/overlay 块或手写 wipe 条）
  renders/video.mp4 | video.webm / .mov   # alpha-overlay 透明叠加件

流水线的续跑以产物为断点（无 shot-plan.json → 重规划；有最终 shot-plan.json 无 compositions/index.html → 设计与构建；有 compositions 无渲染 → Step 5+6），可见 SKILL.md 的 Resume table。对叠加类产物，最终向用户交付的应当包含渲染文件与时长，透明变体（.webm/.mov）则明确标注其可叠加属性。

小结

OpenMontage 的 lower-thirds 分类模块（.agents/skills/motion-graphics/categories/lower-thirds/module.md）提供了一个**"规划字段 → 语汇复用 → 手写兜底 → 透明导出 → 安全区约束"**的完整闭环：Director 只产出 {name, role, position, brand_colors[]} 的轻量 IR，Builder 的默认动作是复用 caption-*/overlay 注册块，只有无块可覆盖时才手写 scaleX:0 → 1（transform-origin:left）加文字上滑的条带序列，最终统一经 alpha-overlay + --format webm/mov 导出为可无缝叠上实拍画面的透明图形层。配合 references/motion-vocabulary.md、references/builder-contract.md 与 catalog-map.md 三份配套文档，即可在生产管线中稳定产出这类高频叠加图形。