hyperframes 竖屏谈话类视频字幕模板 portrait-header9:16 顶部条带 底部 Crown 的完整实现指南【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本篇技术指南讲解 hyperframes 内置字幕技能embedded-captions中面向9:16 竖屏谈话类talking-head视频的portrait-header模板如何在主体头顶的横向条带中呈现逐词浮现的字幕并可选在画面底部渲染一行王冠crown高潮字。读完本文你将掌握该模板的锁定视觉身份、布局字段取值方法、五档字阶typography slot分配规则、完整 plan.json 编写方式以及模板底层 HTML/GSAP 的实现原理。模板定位竖屏场景的字幕嵌入方案portrait-header是 hyperframes 仓库中 embedded-captions 技能 的一个旧版模板规格文档位于 skills/embedded-captions/modes/cinematic/_archive/portrait-header/spec.md同目录下保留了对应的 template.html。其设计目标非常明确为竖屏说话人视频提供一种不遮挡面部、又能最大化字幕存在感的排版方式——字幕不落在常见的底部而是整体放在画面顶部、位于人物头顶上方的一条水平条带header strip中。当画面能够拍到人物腰部以下时还可以在画面底部叠加一条 crown高潮字形成顶部字幕带 底部高潮句的上下呼应结构。该模板与横屏的champion规格文档同属旧版 cinematic 模板体系两者共享intro / phrase / emph / dream / crown 五档字阶与 single-caption swap同一时刻只显示一条字幕的排版模型区别只在于布局方向——champion面向 16:9 横向侧栏 中央 Crown而portrait-header面向 9:16 竖屏顶部条带。规格文档中明确写到如果素材是 16:9 横屏应改用champion或memory-wall模板。需要说明的是从 modes/cinematic/README.md 可以看到该技能现已演进为DNA 视觉语言体系10 种场景参数化的视觉语言旧的 per-template HTML 外壳已退役_archive/目录下的 portrait-header / champion / memory-wall 均作为设计参考design references only保留。本文基于归档模板的规格与源码展开其布局思路顶部条带 底部 Crown与五档字阶模型在理解当前 DNA 体系时仍有直接的参考价值。锁定视觉身份Visual identity哪些不可改动规格文档用LOCKED锁定标注了模板的视觉身份即模板的灵魂任何使用都必须保持这四条否则会破坏模板的视觉一致性五档字阶typography slotsintro/phrase/emph/dream/crown全部居中显示混合模式mix-blend-mode: screen叠加在暖骨色warm bone color#fff5df之上——screen 混合让浅色文字在暗色/中等亮度背景上自然融进画面同时保持可读单字幕轮换single-caption swap同一时刻所有字幕都堆叠在顶部条带的同一位置后一条替换前一条绝不同屏出现多条底部 crown 除外逐词动画每行按单词逐个浮现分两种语气——soft柔和为轻微的 Y 轴漂移淡入present呈现为缩放弹出popscale。从 template.html 的源码可以确认这套锁定样式如何落地.cap基类统一设置mix-blend-mode: {{BLEND_MODE}}、color: {{CAP_COLOR}}、text-shadow与filter五个字阶类各自通过calc(字号 * var(--font-scale))计算实际字号字阶基础字号× font_scale字重样式字距.cap-intro72px500斜体-0.005em.cap-phrase88px600常规-0.015em.cap-emph104px800常规-0.025em.cap-dream92px700斜体-0.015em.cap-crown130px900全大写uppercase-0.035em可以看到叙事弧线的字阶递进intro 最小最轻斜体 500phrase 加粗emph 最大最重800 字重、-0.025em 收紧字距dream 回到斜体但保持较重crown 用最重的 900 字重 全大写 最紧字距制造一句话高潮的视觉冲击。适用场景判断什么素材适合什么必须拒绝规格文档给出了一套清晰的决策标准这与技能整体先探片、后决策的流程一致见 SKILL.md 的 Decision gate✅ 适合Good fit9:16 竖屏视频典型 1080×1920单一主体居中填满画面头顶上方有干净的留白区域clean band——这是顶部条带的落点语速相对密集大量短句——此时 crown 只用于唯一的高潮句。❌ 不适合Wrong fit主体的头部已经顶到画面上缘没有可容纳顶部条带的空间16:9 横屏素材——改用champion播客/访谈风或memory-wall内省独白风多个说话人或多次切换镜头——单条带 单 Crown 的模型无法承载多视角叙事。这条头部上方必须有干净条带的硬性前提与技能参考文档 layout-heuristics.md 中字幕平面必须永远落在背景像素上、绝不能压住人体的原则一脉相承。规格文档在 When to apply 中把竖屏布局的规则总结为第 5 条 invariant竖屏 9:16 时墙面平面变成顶部条带全宽高度约 20%crown如使用位于其下方。布局决策agent 需要决定的五个字段模板遵循STYLE LOCKED. LAYOUT OPEN.样式锁定、布局开放的设计哲学——视觉身份不可动但布局完全开放给使用者按场景调整。规格文档给出了布局决策表以 1080×1920 为例字段含义示例值1080×1920header.top顶部条带在画面中的 Y 坐标。应位于主体头顶上方并留约 30px 呼吸空间若发顶在 y≈200则取30header.height条带高度。长字幕/两行折行时需要更大值280crown_top底部 crown 线的 Y 坐标。画面看不到腰部时跳过近全身镜头取1620crown_enabled是否渲染底部 crown。主体下半身完全填满画面时跳过遮罩本身就会挡住 crown紧凑半身景别取falsefont_scale对锁定字号的整体缩放倍率1080×1920 取1.0在 template.html 中这三个布局输入被直接注入 CSS.header-plane使用top: {{HEADER_TOP}}px; height: {{HEADER_HEIGHT}}px定位.crown-plane使用top: {{CROWN_TOP}}px而:root { --font-scale: {{FONT_SCALE}} }驱动全部五个字阶的字号计算。条带内部还预置了padding: 24px 40px的安全边距字幕.cap以绝对定位居中left: 40px; right: 40px; text-align: centermax-width: calc(100% - 80px)保证长句不会溢出条带。决策经验crown 何时该开、何时该关规格文档特别强调竖屏条带本身很窄多数字幕组group只占 1–2 行因此 crown 的使用必须克制——如果 crown 会被主体身体的遮罩matte挡住就不要用。典型场景是 Pausch 式普式演讲半身肖像由于躯干占满下半画面crown 往往必须整体跳过把高潮词提升为顶部条带中的emph字阶即可。这一判断与 layout-heuristics.md 中 crown 放置的经验表完全对应当主体占据画面 70% 或近景脸部 80% 时crown 应降级为列内emph所有字幕放进 header/footer 条带——这正是 portrait-header 的默认工作模式。Slot 分配五档字阶的叙事弧线规格文档规定 slot 分配沿用与champion相同的弧线模型见 champion/spec.md 的 Slot assignment 表格Slot用途intro填充词/话语标记you know, for me, so…phrase主要陈述从句emph关键成就/最高级表达dream展望性语句、过去式回忆crown全片唯一高潮句——中心舞台的 payoff对 portrait-header 而言因为条带只有一条且较窄还有两条额外纪律多数字幕组控制在 1–2 行内结合header.height的取值来容纳两行折行crown 不应在会被主体遮罩挡住时使用此时把高潮直接提升为条带中的emph即可。关于一句话应该被拆成多少个组可以参考 caption-grouping.md 的规则停顿 ≥500ms、句号/问号/感叹号、强逗号≥250ms 停顿、话语重置词but so you know都会触发切组单组上限为 6 个词或 2.5 秒。组级时间则取in 首词.start - 0.08、out min(下一组.in - 0.05, 末词.end 0.6)保证组窗口完整包裹内部单词这也是技能group windows must envelop their words的硬性校验见 SKILL.md。Plan.json 结构逐字段解析规格文档给出了完整的 plan.json 示例这里逐字段拆解{ mode: template, template: portrait-header, duration: 25.3, fps: 24, width: 1080, height: 1920, header: { top: 30, height: 280 }, crown_top: 1620, font_scale: 1.0, groups: [ { id: cg-0, slot: intro, tone: soft, in: 0.10, out: 3.20, words: [...] }, { id: cg-1, slot: phrase, tone: soft, in: 3.55, out: 5.80, words: [...] }, { id: cg-2, slot: emph, tone: present, in: 17.85, out: 22.10, words: [ {text: Time, start: 17.94, end: 18.26}, {text: is, start: 18.38, end: 18.54}, {text: all, start: 18.66, end: 18.80}, {text: we, start: 18.92, end: 19.02}, {text: have, start: 19.12, end: 19.38} ]} ], crown_group: null }各字段含义与取值要点mode/template固定为template与portrait-header用于编译器的模板路由duration/fps/width/height成片参数与源视频保持一致竖屏典型 1080×1920、24fpsheader.top/header.height顶部条带的 Y 坐标与高度见上文布局决策表crown_top底部 crown 的 Y 坐标仅当启用 crown 时有效font_scale五个字阶的整体缩放倍率用于适配不同画幅高度groups[]字幕组数组。每个组包含id唯一标识如cg-0模板用它生成 DOM 选择器slot五档字阶之一决定使用哪个.cap-*类tonesoft或present决定逐词动画曲线in/out组在时间轴上的显示窗口秒words[]单词级时间戳每个词带text/start/end用于逐词卡拉 OK 式浮现时间必须源自转录结果Whisper 词级时间戳。crown_group底部 crown 组。规格文档明确要求如果你已确认 crown 会被主体身体或镜头构图挡住必须显式设为null。从 template.html 的实现看GROUPS与CROWN两个 JSON 会被注入脚本所有groups[]渲染进.header-planecrown_group若非空渲染进.crown-plane两者的动画由同一个animateGroup()函数驱动。底层实现模板 HTML 与 GSAP 逐词动画模板是一个自包含的 HTML 合成外壳通过占位符{{WIDTH}}、{{HEADER_TOP}}、{{GROUPS_HTML}}等由编译器填充后交给渲染管线。其结构如下#a-roll底层video播放source.mp4object-fit: cover铺满画幅负责真实视频层#stage叠加层z-index: 2pointer-events: none内含.header-plane顶部条带承载{{GROUPS_HTML}}与.crown-plane底部 crown承载{{CROWN_HTML}}#a-roll-audio音轨引用track-index: 3与画面分离以便后续合成时对齐音频根元素#root携带data-composition-idmain、data-duration、data-width/height等元数据供 hyperframes 渲染/合成脚本识别合成图层。逐词动画由 GSAP3.14.2通过 CDN 引入时间线实现核心逻辑在animateGroup(g)函数中var isSoft g.tone soft; tl.set(sel, { opacity: 1, y: 0 }, Math.max(0, g.in - 0.01)); g.words.forEach(function (w, i) { var wsel sel .w[data-i i ]; if (isSoft) { tl.fromTo(wsel, { opacity: 0, y: 8 }, { opacity: 1, y: 0, duration: 0.42, ease: power2.out, overwrite: auto }, w.start); } else { tl.fromTo(wsel, { opacity: 0, y: 6, scale: 1.04 }, { opacity: 1, y: 0, scale: 1.0, duration: 0.22, ease: power3.out, overwrite: auto, transformOrigin: 50% 50% }, w.start); } });动画语义与锁定视觉身份的第四条完全对应soft柔和单词从opacity: 0, y: 8淡入并轻微上移归位时长 0.42s、power2.out缓动——柔和、安静适合 intro / phrase / dreampresent呈现单词从opacity: 0, y: 6, scale: 1.04以 0.22s、power3.out弹出并缩回 1.0——干脆、有力适合 emph 与 crown退出整组在g.out - 0.45处开始 0.45s 淡出power2.in并在g.out时刻置为visibility: hidden保证组与组之间无缝交接、绝不重叠single-caption swap。时间线最终注册为window.__timelines[main]由渲染引擎 seek 到指定帧截屏合成。这种每个词精确对齐w.start时间戳的逐词 karaoke 机制与技能词级时间戳必须与转录一致容差 80ms的非协商约束见 SKILL.md严格对应。实战工作流从素材到成片把 portrait-header 放进技能的整体流水线详见 SKILL.md 的 5 步管线使用方式如下# 1. 初始化项目把竖屏源视频交给技能 hyperframes init project --non-interactive --video video.mp4 --skillembedded-captions # 2. 一键准备并行生成主体遮罩 转录 音频包络 → 安全区 bash scripts/prepare.sh project # 输出frames_fg/ transcript.json safe-zones.json # 3. 编写创作决策文件本模板plan.json按上文 schema 编写 # Cinematic 旧模板流程补时间 → 适配字号 → 编译合成 node scripts/fill-timings.cjs project node scripts/fit-fonts.cjs project node scripts/make-composition.cjs project # 4. 视觉 QA先看合成预览帧别急着渲染 node scripts/preview-frames.cjs project # 5. 渲染合成 → 通过门禁 → final.mp4 bash scripts/render-and-composite.sh project其中第 3 步值得一提fill-timings.cjs 会直接按讲话顺序从transcript.json中按位置匹配并回填每组每个词的start/end与组级in/out从而消除文字匹配错词导致的时序漂移——编写 plan.json 时只需给出组内单词与组级显示窗口in/out只会被钳制、不会被收窄以保留作者有意设置的高潮停顿。这意味着你在 plan.json 中只需关注分组与字阶时间细节由脚本保证确定性。第 5 步的渲染门禁会自动执行时序校验check-timing.cjs --strict、遮挡/溢出检查与手递手hand-off检查与 template.html 的确定性 GSAP 时间线无Math.random()、无Date.now()共同保证每一帧的合成结果可复现。从 portrait-header 看模板体系演进作为归档模板portrait-header 的顶部条带 底部 Crown 五档字阶设计在今天仍有方法论价值它解决了竖屏谈话类视频的核心矛盾——字幕要醒目但不能遮脸。当前技能用 DNA 体系dna/README.md将这一思路参数化10 种视觉语言各自锁定字体、调色、混合模式与运动语法并通过safe-zones.json按场景采样强调色、接触阴影与景深模糊而竖屏顶部留白的布局判断则沉淀在 layout-heuristics.md 的 invariants 中9:16 时墙面平面变为顶部条带高度约 20%。因此阅读 portrait-header 规格的正确姿势是把它当作竖屏字幕编排的设计语言参考——理解五档字阶的弧线逻辑、single-caption swap 的稀缺原则、crown 的取舍标准在实际生产中则遵循技能当前推荐的身份选择流程从 CATALOG.md 的 35 个身份中挑选或直接使用cream/ink等 DNA而不再直接使用这份归档模板。需要横向对比时可同时翻阅 champion 规格横屏侧栏 中央 Crown与 memory-wall 规格墙面诗行堆叠三者共同构成了这套模板库对单说话人 嵌入型字幕不同画幅、不同语气的完整覆盖。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考