OpenMontage 逐字幕条Lower-Thirds分类模块实战姓名条、标注卡与社交角标的透明叠加合成指南【免费下载链接】OpenMontageWorlds 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 ◇。类别意图依赖的能力kinetic-type冲击力短句/引言文字即主角caption-*块 动画规则stat单一英雄数字/计数 圆环apple-money-count/ 计数规则charts由数据驱动的柱/线/饼/竞赛图data-chart块logo-revealLogo 转场 / 品牌字标用户 Logologo-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] }各字段语义与设计影响字段类型作用与设计要点namestring主信息字形权重与字号最大rolestring副信息通常弱化为次级字重/字号或置于竖线之后positionlower-left/lower-third/corner决定条与画框的相对锚点必须落在标题安全区内brand_colors[]hex[]驱动条底色、强调条、文字强调色的取色来源避免把任意颜色散落写进 HTML规划时 envelope 的默认导出即为alpha-overlay透明背景Director 在绘制整条拍的content.blockcontent.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 在动手前应先在下列能力中挑选最贴近的组件caption 系列块pill-karaoke胶囊逐字、neon-accent霓虹强调、editorial-emphasis编辑式强调等caption-*文字块负责字幕条中的文字区表现层注册表 overlay 块instagram-follow、tiktok-follow、yt-lower-third、x-post、spotify-card、macos-notification—— 面向社交平台的关注卡/卡片形态可定制 handle、头像、指标等动作原语primitivesslide/wipe-in滑入/擦入、bar reveal条带揭示、glow辉光强调、fade/slide-out淡出/滑出。其中动作原语与共享词汇表 references/motion-vocabulary.md 是一一对应的可执行 GSAP 配方lower-thirds 原语共享词汇中的对应配方适用氛围slide-in / wipe-inslide_left/right/bottomfrom({ x:±200 / y:±150, opacity:0, ease:power4.out })沉稳、专业、渐进bar revealunderline_sweep/bar_wipefromTo({scaleX:0},{scaleX:1}, transformOrigin:left center)条形锚点揭示glow强调glowto({ textShadow:0 0 46px ink/accent, yoyo:true, repeat:1 })重要信息、节拍峰值fade / slide-outfade_out/slide_outto({ 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 摆好布局再写 GSAPgsap.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 --exampleblank # Step 5 — 渲染普通画面用 mp4 (cd $PROJECT_DIR npx hyperframes render . --skillmotion-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 56可见 SKILL.md 的 Resume table。对叠加类产物最终向用户交付的应当包含渲染文件与时长透明变体.webm/.mov则明确标注其可叠加属性。小结OpenMontage 的 lower-thirds 分类模块.agents/skills/motion-graphics/categories/lower-thirds/module.md提供了一个**规划字段 → 语汇复用 → 手写兜底 → 透明导出 → 安全区约束**的完整闭环Director 只产出{name, role, position, brand_colors[]}的轻量 IRBuilder 的默认动作是复用caption-*/overlay 注册块只有无块可覆盖时才手写scaleX:0 → 1transform-origin:left加文字上滑的条带序列最终统一经alpha-overlay--format webm/mov导出为可无缝叠上实拍画面的透明图形层。配合 references/motion-vocabulary.md、references/builder-contract.md 与 catalog-map.md 三份配套文档即可在生产管线中稳定产出这类高频叠加图形。【免费下载链接】OpenMontageWorlds 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考