HyperFrames titlecard-reveal 蓝图实战：单卡静置揭示镜头的三段式编排、四种变体与规则映射

本文围绕 titlecard-reveal 蓝图 展开，它是 HyperFrames 动画技能库中负责「冷静着陆节拍」的多阶段镜头模板：一张干净的标题卡或品牌/背书卡，用恰好一个克制动作（上滑交叉淡变，或擦拭揭示）入场，然后静止保持。读完本文，你将掌握该蓝图的 Scene 1–3 时间结构、Benefits / Social_Proof / CTA / Product_Intro 四种来源变体、卡链（card chain）的硬切编排，以及它映射到 13 条原子动画规则的具体实现配方，并能在满足 HyperFrames 确定性渲染契约的前提下把它落地成一段可渲染的 HTML 合成。

一、蓝图定位：低动效本身就是交付物

在 hyperframes-animation 技能库 中，蓝图（blueprint）被定义为「产品无关、带时间码的分镜模板」——Scene N (a–b s): … 的结构、[slots] 占位符、以及一个具名的 signature move。它编码了整段镜头在完整时长内的编排，揭示节奏跟随口播行而不是在 t=0 一次性倾泻。blueprints 索引 收录了 22 个蓝图，而 titlecard-reveal 是其中唯一以「静止」为核心卖点的一个：

The calm breather/landing beat — one clean title or single brand/proof card revealed with exactly one restrained move, then a still hold. Low motion is the payload, not a deficiency.

低动效是载荷本身，而不是缺陷。这段镜头通常出现在视频中需要「喘口气」的位置：价值标题卡、品牌背书卡、片尾落版或产品开场的暗色前奏。它的典型时长与适用角色如下：

维度	取值
总时长	3–5s（Benefits 3–4s；Social_Proof ~5s，观测值 4.7s）
卡链（card chain）时长	每卡 2–3s，整体约 5.5–9.5s
服务角色	Benefits、Social_Proof、CTA、Product_Intro
来源变体	benefits-titlecard-crossfade（#34）、social-proof-reveal-card（#35）、hard-cut-card-stack-to-logo、title-card-prelude-chain

从 blueprints 索引的角色菜单 可以看到它的四个触发场景：Benefits 需要一个冷静的双行价值标题卡；Social_Proof 需要把忙碌的开场擦除成干净的品牌 lockup 加「Loved by N+ teams」统计；CTA 需要一张由硬切拼接的单色片尾卡链；Product_Intro 需要在任何产品 UI 出现前做一段三拍暗色前奏。

二、三段式镜头结构（Shot Structure）

蓝图的骨架是固定的三个场景，整段镜头的「一卡一动作一保持」契约由此展开：

Scene 1（0.0–~0.4s）：静态机位对准 [中性 / 深色背景]，建立开场状态。
  Variant — Benefits：空场到文字 — [benefit line 1] 即将居中淡入（没有繁忙的开场）。
  Variant — Social_Proof：繁忙的开场帧短暂保持 — 重叠卡片组成的 [应用截图 / 用例拼贴] 位于 [setup line] 之下。

Scene 2（~0.4–~1.5s）：执行「那一个动作」—— 唯一一次克制的揭示，把平静的卡片带到画面中央。
  Variant — Benefits：[benefit line 1] 居中淡入并轻微缩放（~95%→100%，平滑 ease-out），然后保持。
  Variant — Social_Proof：一个巨大的 [强调色] 圆角药丸从左下 → 右上斜向扫过并退出角落，
    clip-path 把拼贴擦除，露出下方的 [品牌 logo lockup]；同时 [logo 图标] 的描边开始绘制。

Scene 3（~1.5s–结束）：揭示/落定的卡片保持到结尾（被分配的那段静止）。
  至多一个微小的活元素（卡片上缓慢的呼吸脉冲，或非常缓慢的机位漂移）。没有第二个发展阶段。
  Variant — Benefits：[benefit line 1] 上移淡出，[benefit line 2 — 限定/阐述行] 从中心下方
    上移淡入并占据中心；保持。（这次单一的上滑交叉淡变就是「那一个动作」——Benefits 在 Scene 2 不做擦拭。）
  Variant — Social_Proof：lockup —— [logo 图标] 居中、[wordmark] 在其下、居中的 [social-proof 标语]
    "Loved by [N]+ [audience] teams"（[N]+ 可以计数增长）—— 弹簧小幅度落定，然后保持。

卡链变体（CTA 片尾卡栈 / Product_Intro 标题前奏）

单卡契约在卡链中以序列方式重复 2–3 次：每张卡都是一个微缩的完整 Scene 1–3（到达——或直接「就在那里」，至多一个克制动作，保持），卡与卡之间的接缝是全不透明度下的瞬时硬切（无交叉淡变、无穿黑淡出），或者在前奏风味中使用「模糊散开 → 聚焦吸入」的交接。

卡片的动作保持在预算内，蓝图给出的候选动作包括：

• 逐字符打字输入，且可见中间部分状态（character-by-character type-on with visible partial states）；
• 从右到左的退格，把 [wordmark] 收缩解析为小号 [logo 图标]；
• 灰色 → 明亮的追加（"[name]" 获得 "[version]"）；
• 模糊吸入聚焦（blur-snap into focus）；
• 或者什么都不做，只在保持期间做一个几乎不可感知的持续缓慢放大。

最后一张卡永远是 [品牌 logo / lockup]，静态保持到最后一帧。

三、四种来源变体的编排要点

3.1 Benefits：双行价值标题卡（benefits-titlecard-crossfade）

来自 benefits-titlecard-crossfade（#34）：一行凝练的主价值标题先行居中淡入，随后唯一一次上滑交叉淡变交接给第二行限定/阐述行并保持居中。关键约束是它不设 Scene 2 的擦拭动作——这个上滑交叉淡变本身就算作「那一个动作」，全卡只有一次换行。节奏预算上，整段 3–4s：开场 0.4s 空场，主行 0.7s 左右入场，第二行在 ~2.0s 后交接，剩余时间全部是保持。

3.2 Social_Proof：对角药丸擦拭揭示（social-proof-reveal-card）

来自 social-proof-reveal-card（#35）：开场先让一个繁忙的应用拼贴（重叠卡片 + setup line）短暂存在，然后一个大型强调色圆角药丸从左下到右上斜向扫过画面并退出角落，clip-path 把拼贴整体擦除，露出下方的品牌 lockup——logo 图标的描边逐段绘制（见 svg-path-draw）、wordmark 位于图标之下、居中的背书标语 "Loved by [N]+ [audience] teams" 中 N 可以计数增长，整体以弹簧小幅度落定并保持。观测总时长约 4.7–5s，是四种变体中最「热闹」的一个，但也仍然只有一次擦拭 + 一次落定。

3.3 CTA：单色片尾卡链（hard-cut-card-stack-to-logo）

来自 hard-cut-card-stack-to-logo：一条单色片尾 CHAIN——陈述句 → CTA/可用性行 → 品牌 wordmark/logo——以全不透明度的瞬时硬切分隔。每张卡都拥有属于自己的「被分配的静止」，序列终止于 logo 保持到最后一帧。这里的关键机制是：硬切不是一条规则，而是一个时间线上的 tl.set 交换——刻意没有任何过渡条目（见下文 5.13）。

3.4 Product_Intro：三拍暗色标题前奏（title-card-prelude-chain）

来自 title-card-prelude-chain：在任何产品 UI 之前的三拍暗色前奏——[logo] 弹出（带过冲与辉光）→ [name] 出现，[version] 以灰色→明亮方式追加 → [tagline] 卡。卡与卡之间由清除与模糊-聚焦交接（blur-snap handoffs）串联，而不是硬切。开场 logo 的弹出 + 辉光组合由 spring-pop-entrance 与 ambient-glow-bloom 共同支撑。

四、运动词汇（Motion Vocabulary）

整段蓝图只使用一套受限的动作语汇，全部处于「冷静」档位：

• 单次克制的揭示：柔和淡入 + 轻微缩放落定（Benefits）；对角 clip-path 药丸擦拭（Social_Proof）；
• 两行居中文字之间的一次上滑交叉淡变（Benefits）；
• 图标描边绘制（Social_Proof）；可选的 "[N]+ teams" 计数增长；
• logo + 标语的弹簧落定并保持；保持期间卡片的细微呼吸；
• 保持至结束（hold-to-end）。冷静语域——没有弹簧链、没有翻滚、没有逐拍翻转、没有第二阶段。机位静态（仅可选的极缓慢漂移）。

卡链语域（chain register）则是另一组受限词：全不透明度下的瞬时硬切作为唯一接缝、每个保持上的几乎不可感知的持续缓慢放大、带可见中间状态的逐字符打字、把 wordmark 收缩进 logo 图标的从右到左退格、灰色→明亮的文字追加、模糊散开→聚焦吸入的卡片交接、带过冲与辉光的 logo 弹出（前奏开场）、全程单色文字配实底。

五、规则映射：把蓝图拆解为原子配方

蓝图最实用的部分是它的 rule mapping——每一个节拍都映射到技能库中一条可复制的原子规则。这张映射表完整继承如下：

蓝图节拍	映射规则（仓库路径）	要点
柔和淡入 + 轻微缩放落定（Benefits Scene 2）	scale-swap-transition，淡入缓动交叉参考 techniques.md	克制的入场/落定
两行居中文字之间的上滑交叉淡变（Benefits Scene 3）	discrete-text-sequence	一行交接给下一行；上移 + 交叉淡变
对角药丸擦拭揭示（Social_Proof Scene 2）	techniques.md（clip-path reveal masks）	擦拭
图标描边绘制（Social_Proof Scene 2）	svg-path-draw	stroke-dasharray/dashoffset
"[N]+ teams" 计数增长（Social_Proof Scene 3，可选）	counting-dynamic-scale	数字与缩放同步
logo + 标语弹簧落定保持（Social_Proof Scene 3）	spring-pop-entrance	单次柔和落定；刻意一拍而非链条
保持期间卡片上的细微呼吸（唯一的活元素）	sine-wave-loop	有界正弦空闲
打字 / 退格 / 灰色→明亮追加（链卡）	discrete-text-sequence	非线性打字含退格；版本追加按批量驱动
wordmark 余量解析进 logo 图标	scale-swap-transition	末字符删除时触发同中心交换
保持期间几乎不可感知的缓慢放大	multi-phase-camera（micro-drift 档位）	逐卡应用
模糊散开→聚焦吸入交接（前奏风味）	depth-of-field-blur	对出/入卡片各一次单拉
logo 过冲 + 辉光弹出（前奏卡 1）	spring-pop-entrance + ambient-glow-bloom	弹出 + 辉光
全不透明度瞬时硬切	不是规则：时间线 tl.set 交换——刻意没有过渡条目	接缝，不是动作

5.1 柔和淡入 + 缩放落定（scale-swap-transition / spring-pop-entrance）

Benefits 主行入场是「克制揭示」的教科书形态。来自 spring-pop-entrance 的关键纪律是：默认用平滑长尾的 power3.out，无过冲；back.out 是「agent 生成视频的头号劝退因素」，只在明确俏皮语域使用且 OVERSHOOT ≤ ~2。落地参数：POP_DUR 0.4–0.7s，ENTRY_AT 0–0.4s（保证主体 t ≤ 0.5s 落地）。蓝图允许的 95%→100% 轻微缩放正是「pop」的弱化版——把 scale: 0 → 1 收紧到 0.95 → 1，配合淡入即得「着陆」而非「弹跳」：

tl.fromTo(
  "#line-1",
  { opacity: 0, scale: 0.95 },
  { opacity: 1, scale: 1, duration: 0.7, ease: "power2.out" },
  0.4,
);

5.2 两行之间的上滑交叉淡变（discrete-text-sequence）

Benefits Scene 3 的单次交接本质上是 discrete-text-sequence 的一个特化：一行以 translate-up + 交叉淡变把手交给下一行。完整规则更通用——把打字作者化为稀疏的 { t, text } 状态数组，onUpdate 中反向搜索最近已过期的条目渲染其文本，从而支持错别字、退格、批量粘贴、思考停顿等非线性效果；但蓝图明确要求这里只用一次交接，不要引入逐字符的复杂状态。交接窗口的数值参考：出场 power1.in（淡出不要抢戏），入场 power2.out，各 0.5–0.6s，两行在中心附近交叉。

5.3 对角药丸擦拭（clip-path reveal masks）

Social_Proof 的擦拭是 techniques.md 中第 12 号技术「Clip-Path Reveal Masks」的变体：不是「内容穿过固定窗口」，而是蒙版本身移动——一个巨大的圆角矩形以对角线轨迹从左下扫到右上，clip-path 随之把拼贴裁掉。可直接套用的基础形态：

<style>
  #reveal-mask {
    position: absolute;
    inset: 0;
    clip-path: inset(0 200px 0 0); /* 从右侧裁掉 200px */
  }
</style>
<script>
  tl.to("#reveal-mask", { clipPath: "inset(0 0px 0 0)", duration: 1, ease: "power2.inOut" }, 0.6);
</script>

对药丸擦拭，把 inset(...) 换成圆角矩形沿对角线的 clip-path 关键帧，或直接让一个实心圆角 <div> 斜向穿过画面（药丸本体就充当蒙版），即可复刻「sweep away to reveal」的手感。注意 clipPath 不在禁用清单上（determinism-rules 采用黑名单而非白名单），可以安全地逐帧 seek。

5.4 图标描边绘制（svg-path-draw）

lockup 的 logo 图标在擦拭揭示的同一窗口内「画」出来。来自 svg-path-draw 的核心机制：stroke-dasharray = <pathLength> + stroke-dashoffset 从路径长度补间到 0，长度用 path.getTotalLength() 实测而非猜测。多段路径按「前一段 70–80% 时长处」错开，让眼睛读作连续运笔。数值参考：SEGMENT_DRAW_DUR 0.3–0.8s，描边用 power2.out（笔在收笔处抬起）或 none，绝不用 back.out/elastic.out（笔不会弹跳）；wordmark 在最后一笔落定后再淡入（BRAND_FADE_START ≥ 末笔结束 + ~0.2s），避免与绘制抢注意力。

5.5 "Loved by N+ teams" 计数增长（counting-dynamic-scale）

背书标语的 [N]+ 计数由 counting-dynamic-scale 支撑：数字从 A 数到 B，同时 transform 的 scale 同步增长——最终字号是静态 CSS，只有 transform 逐帧变化。两条 tween 在同一时间位置、同一缓动：

const counter = document.getElementById("counter");
const state = { value: 0 };

// 数值——onUpdate 只改文本
tl.to(
  state,
  { value: TARGET_VALUE, duration: COUNT_DUR, ease: "power3.out",
    onUpdate: () => { counter.textContent = Math.round(state.value).toLocaleString(); } },
  0,
);
// 视觉增长——与计数共享时间与缓动
tl.fromTo(counter, { scale: START_SCALE }, { scale: 1, duration: COUNT_DUR, ease: "power3.out" }, 0);
// 后缀 "+" 在计数结束后才滑入
tl.to(".counter-suffix", { opacity: 1, y: 0, duration: 0.4, ease: "back.out(1.6)" }, COUNT_DUR);

硬性约束：font-variant-numeric: tabular-nums + 定宽容器（数字位数变化 9→10→100 时防抖动）；onUpdate 用 Math.round 而非 Math.floor；计数缓动避免 back.out（数字是数据，不是装饰，过冲会让数字显得不稳）。数值参考：COUNT_DUR 1.2–2.5s（低于 ~0.8s 会读作一闪而过），COUNT_EASE 用 power3.out 或 expo.out 制造峰值减速。

5.6 弹簧落定与保持（spring-pop-entrance + sine-wave-loop）

lockup 与标语整体落定后进入 Scene 3 的静止段。落定默认 power3.out（无过冲），保持期间至多一个活元素：卡片的细微呼吸。来自 sine-wave-loop 的纪律值得全文引用——呼吸是最后手段：先填充分镜的背面（按 VO 提示顺序揭示），若画面真正落定仍需要生命感，被认可的动作是低幅度抖动；全幅呼吸循环只在单个保持的英雄元素上是罕见例外。参数默认值：SCALE_AMP 0.008–0.015、Y_AMP_PX 2–3px、周期 1.5–3s，且必须用 ease: "none" 的相位 tween 驱动（Math.sin 本身即曲线），绝不用 CSS @keyframes（CSS 动画跑在浏览器渲染时钟上，与 HyperFrames 的 seek 时钟不同步，会闪烁/失同步）。空闲起始点 IDLE_START_TIME ≥ 入场落定 + ~0.1s，且 sin(0)=0 保证与入场尾部无跳变衔接。

5.7 链卡的打字 / 退格 / 追加（discrete-text-sequence 变体）

链卡动作预算内的逐字符打字、右到左退格、灰色→明亮追加，全部走 discrete-text-sequence 的离散状态数组形态：[logo] 版本追加视为一次批量替换（bulk addition），wordmark 收缩进 logo 图标由 scale-swap-transition 在末字符删除瞬间触发同中心交换（OVERLAP 0.1–0.2s、出场 power2.in、入场 back.out、两元素共享 transform-origin: 50% 50%）。关键约束：离散跳变必须瞬时（任何过渡都会把跳变糊成拖影，杀死「打字」感）；退格场景中「保持文本换行不换行」（white-space: nowrap）且文本容器要设 min-width 防右缘抖动。

5.8 模糊-聚焦交接与微漂移（depth-of-field-blur + multi-phase-camera）

Product_Intro 前奏的 blur-snap handoff 由 depth-of-field-blur 支撑：对出/入卡片各做一次单拉（FOCUS_DUR 0.5–1.2s，MAX_BLUR 8 柔和 / 16 默认 / 24 重档，DIM_LEVEL 0.4–0.7），把眼睛从散焦层拽到锐利层。机制上用 --dof CSS 变量承载模糊、filter: blur(var(--dof)) 读取，tween 在时间线上推进 --dof，确保模糊处于 HyperFrames 的 seek 时钟上。交接给下一张卡前务必锐化落定（把 --dof 归 0），否则下一拍读作「渲染故障」。

可选机位微漂移由 multi-phase-camera 的 micro-drift 档位提供：一整段保持期间在相位缩放上叠加正弦 translate，幅度 DRIFT_AMP_X/Y 2–8px / 1–4px（单帧不可感知、跨时间可见），X/Y 频率比 ~1.3 形成有机的李萨如轨迹。但蓝图默认完全静态——只有当保持段会读作冻帧时才加。

5.9 硬切是 tl.set，不是过渡

卡链的接缝是「全不透明度下的瞬时硬切」，蓝图明确标注：这不是一条规则，而是时间线上的 tl.set 交换——刻意不写任何过渡条目。落点与 determinism-rules 一致：不要在 clip 元素上补间 display 或裸 visibility（框架拥有 clip 的可见性，lint 会拒绝）；要用 autoAlpha 或显式边界的零时长 tl.set。硬切本身因此是确定性操作的：在 t = 上一卡结束 处一次性把下一卡置于全不透明度，视觉上就是干净的切。

六、可运行示例：把 Benefits 变体落地为一段 HyperFrames 合成

把上述编排与 HyperFrames 核心契约（hyperframes-core 技能入口、minimal-composition 骨架、data-attributes 参考）结合，Benefits 变体可以写成一段完整可渲染的 4 秒合成——根节点声明 data-composition-id / data-width / data-height / data-duration，且只有一条暂停的 GSAP 时间线注册在 window.__timelines["main"]：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1920, height=1080" />
    <title>Benefits Title Card — titlecard-reveal</title>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
    <style>
      body { margin: 0; background: #0b0f14; color: #fff; }
      #root {
        position: relative;
        width: 1920px; height: 1080px;
        overflow: hidden;
        background: #0b0f14;
      }
      .clip {
        position: absolute; inset: 0;
        display: grid; place-items: center;
      }
      .benefit-line { position: absolute; font-size: 88px; font-weight: 700; }
      #line-1 { color: #ffffff; }
      #line-2 { color: rgba(255, 255, 255, 0.78); }
    </style>
  </head>
  <body>
    <div id="root"
         data-composition-id="main"
         data-width="1920" data-height="1080"
         data-duration="4">
      <section id="title-card" class="clip" data-start="0" data-duration="4">
        <h1 id="line-1" class="benefit-line">Ship videos from plain HTML</h1>
        <h2 id="line-2" class="benefit-line">Deterministic, seek-safe, built for agents</h2>
      </section>
    </div>
    <script>
      const tl = gsap.timeline({ paused: true });

      // Scene 2 — 那一个动作：柔和淡入 + 轻微缩放落定（~95%→100%）
      tl.fromTo(
        "#line-1",
        { opacity: 0, scale: 0.95 },
        { opacity: 1, scale: 1, duration: 0.7, ease: "power2.out" },
        0.4,
      );

      // Scene 3 — 唯一一次上滑交叉淡变，交接后保持
      tl.to("#line-1", { y: -48, opacity: 0, duration: 0.5, ease: "power1.in" }, 2.0);
      tl.fromTo(
        "#line-2",
        { y: 64, opacity: 0 },
        { y: 0, opacity: 1, duration: 0.6, ease: "power2.out" },
        2.1,
      );

      window.__timelines["main"] = tl;
    </script>
  </body>
</html>

这段合成的动作预算核对：0–0.4s 空场（Scene 1）、0.4–1.1s 一次入场（Scene 2）、2.0–2.7s 一次交接、2.7–4.0s 纯保持（Scene 3）——恰好「一次入场 + 一次交接 + 保持到结尾」，没有任何第二阶段。两行的最终文字状态由静态 HTML/CSS 建立（布局契约要求先搭好可见终态再动画），tween 只负责到达终态。

对卡链形态，仓库中的 proof-logo-chain.html 示例 是一个可运行的地面真值参考：它以「品牌揭示链」的方式用 GSAP 编排了多段子镜头（品牌揭示 → 文字交换滚动 → 计数 + 能力云 → 能力条），全程 data-duration 控制、seek-safe，可以作为理解「多卡序列如何被单条暂停时间线串起来」的对照实现。

七、机位修饰器与静止注释（Camera Modifier & Stillness Note）

• 机位修饰器：可选——仅在保持段下做单次极缓慢漂移/推近，见 multi-phase-camera。默认完全静态；除非保持段会读作冻帧，否则不要加。
• 静止注释：这是合法的「被分配的静止节拍」。Scene 3 的保持就是交付物本身，而不是未动画的缺口——不要制造发展阶段、额外的交换或强行动画。一个克制动作 + 一个微妙的保持（可选一个呼吸元素或一次缓慢漂移）就是正确且完整的形态。卡链变体不破坏这一契约：每张卡各自遵守「一动作 + 保持」，硬切是接缝而不是动作。
• 边界：如果卡片以亚秒级节奏翻转，或每一拍都自带进出能量，你就离开了这个蓝图——那是 kinetic-type-beats 的地盘（其 CTA 变体拥有高节奏价值行栈）。

八、验证与交付

落定后按 hyperframes-core 技能入口 的验证流程走一遍：npx hyperframes check（0 findings，覆盖 lint / runtime / layout / motion / contrast）；对含子合成的项目用 npx hyperframes snapshot --at <midpoints> 逐帧目检——对这张卡重点看末帧是否保持静止（若有呼吸/漂移，检查幅度是否在 sine-wave-loop 的低端档位）；npx hyperframes preview --background 供评审；用户批准后才 npx hyperframes render。想用 animation-map 脚本 审计编排（死区、stagger 一致性、生命周期告警）时，可以对本段合成运行：

node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> \
  --out <composition-dir>/.hyperframes/anim-map

九、小结

titlecard-reveal 是 HyperFrames 蓝图库中「克制美学」的代表：它把「静止」制度化——恰好一个动作入场、一次（或不做）交接、保持到结尾，任何多余的开发阶段或亚秒级翻转都会被逐出边界。落地它不需要复杂的机器，只需遵守三条纪律：Scene 1–3 的时间骨架、动作预算内的单一揭示、以及 HyperFrames 核心契约（单条暂停时间线、data-duration 决定长度、无渲染时时钟、无 repeat: -1）。把本文第五节映射表中的规则逐条取用，即可在 Benefits、Social_Proof、CTA 与 Product_Intro 四种角色下稳定复现这个「冷静着陆」节拍。