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 philosophycubic-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 reveal25–35ms/字符linear 缓动。适用documentary纪录片、data-heavy数据密集、tense紧张、interrogative审问式。实现words.forEach把每个词的文本拆成span按wordStart j * 0.02828ms/字符依次把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-word80ms staggeropacity 0→1 translateY 8→0cubic-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 中softtone0.45s power2.out 的 opacityy 漂移同族——它们都是对话式内容的最小可信运动。任何 80ms 级 stagger 上浮淡入的实现都应保持这个数值族。2.3 word-pop弹出— 高能但纪录片禁用逐词60ms staggerscale 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 的popscale:.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 once400msclip-path inset 0 100% 0 0 → 0 0 0 0expo 缓动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-revealstagger 为0按短语。2.5 drop-and-settle下落落定— 克制地玩逐词120ms staggery: -30→0back-bounce 缓动cubic-bezier(.68,-.55,.27,1.55)带负值区间即先反向越程。适用playful but controlled玩闹但克制。Not for documentary同 word-popback 缓动不进纪录片。它在语气→时序表中没有固定行属于按场景细调stagger breakdown 中 vlog opener 50ms 等更快的档位是它近亲。2.6 etch蚀刻浮现— 诗意 / 引言整词同时whole word at once600msopacity 从 0→1 伴随轻微 blur→sharp 过渡ease-in-out。适用poetic诗意、lyrical抒情、quote on wall墙上的引言方向。对应 poetic 查表行stagger250ms、hold1200ms、入场 etch——这是所有语气中最慢、留白最长的一档适合让观众逐字品味。呼应 skills/embedded-captions/references/typographic-moves.md 中的 Poem arcitalic 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.008sine 缓动。适用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.loom0 print-still同族。1.008 的振幅几乎不可察觉但足以让文字活着——这是所有运动里最克制的一档也最难做好。2.9 cascade交替级联— 节奏破局每个词从交替方向进入L, R, L, RtranslateX: ±40→0ease-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 animation1 帧内 opacity 直接到 1无淡入、无变换。适用interview-doc 风格。纪录片方向下每 6–8 句使用一次以制造变化Standard 模式参见 direction-catalog 第 1 节 documentary-dignifiedburn-in reveals, no hero —— gravitas IS the style庄重本身就是风格。在 broadcast 查表行中stagger 为0burn-inhold 用BBC timings。源码印证documentary DNA 的运动签名正是burn and holdmotions absence IS the languagedna/README.mdkeynote DNA 的签名同样是 burn words line wipe。3. 语气 → 时序查表Tone → timing lookup table原文档提供的这张表是技能的核心决策工具Agent 判定语气 → 查表 → 得到 GSAP 参数。数据而不是猜测。语气ToneStaggerHold入场运动Entry movedocumentary纪录片150ms600msburn-in (70%) word-fade-up (30%)conversational对话80ms400msword-fade-upenergetic活力50ms300msword-poppoetic诗意250ms1200msetchbroadcast广播0 (burn-in)BBC timingsburn-ininvestigative调查25ms/char500mstypewriterkeynote演讲0 per-word (phrase swipe)600msswipe-reveal三个值得注意的交叉验证点纪录片不是单一运动70% 时间 burn-in30% 用 word-fade-up——即使在同一语气内也保留变化避免30 秒同一种运动的视觉适应反模式。hold 时长与语气权重正相关poetic 1200ms 是 energetic 300ms 的 4 倍诗意内容需要观众慢慢读。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. 按上下文细调 staggerStagger breakdown by context在语气内部还可以进一步微调 stagger原文档给出七个实测语境档位语境StaggerDocumentary dialog纪录片对白150msmeasured实测Documentary punchline纪录片点睛句250msweighted加权加重Vlog openerVlog 开场钩子50msfast hook快钩子Vlog narrationVlog 解说70ms对话但干脆Poem / lyric诗 / 歌词250–400ms 每词短语间留 500–1000ms 空隙Keynote hero演讲主视觉仅 per-phrasestagger N/AInterview 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 偏差 ≤ 80mscheck-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。但自创必须遵守四条纪律保持确定性stay deterministic——这条在 hyperframes 中是不可谈判的硬规则只用 transform opacity_motion.md 允许额外使用 clipPath/textShadow/filter 等白名单属性但布局属性 width/top/left/margin 严禁动画用四轴描述运动entry入场、hold驻留、exit出场、stagger错峰出场默认沿用入场运动的反向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.shmatte ∥ 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.shtiming / occlusion / overflow 门禁 → final.mp4运动选择发生在作者编写 JSON这一唯一创作步骤中而参数化由编译器和引擎完成。从源码结构看运动词汇表至少在三处被引用或呼应Standard 模式的_motion.md保存了完整的命名流入场/出场与高潮入场/出场配方fade-up、pop、type、glitch、slam、ignite、stomp、jelly……每个模板只挑选其中 2–3 个命名配方Cinematic 模式的 DNA 运动语言dna/README.md 的五层运动模型word entrance / line exit / hold-life / hero orchestration / timing physics把运动抽象为每个 DNA 的物理签名并继承 motion-principles 的规则出场快于入场、ease 族按 DNA 变化、.out进.in出编译期校验scripts/check-timing.cjs 中的DRIFT_TOL 0.0880ms与垂直 band 重叠检测保证任何运动方案都不会破坏词级同步与字幕不重叠这两个底线。换言之motion-vocabulary 是选哪个运动的决策层_motion.md/ DNA 是运动长什么样的实现层check-timing / render gates 是运动不被玩坏的校验层。三者合起来才构成该技能可复现、确定性的字幕运动体系。9. 实战速查为一条新字幕选运动综合全文给出一个可复制的选择流程与技能先语气后运动的哲学一致判语气documentary / conversational / energetic / poetic / broadcast / investigative / keynote / music-video对照 SKILL.md 与 direction-catalog.md 的 tone 轴查表用第 3 节的语气→时序表拿到 stagger / hold / 入场运动的默认三元组细调 stagger按第 5 节的语境表纪录片对白 vs 点睛句、vlog 开场 vs 解说……在默认值附近微调决定动画轴跟随语音 → per-word标题卡 / 整句揭示 / 章节分隔 → per-phrase检查红线非纪录片禁用 back/elastic出场 入场反向 60%不在说话中淡出保持 transform opacity时间线无随机数自创运动仅当场景需要用四轴entry / hold / exit / stagger描述保证确定性然后在 plan.json 中实现并跑 preview-frames 视觉 QA。这套流程的核心思想可以用一句话概括运动是语气的可视化选择权在内容手里而不在默认值手里。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考