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

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

【免费下载链接】OpenMontageWorld's first open-source, agentic video production system. 12 production pipelines, 100+ tools, 700+ agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage

导读

本文聚焦 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 ◇）。

分类模块原文对它的定义是："用于覆盖在其他镜头上方的图形（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"] }

各字段语义与设计影响：

规划时 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 恰好能由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 三份配套文档，即可在生产管线中稳定产出这类高频叠加图形。

【免费下载链接】OpenMontageWorld's first open-source, agentic video production system. 12 production pipelines, 100+ tools, 700+ agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage