OpenMontage 新闻头条动效指南：用 marker-band 高亮实现"可读新闻 → 就地强调"的文章高亮动效

真实新闻素材如何变成一段 5–7 秒、无解说、以动效本身为信息载体的短视频？OpenMontage 的 motion-graphics 技能栈中，news 类别模块给出了完整的答案：它基于 RWA（真实网络素材）流程，把一篇真实新闻文章搜索进来后，不是放大局部、做夸张缩放，而是以可读字号完整排版文本、再用一个从左向右生长的 marker-band 标记带就地高亮关键词。本文以 news 类别模块 为主线，结合 Builder 契约、镜头计划 IR 与动效词表，讲清从素材采集到两种版式（9:16 居中强调 / 16:9 全文卡片）落地实现的完整方法与底层原理。

news 类别在 motion-graphics 技能中的位置

在 OpenMontage 的 motion-graphics 技能入口 中，该技能负责"短小、以设计驱动的无旁白动效"，通常在 10 秒内。整个技能的运行被建模为一条分阶段的流水线：init → plan → source(◇) → design → build → render → verify，其中 ◇ source 只在类别声明了素材需求（asset_needs 非空）时才执行。

计划阶段的第一道岔路是"是否需要搜索"：

• 无需搜索（内容由用户直接提供）→ 归入形式类别（form categories）：kinetic-type、stat、charts、logo-reveal、lower-thirds；
• 需要搜索 → 走 RWA 路径，按搜索结果的内容类型再确定具体搜索驱动类别。

news 正是搜索驱动类别之一，与它并列的是 webpage（网页/UI）、tweet（推文卡片）、asset-fusion（图片几何即图表）。当用户表达的是"把一篇新闻做成高亮头条动效"时，Director 会在分类表中选择 news：它的呈现目标是 article-highlight，即对真实新闻文章做"全文高亮"式忠实演绎。

news 模块的定位与 asset-fusion、webpage 的区别，可以从 Director 的分类规则 中看到——搜索驱动类别不是计划时拍板，而是在 Step 2 素材返回后确认、在 Part 2 设计阶段最终定型。

两种布局：一个高亮内核，按宽高比与素材特征分流

news 类别模块非常克制：它只围绕一个共享的高亮内核展开，并定义了两种布局，选用依据是画面宽高比、以及是否具备真实的媒体 Logo 与故事相关人物：

布局	宽高比	适用场景	画面要素
A · centered-emphasis（居中强调）	9:16 / 1:1	纯文字、社交竖屏	kicker（媒体小标）+ 一条居中句子 + 关键词就地高亮
B · full article（全文文章卡）	16:9	存在真实的媒体 Logo 和/或故事人物	Logo + 日期 + 多行头条高亮 + dek（导语）+ 媒体名 + 人物抠像

整体时长设计为约 5–7 秒；两种布局的节奏都面向"可暂停、可 seek、确定性渲染"的 HyperFrames 契约，而不是浏览器里随手播放的页面。

Source 阶段：先搜到一篇真实文章再谈设计

news 的素材来源遵循 source 阶段指南：通过 RWA/网络搜索（或 hyperframes capture 捕获）拿到一篇真实文章。随后 Director 需要从文章中抽出构建动效所需的信息：

• 关键词 keyword（1–2 个词 / 一个数字 / 一个人名），它是整段动效的"钩子"；
• 若走 Layout B，还需要品牌 Logo、日期、人物照片。

这些素材需求被写入镜头计划 IR 的 asset_needs，并以独立的素材查询请求发出（例如用 Wikimedia / simple-icons 找 Logo，用 Wikimedia 找人物照片）：

"asset_needs": [
  { "kind": "news",  "query": "…" },
  { "kind": "image", "role": "logo",   "query": "<媒体名> logo" },
  { "kind": "image", "role": "subject", "query": "<人物名>" }
]

其中 kind 的取值范围是 news | web | image（对应 shot-plan IR 中的 image|icon|logo|svg|news|web|tweet）。搜索遵循 source 指南里的两极查询纪律：要么是原子式短查询（1–3 词、可组合，如人名、Logo），要么是具体的长查询（5–15 词描述一个新闻事件），绝不取中间态；一次失败的具体查询直接丢弃，而不是放宽词条。

拿到人物照片后，模块明确要求先执行背景移除，得到透明 PNG 抠像：

hyperframes remove-background <in> -o <out>.png

source 指南同时给出"优雅降级"：若搜索/提供方不可用，就把这条素材需求记为未满足（写入 context.log），类别退回无素材模式——例如 news 退回"纯排版头条、不带搜索到的图片"。这也与技能里"asset-first、先确定素材策略再做镜头设计"的原则一致：设计永远围着手上真实的素材转。

共享内核：marker-band 标记带技术

两种布局共用的高亮核心，是本文最值得复用的纯前端技巧。关键词的高亮不是一根 transform: scaleX 拉伸的色条，而是通过 background-size 在原位从左向右生长的标记带：

.hl {
  --hlw: 0%;
  background-image: linear-gradient(var(--hl), var(--hl)); /* --hl: rgba(250,222,99,.6) */
  background-repeat: no-repeat;
  background-position: 0 72%;
  background-size: var(--hlw) 64%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

为什么刻意绕开 scaleX？关键在于这一行：

box-decoration-break: clone;

它让背景带在跨行折行处无缝延续。当一个 2–3 个词组成的关键词在句子中折成多行时，旧式 scaleX 色条只会作用于单行盒，而 box-decoration-break: clone 会为每一行片段各自重绘背景，从而视觉上形成一条连续扫过高亮。标记带默认停在 background-position: 0 72%、纵向覆盖 64% 字高，是一种贴近手绘荧光笔的位置，透明度约 0.6 的 --hl 不会把正文压没。

动画端由 GSAP 直接驱动这个 CSS 变量从 0% 生长到 100%：

gsap.to("#kw", { "--hlw": "100%", duration: 0.8, ease: "power2.out" });

模块强调两条铁律：

1. 扫描必须发生在文本完全落定之后，绝不预先挂上高亮（swept on AFTER the text settles — never pre-applied）；
2. 高亮时长可随关键词长度在 0.5–1.5s 之间伸缩（默认 ~0.8s）。

这条"先让全文可读呈现、再就地标注关键词"的次序，正是"centered-emphasis（居中强调）"这一编辑技法的忠实移植——信息先完整抵达，强调再精确发生。

Layout A：居中强调版（9:16，纯文字）

Layout A 面向社交竖屏/方屏纯文字场景，全部围绕"一条关键句"展开。Builder 侧的操作顺序（详见 Builder 契约 的"先版式后动画"原则）：

1. 以可读字号排版关键句——绝不 zoom。 舞台做成纸面浅底（paper-light stage），顶部放媒体小标 #kicker（如 "BBC NEWS · TECHNOLOGY"，使用媒体品牌强调色），关键句居中、衬线字体、约 70–76px / 700 / line-height ≈ 1.4，max-width ≈ 900。整句始终完整可读，关键词只在句内被强调。

2. 将关键词就地用 span 包裹：

… raised <span class="hl" id="kw">$750M</span> at …

3. 时间线（可暂停、确定性、seek-safe），动效原文为：kicker 淡入+滑入 → 句子滑+淡入（无 zoom）→ 关键词标记带生长 → 轻微 hold。对应 GSAP 序列为：

tl.fromTo("#sentence", { autoAlpha: 0, y: 52 }, { autoAlpha: 1, y: 0, duration: 0.8, ease: "power3.out" })
  .to("#kw", { "--hlw": "100%", duration: 0.8 }, ">")   // 句子落定之后才扫
  .to("#stage", { scale: 1.012, duration: 0.6, ease: "sine.inOut" }); // 温柔的 hold_breath

这里的 autoAlpha 与缓动选择并非随意：power3.out、sine.inOut 都在 Builder 契约 允许的缓动白名单（power1–4、back、bounce、circ、elastic、expo、sine 的 .in/.out/.inOut）之内；而"先用 gsap.set 置 autoAlpha:0 再做 to(autoAlpha:1)"正是契约中针对确定性 seek 渲染总结出的安全显隐写法——单纯 set(opacity:1)+from(opacity:0) 会在暂停/seek 渲染下让元素永远不可见。

Layout B：全文文章卡（16:9，Logo + 人物抠像）

当故事里存在真实的媒体 Logo 和/或人物时，走 16:9 的编辑式文章卡：1920×1080、纸面浅底渐变舞台、Georgia 衬线主字体。要素与规格如下：

元素	选择器/位置	规格
媒体 Logo	#logo 左上，~64px	内联媒体 SVG，fill: currentColor；带色标识用标识自身色相，单色标识用近黑
日期	#date（Logo 下方，~30px）	弱化色
头条	#headline（Georgia 96px / 700，width≈1080，line-height 1.16）	关键词包 <span class="hl" id="kw">，标记带跨所有折行扫过
导语	#dek（Helvetica ~38px，灰色）	位于头条下方
媒体名	#outlet（Georgia bold ~50px）	左下角
人物抠像	#subject（已去底 PNG，height≈860，right:40; bottom:0，drop-shadow）	从右下滑入，作为英雄节拍

Layout B 的完整时间线（seek-safe、paused）：

节拍	动效	时刻
Logo	back.out	@0.15s
日期	淡入	@0.4s
人物滑入	set{autoAlpha:0, x:90, y:60} → to{autoAlpha:1, x:0, y:0, duration:0.85, ease:"power3.out"}	@0.45s
头条	上滑淡入	@0.7s
导语 dek	上滑淡入	@1.5s
媒体名 outlet	上滑淡入	@1.9s
关键词标记带	--hlw 0→100%，duration:0.8	@2.2s

全程约 6.5 秒。时间轴靠后放置高亮，与 Layout A 一致——文本层先全部到场，标记带最后才扫，让观众的视线先读完、再被强调点住。

从 IR 到成品：news 在 shot-plan 中的内容形状与校验

news 类别在两阶段镜头计划中的中间表示（shot-plan-ir.md）里被定义为：

{
  "category": "news",
  "duration_s": 6.5,
  "fps": 30,
  "canvas": { "w": 1920, "h": 1080, "aspect": "16:9" },
  "export": "mp4", // 或 alpha-overlay（透明 webm/mov）
  "content": {
    "outlet": "…",  "headline": "…",  "body": "…",  "keyword": "…",
    "layout": "A|B",
    "logo": "…",    "date": "…",      "subject": "…"   // 仅 Layout B
  }
}

可以看到 content 精确承载了模块定义的两个版式的字段集合：Layout A 侧重 headline + keyword，Layout B 额外携带 logo、date、subject。IR 同时是 Director 与 Builder 之间的唯一契约：Plan 阶段产出草稿、design 阶段定稿，Builder 再据 block/customize 走向"复用优先"的组装。

收尾阶段，技能入口 的 verify 步骤对产物执行确定性校验与渲染：

(cd "$PROJECT_DIR" && npx hyperframes lint . && npx hyperframes inspect .)
(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q draft -o ./renders/video.mp4)

lint 检查静态契约（重复 id、轨道重叠、缺少 data-composition-id、未注册的时间线等），inspect 用于发现溢出/碰撞问题；有错误时交给修复子代理做就地单轮修复，且禁止在修复过程中改动已固定的 data-duration——这与 Builder 契约中"never change a fixed duration in repair"完全一致。需要透明叠加（如叠加到已有画面上的高亮头条）时，渲染加 --format webm（或 mov）。

两条不可违背的"Critical"

news 模块在结尾集中列出了一组"Critical"约束，它们是团队在真实反馈中沉淀出的行为红线（模块内记录为 2026-06-09 团队反馈）：

1. 高亮是原位生长、文本落定后才扫上，绝不预先应用；且正文必须保持可读——不得把关键词放大到撑满画面。原话记录了那次反馈的结论：zoom 会丢掉上下文、让读者产生误读；该技术流派的本质是"把文本呈现出来，然后强调那个词"。
2. Layout B 中的人物必须是 remove-background 抠像，不能是带矩形的照片框——人物以去底形象滑入画面，而非贴一张图片，这决定了英雄节拍的质感。

最后，整条动效必须是确定性的（deterministic）：时间线上不使用 Date.now() / Math.random() / 网络，单一 paused GSAP timeline 注册到 window.__timelines 并以 tl.seek(0) 结束、渲染期绝不调用 tl.play()——这些非协商条款的完整细节见 builder-contract.md。模块提到的参考样例（samples/news/_ref-centered-emphasis.html 与 _ref-article-layout.html，后者记录为"用真实媒体 Logo + 去底人物 + 真实新闻渲染的完整文章版"）沿用了同一套"复用优先"的构建策略：优先从 HyperFrames 注册表里 add 现成块再就地定制，只有目录未覆盖的缺口才手工编写。

小结：一条可直接套用的"文章高亮"recipe

把整个模块收敛成可复用的工程配方，就是四步：

1. 搜真素材：RWA 搜索一篇真实文章，抽出 keyword；Layout B 再抽 logo / date / person，人物做 remove-background 抠像；
2. 排版优先：按版式把全文或关键句以可读字号排好（Layout A 居中衬线 ~70–76px；Layout B 96px Georgia 头条 + dek + outlet），关键词用 .hl span 包裹；
3. 就地强调：用 background-size + --hlw 变量 + box-decoration-break: clone 让荧光带跨行生长，绝不 zoom、绝不预先挂载、文本落定后再扫（0.5–1.5s）；
4. 确定性交付：单一 paused GSAP timeline、seek-safe 显隐、lint/inspect 通过后渲染 MP4（或透明 webm/mov）。

它与 OpenMontage 动效流水线中"运动即信息、先素材后设计、先复用后手写"的整体哲学一脉相承，也是把新闻编辑版面里经典的居中强调（centered-emphasis）转译为逐帧可控动画的最直接范本。更多可复用素材还包括动效原语表（motion-vocabulary.md）中与句子滑入、hold_breath、underline_sweep 对应的 GSAP recipe，以及类别到目录块映射（catalog-map.md）里的复用机制——需要把该技术移植到其他 OpenMontage 动效类别时，这些文件是最快的起点。