hyperframes 字幕运动词汇表：10 种命名入场动画与 语气→时序 对照体系

hyperframes 字幕运动词汇表：10 种命名入场动画与 语气→时序 对照体系

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes

在 hyperframes 的 embedded-captions 技能中，为说话人视频添加字幕（rail + embed 双层模型）时，运动设计（motion）是决定观感档次的头号变量：同一句话用「打字机逐字浮现」还是「整句滑入」，读起来是完全不同的两种语气。本指南以 skills/embedded-captions/references/motion-vocabulary.md 为骨架，完整展开该技能内置的 10 种命名运动原语（motion primitives）、语气到时序的查表体系、逐词 vs 逐短语的动画轴，以及必须遵守的确定性渲染红线；并结合技能内源码（_motion.md、_anatomy.md、dna/README.md、check-timing.cjs）给出底层实现依据。读完你将能：按内容语气而不是个人偏好为每条字幕挑选入场动画，用一张表直接换算 stagger / hold / 入场运动，并在不破坏确定性渲染的前提下自创新的运动。

---

1. 核心设计哲学：运动由内容语气决定，而非默认值

motion-vocabulary.md 的开篇即给出技能的运动观：

Agent picks bycontent tone, not default to one.

即：先判定内容的语气（documentary / conversational / energetic / poetic / broadcast / investigative / keynote），再从 10 个命名运动中选匹配的入场。这不是"挑个好看的动效"，而是像调色师选影调一样，把运动当作叙事的语法层。

三条贯穿全文的规则：

• 缓动哲学（Easing philosophy）：cubic-bezier(.2,.7,.2,1)是"深思熟虑的自信（considered confident）"默认曲线；linear几乎总是错的；back-easing（弹性）只用于 playful 内容，纪录片永远禁用。
• 出场规则（Exit rules）：默认出场 = 同一 tween 反向、且时长为入场 60%；除非做修辞转折（rhetorical pivot），否则出场运动不得与入场不同；绝不在说话过程中淡出，只允许在短语间隙淡出。
• 运动在 hyperframes 中不是自由发挥：技能强制确定性渲染，这在源码层面被多处固化（见第 7 节）。

这套"缓动即语气"的思想在技能其余文档中有一致的呼应。例如 skills/embedded-captions/modes/standard/_motion.md 的缓动调色板表同样只允许一组有名字的曲线：back.out(1.4–1.7)（自信抵达）、power3.out（重/精修）、power2.out（通用）、power2.in（出场加速）、expo.out（干脆利落）、sine.inOut（呼吸）、steps(n)（数字抖动）；并明文禁止除 Playful 簇以外的bounce.out/elastic.out。而 skills/embedded-captions/dna/README.md 则把这些规则提升为 DNA 层级的"物理签名"：exits faster than entrances（出场比入场快）、ease 族在不同 DNA 之间变化而非在单个 DNA 内部混用、.out用于入场、.in用于出场。

---

2. 十种命名运动原语（The 10 moves）逐一拆解

每个运动都有明确的时序 + 缓动 + 场景适配三元组。下面按原文档顺序完整列出，并补充实现细节与适用/禁用场景。

2.1 typewriter（打字机）— 数据 / 悬疑类

• 逐字符揭示（char-by-char reveal），25–35ms/字符，linear 缓动。
• 适用：documentary（纪录片）、data-heavy（数据密集）、tense（紧张）、interrogative（审问式）。
• 实现：words.forEach把每个词的文本拆成span，按wordStart + j * 0.028（28ms/字符）依次把opacity置 1，首个字符在词起始时间出现：

// GSAP words.forEach((w, i) => { const chars = w.textContent.split(""); w.textContent = ""; chars.forEach((c, j) => { const span = document.createElement("span"); span.textContent = c; span.style.opacity = 0; w.appendChild(span); tl.to(span, { opacity: 1, duration: 0 }, wordStart + j * 0.028); }); });

注意：这里duration: 0的 set-like tween 把字符"钉"在时间轴上，是 seek-safe 的确定性写法，与 skills/embedded-captions/modes/standard/_anatomy.md 中"one paused GSAP timeline、所有状态可通过 seek 到时间 t 到达"的引擎契约一致。

侦探/调查类语气的查表行（investigative）正是25ms/字符的 stagger，与本原语完全对应。方向目录中的 investigative-typewriter 方向 也给出同款参数（25ms/char + 光标闪烁），可见该运动是"悬疑调查"语气的标准答案。

2.2 word-fade-up（上浮淡入）—默认值

• 逐词（per-word），80ms stagger，opacity 0→1 + translateY 8→0，cubic-bezier(.2,.7,.2,1)（ease-out）。
• 适用：conversational（对话式内容）——默认入场。
• 实现：

tl.fromTo( word, { opacity: 0, y: 8 }, { opacity: 1, y: 0, duration: 0.45, ease: "power2.out" }, wordStart, );

细节对照：文档用cubic-bezier(.2,.7,.2,1)描述缓动，代码中写成等价 GSAP 的power2.out。这与 skills/embedded-captions/modes/standard/_motion.md 的fade-up流入场（fromTo(w,{opacity:0,y:14},{opacity:1,y:0,duration:.42,ease:'power3.out'})）以及 typographic-moves 中softtone（0.45s power2.out 的 opacity+y 漂移）同族——它们都是"对话式内容"的最小可信运动。任何 80ms 级 stagger + 上浮淡入的实现，都应保持这个数值族。

2.3 word-pop（弹出）— 高能但纪录片禁用

• 逐词，60ms stagger，scale 0.85→1 + opacity 0→1，弹性轻缓动cubic-bezier(.34,1.56,.64,1)（back/elastic 族）。
• 适用：energetic（活力）、YouTube vlog、高节奏（high-tempo）。
• Never for documentary——弹性意味着"玩闹"，与纪录片的庄重相冲突。
• 在 energetic 查表行中，stagger 正是50ms、入场为 word-pop。
• 对应 _motion.md 的pop（scale:.5→1、back.out(1.6)、0.34s），以及 dna/README.md 中 loud DNA 的"打击乐（percussion）"签名——back-eased punches。这印证了弹性运动在该技能中只属于 loud / hype / playful 类内容。

2.4 swipe-reveal（扫入揭示）— 演讲 / 发布

• 整句一次（whole phrase at once），400ms，clip-path inset 0 100% 0 0 → 0 0 0 0，expo 缓动cubic-bezier(.77,0,.175,1)。
• 适用：keynote（主题演讲）、tech product（科技产品）、announcement（发布公告）。
• 基础 CSS 形态：

.cap { clip-path: inset(0 100% 0 0); } /* animate to inset(0 0 0 0) */

关键点：clip-path 动画是_motion.md明文允许的属性（与 opacity/transform/textShadow 等并列），且 direction-catalog 中 tech-keynote-confident 方向 正是"swipe-reveal from bottom via clip-path (400ms)；exit fades 400ms"。keynote 查表行的入场正是 swipe-reveal，stagger 为0（按短语）。

2.5 drop-and-settle（下落落定）— 克制地玩

• 逐词，120ms stagger，y: -30→0，back-bounce 缓动cubic-bezier(.68,-.55,.27,1.55)（带负值区间，即先反向越程）。
• 适用：playful but controlled（玩闹但克制）。
• Not for documentary（同 word-pop，back 缓动不进纪录片）。
• 它在"语气→时序"表中没有固定行，属于按场景细调（stagger breakdown 中 vlog opener 50ms 等更快的档位是它近亲）。

2.6 etch（蚀刻浮现）— 诗意 / 引言

• 整词同时（whole word at once），600ms，opacity 从 0→1 伴随轻微 blur→sharp 过渡，ease-in-out。
• 适用：poetic（诗意）、lyrical（抒情）、"quote on wall"（墙上的引言）方向。
• 对应 poetic 查表行：stagger250ms、hold1200ms、入场 etch——这是所有语气中最慢、留白最长的一档，适合让观众逐字品味。
• 呼应 skills/embedded-captions/references/typographic-moves.md 中的 Poem arc（italic opener → italic continuation → upright pivot → uppercase climax）以及 direction-catalog 的 lyrical-poem-on-wall 方向（etch in 600ms, hold 1.5–3s）。

2.7 crosshair（十字准星锁定）— 惊悚 / 调查纪录片

• 逐词，200ms 总时长：两条 1px 线以 linear 150ms 汇聚到词中心，然后词以 expo-out 50ms 弹入。
• 适用：thriller（惊悚）、investigative doc（调查纪录片）。
• 这是一个"双阶段"运动：准星收敛（确定性驱动的定位）→ 词落位。注意其总时长只有 200ms，属于较快的节奏，但因为"锁定"语义清晰，不会显得慌乱——这与反模式中"入场低于 100ms 会显得狂乱"的阈值形成对照。

2.8 breathing-hold（呼吸驻留）— 高潮台词

• 静但活（static but alive）：无入场动画。一旦可见，进行 2s 的微缩放循环1.00↔1.008，sine 缓动。
• 适用：climax lines 且held 1.5s+（驻留超过 1.5 秒的高潮句）。
• 与 _motion.md 的breathe入场（scale:1.09 blur 8px → scale:1 blur 0、sine.out、1.2s）和 DNA 层hero.breathe/hero.loom（0 = print-still）同族。1.008 的振幅几乎不可察觉，但足以让文字"活着"——这是所有运动里最克制的一档，也最难做好。

2.9 cascade（交替级联）— 节奏破局

• 每个词从交替方向进入：L, R, L, R，translateX: ±40→0，ease-out300ms。
• Rhythm-break move：谨慎使用，每 30 秒最多一次。
• 用途：当长时间单一运动让观众"视觉适应"后，用一次方向交替打破节奏。这个 30s 上限直接呼应反模式清单中的"Same motion for every group for 30s+ → eye adapts, stops registering"（见第 6 节）。
• 对应 direction-catalog 的 k-pop-lyric 方向（cascade entries alternating sides）——音乐视频里的招牌动作。

2.10 burn-in（烧入）— 零动画的庄重

• 零动画（Zero animation）：1 帧内 opacity 直接到 1，无淡入、无变换。
• 适用：interview-doc 风格。纪录片方向下每 6–8 句使用一次以制造变化（Standard 模式；参见 direction-catalog 第 1 节 documentary-dignified：burn-in reveals, no hero —— "gravitas IS the style"，庄重本身就是风格）。
• 在 broadcast 查表行中，stagger 为0（burn-in），hold 用BBC timings。
• 源码印证：documentary DNA 的运动签名正是burn and hold（motion's absence IS the language）（dna/README.md），keynote DNA 的签名同样是 burn words + line wipe。

---

3. 语气 → 时序查表（Tone → timing lookup table）

原文档提供的这张表是技能的核心决策工具：Agent 判定语气 → 查表 → 得到 GSAP 参数。数据，而不是猜测。

语气（Tone）	Stagger	Hold	入场运动（Entry move）
documentary（纪录片）	150ms	600ms	burn-in (70%) + word-fade-up (30%)
conversational（对话）	80ms	400ms	word-fade-up
energetic（活力）	50ms	300ms	word-pop
poetic（诗意）	250ms	1200ms	etch
broadcast（广播）	0 (burn-in)	BBC timings	burn-in
investigative（调查）	25ms/char	500ms	typewriter
keynote（演讲）	0 per-word (phrase swipe)	600ms	swipe-reveal

三个值得注意的交叉验证点：

1. 纪录片不是单一运动：70% 时间 burn-in，30% 用 word-fade-up——即使在同一语气内也保留变化，避免"30 秒同一种运动"的视觉适应反模式。
2. hold 时长与语气权重正相关：poetic 1200ms 是 energetic 300ms 的 4 倍，诗意内容需要观众慢慢读。
3. broadcast / keynote 走整句：stagger 为 0，因为它们的入场是 burn-in / swipe-reveal 这类 group-level 事件，而不是逐词推进。

对照 skills/embedded-captions/SKILL.md 中的 tone 分类（documentary / conversational / energetic / poetic / keynote / investigative / music-video）可以看到：这张表的七行语气正是技能"审美决策三轴"（tone × shot × platform）中 tone 轴在运动层的落地实现。

---

4. 逐词 vs 逐短语动画轴（Per-word vs per-phrase）

这是一个与 10 个运动正交的维度，决定动画单位：

• 逐词动画（Per-word，默认）：每个词在自己的w.start时间戳入场，与语音紧密同步（tight sync with speech）。适合跟随语速的内容（字幕跟嘴型、跟重音）。
• 逐短语动画（Per-phrase）：整组在g.in/g.out一起入场/出场，词同时出现。用于：
  • swipe-reveal 运动；
  • burn-in（虽然没有动画，但"揭示"本身是组事件）；
  • 标题卡 / 章节分隔（title cards / chapter breaks）。

规则：逐词用于跟随语音的内容；逐短语用于跳出语音流程的时刻。

这条轴的工程意义在于：per-word 依赖 transcript 的词级时间戳（由transcribe.cjs驱动的 WhisperX 提供 word-level timings，见 SKILL.md § 依赖），而 per-phrase 只需组级窗口g.in/g.out。check-timing.cjs会强制校验"group window 必须包住其词"（group.in ≤ min(word.start)且group.out ≥ max(word.end)），防止词被容器挂载延迟吞掉。

---

5. 按上下文细调 stagger（Stagger breakdown by context）

在语气内部还可以进一步微调 stagger，原文档给出七个实测语境档位：

语境	Stagger
Documentary dialog（纪录片对白）	150ms（measured，实测）
Documentary punchline（纪录片点睛句）	250ms（weighted，加权加重）
Vlog opener（Vlog 开场钩子）	50ms（fast hook，快钩子）
Vlog narration（Vlog 解说）	70ms（对话但干脆）
Poem / lyric（诗 / 歌词）	250–400ms 每词，短语间留 500–1000ms 空隙
Keynote hero（演讲主视觉）	仅 per-phrase（stagger = N/A）
Interview name card（采访姓名卡）	0（静态）

注意这里的数值与查表表的微妙差异：查表给出的是 tone 级默认（如 conversational 80ms），而这张表是针对具体语境的进一步细化（如 vlog opener 50ms < 对话默认 80ms）。技能的设计意图是：先选语气行，再按语境在 ±范围内微调，而不是两套独立体系。poem 行给出的"短语间 500–1000ms 空隙"与 poetic 查表行的 1200ms hold 相互配合，共同营造诗意留白。

---

6. 反模式清单（Anti-patterns）——从 anti-patterns.md 继承的禁令

motion-vocabulary.md 明确标注这部分来自 skills/embedded-captions/references/anti-patterns.md，是已被锁死的 bug 清单：

• 动画化letter-spacing→ 行内块 reflow，字幕逐行跳动（anti-patterns.md 有专门条目："Some → line 2" bug）。
• 动画化filter: blur→ reflow + 可能洗白文字。技能的态度是：blur 只作为入场"从模糊到清晰"的瞬时过渡使用（如 etch、premium 的 deblur），不做持续动画。
• 时间线中使用Math.random()/Date.now()→ 非确定性渲染（详见第 7 节）。
• 入场总时长低于 100ms→ 狂乱、不可读（crosshair 的 200ms 已接近下限）。
• 同一运动持续 30s+→ 眼睛适应后停止注册（cascade 的"每 30s 最多一次"正是为打破此问题而设）。

此外，SKILL.md 的 Non-negotiables 还补充了运动相关的硬约束：不要动画化letter-spacing或filter: blur做词入场；每条字幕在屏 ≥ 0.5s；词级时间戳与 transcript.json 偏差 ≤ 80ms（check-timing.cjs --strict执行，否则字幕错拍会毁掉场景幻觉）。这些与运动词汇表构成完整的"能做/不能做"闭环。

---

7. 打破词汇表：何时自创运动（以及自创的纪律）

The 10 moves are a comfortable coverage, not a ceiling.

10 个运动是舒适覆盖而非天花板。Standard 模式下，当场景需要时可以发明新运动，原文档给出三个真实参照：

• Kyle Cooper 风格的刮擦打字机（noir 黑色电影）；
• K-pop 歌词的方向性词侧进入（directional word-from-side）；
• 带色差（chromatic aberration）的电影片头闪切烧入（film-title flash-cut burn-in）。

但自创必须遵守四条纪律：

1. 保持确定性（stay deterministic）——这条在 hyperframes 中是不可谈判的硬规则；
2. 只用 transform + opacity（_motion.md 允许额外使用 clipPath/textShadow/filter 等白名单属性，但布局属性 width/top/left/margin 严禁动画）；
3. 用四轴描述运动：entry（入场）、hold（驻留）、exit（出场）、stagger（错峰）；
4. 出场默认沿用入场运动的反向（60% 时长），除非做修辞转折。

这套纪律与 skills/embedded-captions/modes/standard/_anatomy.md 的引擎契约完全一致："Deterministic + seek-safe only — noMath.random(), noDate.now(), no infinite repeats, no un-seekable CSS animations. Every state is reachable by seeking the timeline to a timet."——所有动画挂在一个 paused GSAP 时间线上，以绝对时间定位，因此任何新发明的运动天然可 seek、可复现、可预览（preview-frames.cjs 约 2 秒/帧出合成预览，正是依赖这种确定性）。

---

8. 运动词汇在技能中的完整落地链路

把运动词汇表放回 embedded-captions 技能的整体管线看，它的位置是：

决策门(Decision gate) → 从 CATALOG.md 选 1 个 identity → bash scripts/prepare.sh（matte ∥ transcribe ∥ safe-zones） → 作者编写 plan.json / theme.json（其中包含每个 group 的入场运动选择） → node scripts/fill-timings.cjs → fit-fonts.cjs → make-composition.cjs（编译） → node scripts/preview-frames.cjs（~2s/帧视觉 QA） → bash scripts/render-and-composite.sh（timing / occlusion / overflow 门禁 → final.mp4）

运动选择发生在"作者编写 JSON"这一唯一创作步骤中，而参数化由编译器和引擎完成。从源码结构看，运动词汇表至少在三处被引用或呼应：

1. Standard 模式的_motion.md：保存了完整的命名流入场/出场与高潮入场/出场配方（fade-up、pop、type、glitch、slam、ignite、stomp、jelly……），每个模板只挑选其中 2–3 个命名配方；
2. Cinematic 模式的 DNA 运动语言：dna/README.md 的五层运动模型（word entrance / line exit / hold-life / hero orchestration / timing physics）把运动抽象为每个 DNA 的"物理签名"，并继承 motion-principles 的规则（出场快于入场、ease 族按 DNA 变化、.out进.in出）；
3. 编译期校验：scripts/check-timing.cjs 中的DRIFT_TOL = 0.08（80ms）与垂直 band 重叠检测，保证任何运动方案都不会破坏词级同步与字幕不重叠这两个底线。

换言之：motion-vocabulary 是"选哪个运动"的决策层，_motion.md/ DNA 是"运动长什么样"的实现层，check-timing / render gates 是"运动不被玩坏"的校验层。三者合起来，才构成该技能可复现、确定性的字幕运动体系。

---

9. 实战速查：为一条新字幕选运动

综合全文，给出一个可复制的选择流程（与技能"先语气后运动"的哲学一致）：

1. 判语气：documentary / conversational / energetic / poetic / broadcast / investigative / keynote / music-video（对照 SKILL.md 与 direction-catalog.md 的 tone 轴）；
2. 查表：用第 3 节的"语气→时序"表拿到 stagger / hold / 入场运动的默认三元组；
3. 细调 stagger：按第 5 节的语境表（纪录片对白 vs 点睛句、vlog 开场 vs 解说……）在默认值附近微调；
4. 决定动画轴：跟随语音 → per-word；标题卡 / 整句揭示 / 章节分隔 → per-phrase；
5. 检查红线：非纪录片禁用 back/elastic；出场 = 入场反向 60%；不在说话中淡出；保持 transform + opacity；时间线无随机数；
6. 自创运动（仅当场景需要）：用四轴（entry / hold / exit / stagger）描述，保证确定性，然后在 plan.json 中实现并跑 preview-frames 视觉 QA。

这套流程的核心思想可以用一句话概括：运动是语气的可视化，选择权在内容手里，而不在默认值手里。

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes