HyperFrames 字幕模板引擎解剖单条暂停 GSAP 时间轴驱动的逐词字幕与高潮词嵌入【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文深入 HyperFrames 开源仓库中 embedded-captions 技能的 Standard 模式核心规范 skills/embedded-captions/modes/standard/_anatomy.md完整拆解嵌入式字幕模板caption template这一共享、可复现的场景引擎——它由始终在画面中的人 逐词浮现并消失的前景字幕flow caption 一个位于说话人身后的大号高潮词climax word 统一的字体/色彩/动效设计四部分构成。读完本文你将掌握如何用两条 CLI 命令完成素材准备、如何搭建六层蒙版三明治matte sandwich、如何用一条暂停的 GSAP 时间轴实现可 seek 的确定性动画以及 SCENE_DUR、CLIMAX_AT、CLIMAX_HOLD、FOUT 等关键参数的取值方法从而在 HyperFrames 中复刻广播级字幕场景。一、什么是字幕模板一个共享场景引擎在 skills/embedded-captions/SKILL.md 的字幕模型中一段口播内容的每个短语只有三种归宿drop填充词不显示、rail默认的逐词下方字幕在前景承载大部分文本、embed被提升的高潮词合成到说话人身后。Standard 模式同时使用 rail 与 embed而 _anatomy.md 描述的正是 embed 高潮词这一层所依赖的共享场景引擎人始终在画面中流动的前景字幕逐词、逐字浮现且消失高潮词大号、位于说话人身后、有设计过的入场与退场 一套连贯的字体/色彩/动效设计。该引擎的设计哲学是读一次处处复用按原文档设计templates/目录下的每个模板文件都是同一个引擎只是替换三样东西样式令牌style tokens——字体--ff、填充色--cfill、强调色--cacc、可选的渐变/描边命名的高潮词入场 退场——即 _motion.md 中的FLOW_IN/FLOW_OUT/CLIMAX_IN/CLIMAX_OUT四个命名配方文案与场景/人物——逐词行 高潮词 背景。因此每个模板文件都极短。需要说明的是按 SKILL.md 的声明原 54 个模板库已归档在本仓库之外、不再随技能分发本仓库内保留的是作为引擎规范核心的_anatomy.md本文主体与作为动作语汇目录的_motion.md以及modes/standard/fonts/下的字体资源。该引擎是HyperFrames 原生的任何人可据此复现每个合成一条暂停的 GSAP 时间轴注册到window.__timelines[data-composition-id]所有计时使用秒data-start/data-duration承载场景窗口只保证确定性与可 seek——无Math.random()、无Date.now()、无无限循环、无可 seek 的 CSS 动画每个状态都能通过把时间轴 seek 到时刻t到达只使用 GSAP 变换别名x、y、scale、rotation只动画opacity、filter、clipPath、textShadow、backgroundPosition、letterSpacing绝不触碰布局属性width/top/left/margin。data-composition-id并非随意的命名在 packages/core/src/compiler/compositionAssembly.ts 中定义了const COMPOSITION_ID_ATTR data-composition-id编译器通过querySelector([data-composition-idX])解析合成根节点并在 compositionScoping.test.ts 一类测试中验证作用域动画运行时则用该 ID 在window.__timelines上按 key 查找时间轴。这正是一条暂停时间轴、注册到组合 ID这一约束在 HyperFrames 引擎侧的契约支撑。二、素材准备两条 CLI 命令Standard 模板的输入只需要两次命令调用# 1) 人物——透明说话人抠像VP9 alpha叠加到场景上 bash scripts/prepare.sh project # matte ∥ transcribe ∥ safe-zones本技能自身不是 remove-background # 静态图也可以 remove-background portrait.jpg -o person.png # 2) 驱动流动字幕的逐词时间戳 npx hyperframes transcribe subject.mp4 --model small # → transcript.json # 形状: [{ id:w0,text:Hello,start:0.0,end:0.5 }, …]两条命令的分工非常清晰prepare.sh是技能自己的素材装配命令在 SKILL.md 定义的 5 步流水线中位于第 2 步它并行执行matte抠像∥ transcribe转写∥ audio-envelope音频包络然后生成 safe-zones v2含场景调色板/光学/光照产出frames_fg/、transcript.json、safe-zones.json三件套。一条命令什么都不遗漏。hyperframes transcribe走 WhisperX通过uvx驱动无需手动安装见 SKILL.md 依赖一节产出词级时间戳。流动字幕flow caption直接消费transcript.json每个词的start/end决定该词的浮现时刻与正在朗读高亮active-word emphasis。而高潮词climax word是手工编写的——它是标题性的节拍headline beat不属于口播转写的一部分。在生产管线中头像/蒙版管线会免费给出像素级精确的 alpharemove-background则是任意素材的兜底方案。需要留意的是 SKILL.md 中的决策门decision gate转写文本若为乱码可尝试WHISPER_MODELmedium一次否则应拒绝而非为捏造的词配字幕单词时间戳必须与transcript.json偏差在 80ms 以内check-timing.cjs --strict是关卡而非建议。三、蒙版三明治六层 HTML 结构场景的 HTML 是六层、从后到前的堆叠。关键在于人物被叠加在高潮词之上从而在物理上遮挡它——这正是在说话人身后这一视觉效果的卖点单靠模糊/透明度只会读作一个平面浮层。div classstage {STYLE} {PERSON} idcap-{id} >.stage { position: relative; aspect-ratio: 16/9; overflow: hidden; container-type: size; background-size: cover; background-position: center 12%; background-color: #0a0a0e; font-family: var(--ff); } .stage * { position: absolute; } .cut { z-index: 4; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; pointer-events: none; } .grade { z-index: 5; inset: 0; pointer-events: none; background: radial-gradient(130% 100% at 50% 26%, transparent 40%, rgba(0, 0, 0, 0.6)); } /* 高潮词——大号、在人物身后z1、被遮挡。line-height ≥1.15 这样 clip 揭示类入场inset(0)永远不会切掉字形顶部 脚本字体要给 clip 负内边距。 */ .climax { z-index: 1; left: 50%; top: 37%; transform: translate(-50%, -50%); white-space: nowrap; text-align: center; line-height: 1.18; font-family: var(--ff); color: var(--cfill); font-weight: 900; font-size: 44cqh; text-transform: uppercase; text-shadow: 0 2px 13px rgba(0, 0, 0, 0.6), 0 0 48px rgba(0, 0, 0, 0.42); } .climax span { display: inline-block; opacity: 0; } /* GSAP 负责揭示它 */ /* 流动字幕——逐词字幕在前景z6下方三分之一 */ .flow { z-index: 6; left: 50%; bottom: 9%; transform: translateX(-50%); width: 90%; text-align: center; line-height: 1.15; font-family: var(--ff); font-weight: 700; font-size: 7.5cqh; color: var(--cfill); } .flow .w { display: inline-block; opacity: 0; margin: 0 0.1em; color: var(--cfill); } .flow .w.act { color: var(--cacc); } /* 当前正在朗读的词 */ /* 每个模板都要覆盖的令牌 */ .stage { --ff: Inter; --cfill: #fff; --cacc: #10a37f; }繁忙/明亮场景的可读性身后高潮词需要与画面分离而不只是给一个填充色。深色或渐变填充用在受光场景上时给高潮词加描边——-webkit-text-stroke:1px rgba(0,0,0,.5); paint-order:stroke fill——单靠深色投影在高光例如一盏灯前会失效。渐变/裁切填充必须放在.climax span文本节点上绝不能放在被变换的.climax容器上否则 clip 会脱离容器、只剩阴影可见。display:inline-block在.climax span与每个.flow .w上是硬性要求。这与 references/anti-patterns.md 的告诫一致不要在词条入场时动画letter-spacing或filter:blur——inline-block 回流会造成行跳变line-jumps要呼吸感就用scale或y。五、单条暂停的 GSAP 时间轴让循环可 seek旧式图库用setInterval循环驱动动画HyperFrames 需要把同样的节拍变成一条暂停时间轴上的绝对时间 tween。循环结构是流动字幕行 →流动字幕行→ 高潮词入场 → 保持 → 退场。克制是规则流动字幕保持干净唯一的大情绪动作只发生在高潮词处。script srchttps://cdn.jsdelivr.net/npm/gsap3.14.2/dist/gsap.min.js/script script window.__timelines window.__timelines || {}; const stage document.getElementById(cap-{id}); const flow stage.querySelector(.flow); const climax stage.querySelector(.climax span); const tl gsap.timeline({ paused: true }); // --- 流动字幕按 transcript.json 渲染词条在每个词的 start 时刻揭示 --- // WORDS 分组后的转写行[{ words:[{text,start,end}], end }]单位为场景局部秒。 function renderLine(line) { flow.innerHTML line.words .map((w, i) span classw contenteditable="false">【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考