Hyperframes Embedded Captions 排版实战在 plan.json 中为每个字幕组定制 Cinematic 排版【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文是 Hyperframes 项目embedded-captions技能skills/embedded-captions/SKILL.md中字幕排版决策的实战指南。核心观点是cinematic-cream模板只锁定DNA字体、动效、配色默认值并不强制任何槽位结构——每一组字幕caption group的排版都应由 Agent 通过plan.json的css字段从零书写。读完本文你将掌握如何按帧宽与词长计算安全的字号上限、如何用calc(...) * var(--h)实现随帧高缩放的响应式字号、8 种具名排版招式named moves、5 种叙事弧线、bg/fg图层与soft/present语气的取舍以及完整的可运行plan.json示例。本文是调色板不是牢笼a palette, not a cage——以下是经过实战验证的组合建议按场景取用即可遇到更合适的组合可以自行发明文档不强制任何规则。一、背景cinematic-cream 只锁 DNA排版由 Agent 逐组书写在 Hyperframes 的字幕管线中cinematic-cream模板历史模板名现映射为dna:cream见 skills/embedded-captions/SKILL.md锁定的范围极小字体族font-family: Inter动效曲线power2.out/power3.out等配色默认值奶白色#fff5df、screen混合模式它不锁定槽位结构。每一组字幕的排版——字号、字重、斜体/正体、大写/混排、字距、行高——都由 Agent 在plan.json的css字段中逐组手写。这与 skills/embedded-captions/references/composition-craft.md 中的原则完全一致Typography is agent-authored per group, NOT looked up from a preset。不存在cap-1 必须斜体 600、cap-2 必须大写 900这种死规则要读场景、读转写稿选出与语义角色旁白/正文/强调/高潮匹配的排版。从源码看creamDNAskills/embedded-captions/dna/cream.json只声明了字体族的可用字重[500, 600, 700, 900]、cap_color: #fff5df、blend: screen以及soft/present/impact/exit四套动效参数——没有任何一个字号或字重被写死这印证了排版完全交给 Agent 逐组决策的设计意图。二、先定字号上限字号 vs 词长选字号前的必做检查越大不一定越好——如果单词放不进帧宽再大的字号也是灾难。每一次选择font-size之前都要用词长做一次 sanity check。2.1 经验公式Inter 900 大写 -0.03em字距下的粗略规则max_font_px ≈ frame_width / (longest_word_chars × 0.72)0.72是刻意保守的乘数目标是让文本占帧宽约 90%两侧留出小幅安全边距。想要顶到边缘edge-to-edge可以把乘数降到0.65但会损失一部分安全边距。斜体/正体 500–700 字重的字形略窄上限可以放宽约 10%。这条经验公式在源码中有呼应skills/embedded-captions/scripts/fit-fonts.cjs 中的fit-fonts.cjs就是做同一件事的自动化版本——它用每字符字宽em/char× 字号估算渲染宽度超过可用宽度就只缩不放MARGIN 0.92即框内留 8% 呼吸空间const estW constrainChars * adv * sizePx; if (estW usable) { /* shrink to fit */ }该脚本维护了一张ADV表记录各字体的近似字宽系数anton: 0.44、bebas neue: 0.4、press start 2p: 1.05、默认0.56大写文本再乘1.05——和文档公式中的0.72乘数互为印证。可以推断手写 plan 时用0.72做快速估算fit-fonts.cjs则是渲染前的第二道自动防线终检由check-overflow.cjs负责。2.2 720px 竖屏9:16 竖构图参考值词长示例词最大字号3 字符15%~330px5 字符TAKE~200px7 字符AUGMENT / QUANTUM / MATTERS~143px10 字符CREATIVITY~100px13 字符UNPRECEDENTED~77px2.3 1920px 横屏16:9参考值词长最大字号7 字符~380px10 字符~267px2.4 词比能放下的最大字号还大怎么办四种出路按优先级拆成多词一组自然换行——优先推荐在音节间显式加br把字距收紧到-0.05em接受 matte 裁掉一部分——即 Vogue 封面嵌入效果仅当被裁区域恰好是主体所在位置时才成立。硬性底线绝不让文字溢出帧边缘——那不成其为电影感那就是单纯的坏掉。请始终使用上面的启发式。补充一个相关细节在高潮词的场景里skills/embedded-captions/references/composition-craft.md 给出了等价公式max_font_px frame_width / (chars × char_ratio × letter_spacing_mult)大写 900 的char_ratio取 0.62并强调只有每侧 1–2 个首尾字母被裁掉几像素才算可接受的电影式出血凡是逼着观众脑补缺失字母的出血如 10 字符词两侧各被裁 80px都是bug不是风格。三、字号纪律以帧高为参照的响应式标尺9:16 竖屏720×1290与 16:9 横屏1920×1080的舒适字号区间差异巨大。优先使用calc(pct * var(--h))做响应式字号——--h是帧高变量这样同一个 plan 在不同分辨率下自动等比缩放。气质帧高百分比示例 calc耳语 / 标签Whisper / label4–6%calc(0.05 * var(--h))轻柔开场Soft opener6–9%calc(0.07 * var(--h))叙事正文Narrative body9–14%calc(0.11 * var(--h))强调Emphasis14–22%calc(0.18 * var(--h))高潮 / 纪念碑式Climax / monumental22–35%calc(0.28 * var(--h))比脸还大的标题Title-bigger-than-face40%calc(0.48 * var(--h))只有当某个特定比例需要在不同帧尺寸下看起来完全一致时很少见才使用绝对 px。优先calcvar(--h)。fit-fonts.cjs的源码同样以帧高为基准解析字号——它支持calc(a * var(--h))、cqh、vh、px四种写法并把它们归一化为fracOfHif ((m v.match(/calc\(\s*([\d.])\s*\*\s*var\(--h\)\s*\)/i))) return parseFloat(m[1]) * H;另外值得注意hero高潮词在fit-fonts.cjs中有一个下限保护HERO_MIN_FRAC 0.18——如果 hero 在保持足够大的前提下放不进当前 box脚本不会把峰值词悄悄缩成小字而是警告你应该加宽 hero 所在的 plane让它横跨主体居中而不是缩小峰值。四、具名排版招式逐组挑选以下 8 种是经过实战验证的组合按组group的语义角色取用。4.1 斜体沉思式开场memory-wall cap-1 血统font-weight: 600; font-style: italic; letter-spacing: -0.01em; font-size: calc(0.075 * var(--h));4.2 斜体延续 / 梦境式延续cap-2 血统font-weight: 500; font-style: italic; letter-spacing: -0.005em; font-size: calc(0.065 * var(--h));4.3 正体转折 / 陈述cap-3 血统 —— but suddenly 式转折font-weight: 700; letter-spacing: -0.015em; font-size: calc(0.07 * var(--h));4.4 全大写高潮 / 纪念碑式cap-4 血统 —— EVERYTHING IS SHARP AGAINfont-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95; font-size: calc(0.18 * var(--h));注意-0.03em字距与line-height: 0.95正是creamDNA 中 hero 的默认tracking: -0.03em、case: uppercase见 skills/embedded-captions/dna/cream.json两者一致并非巧合——DNA 提供基调Agent 在 plan 中决定何时与如何应用。4.5 章节卡 / 整帧 Adam Curtis 式宣言font-weight: 700; text-transform: uppercase; letter-spacing: -0.015em; line-height: 0.9; font-size: calc(0.14 * var(--h));4.6 新闻跑马 / 广播标签小而锁定font-weight: 500; letter-spacing: 0.02em; font-size: calc(0.038 * var(--h));4.7 微小旁注 / 贴面字幕font-weight: 400; font-style: italic; font-size: calc(0.045 * var(--h));4.8 Vogue 刊头式纪念碑font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.85; font-size: calc(0.32 * var(--h));与旧版预设的对照技能早期版本用cap-intro / cap-phrase / cap-emph / cap-dream / cap-crown五个固定 CSS 类见 skills/embedded-captions/references/typography-presets.md。本文的具名招式是这套思想的自由形式freeform进化——不绑定模板类名直接在css字段写具体值配合tone字段soft/present获得逐组独立的排版与动效控制。五、叙事弧线建议不是强制组数来自内容不是来自模板一段 25 秒的 Pausch 式演讲大约有 8 个呼吸拍beats一段 7 秒的 TikTok 钩子只有 2–3 拍。不要硬凑 4 组、5 组或 7 组——读转写稿标记呼吸组。五种经过验证的弧线弧线结构步数诗弧memory-wall 典范斜体开场 → 斜体延续 → 正体转折 → 全大写高潮4 步问答弧斜体小字号提问 → 全大写大字号回答2 步三连列举弧三个等权叙事段 → 一个高潮全大写4 步单句陈述弧一个纪念碑式全大写长时间驻留1 步耳语钩子弧短格式微小斜体钩子 → 巨型全大写揭示2 步在composition-craft.md中诗弧的 canonical 实现memory-wall12 个词、4 组与此一一对应cg-0Some memories feel soft4 词斜体 600右上cg-1like old film3 词斜体 500右中更小cg-2but suddenly2 词正体 700 转折cg-3EVERYTHING IS SHARP AGAIN4 词全大写 900 高潮横贯宽度组与组之间级联累积cg-0 驻留屏幕cg-1 在其下方进入到高潮时 4 组同时可见形成一首诗。组内用约 80ms 的逐词 stagger 完成入场。六、位置与图层词汇表6.1 位置Position字幕住在帧的哪里top / left / right / bottom百分比或 px—— 锚定transform: translateX/Y—— 精细偏移text-align: center / left / right—— 对齐方式6.2 图层Layer每组二选一图层行为适用bg默认在主体后面被 matte 遮挡形成电影式嵌入干净区域天空、墙面或刻意横跨主体制造 Vogue 刊头效果fg在主体前面宣告式高潮突破或bg会被主体 100% 遮挡时的退路从管线实现看make-composition.cjs会分别产出index.htmlbg 组与index_fg.htmlfg 组render-and-composite.sh并行跑两次 Chromium 渲染后用 ffmpeg 将 fg 层 screen-blend 叠加到 bgmatte 之上见 skills/embedded-captions/references/composition-craft.md。6.3 语气Tone每组二选一语气动效适用soft轻柔逐词透明度 y 漂移0.45spower2.out内省、梦幻、叙事内容present干脆的逐词透明度 y scale 弹入0.22spower3.out强调、宣告式节拍这两套语气在cream.json的motion字段中有精确参数soft: {y:8, blur:2.5, dur:0.5, ease:power2.out}、present: {y:6, scale:1.03, dur:0.3, ease:power3.out}——plan 里的tone是语义声明实际动效曲线由 DNA 提供。七、DNA 防御下的反模式清单DNA 默认值已经挡住了大多数丑结果但在逐组 CSS中仍需避免一个视频里混用多种font-family——DNA 只保留一个字体族多种高饱和颜色——最多一个强调色accentDNA 默认奶白或暖深色letter-spacing超过 ±0.05em——除非有明确理由font-weight300 及以下——在屏幕上太轻强调时用font-style: italic——斜体是给抒情用的不是给重音用的。反模式之外还有一条硬性工程约束不要动画化letter-spacing或filter: blur作为词的入场效果——inline-block 回流会导致整行跳动见 skills/embedded-captions/SKILL.md 的 Non-negotiables 清单。八、cinematic-cream 什么时候是错的这套 DNA 假设中到暗背景亮度 60–180。以下场景应改选其他方案场景处理亮白演播室cinematic-cream的奶白 screen会洗白且该 DNA锁定不可改色→ 改用Standard 模式不透明 rail纪录片正式感Standard 模式documentary-dignified 方向见 skills/embedded-captions/references/direction-catalog.md §1活力 vlog 钩子未来的kinetic-vlogDNA尚未发布这与 SKILL.md 的亮度探测规则一致字幕区平均亮度60 以下→ 亮字直接可读60–180→ 加字形衬底180→ 不透明文字 衬底。明亮场景的正确选择是inkDNAletterpress为亮面而生或anchor主题不透明 rail而不是去覆盖一个锁定的外观。九、完整示例memory-wall 原文的 freeform 表达以下是 memory-wall 原版的plan.json——与 canonical memory-wall.html 输出完全相同但用的是无槽位slot-free的自由形式caption_layer: bg 4 个组每组自带tone、时间窗与css组内逐词携带start/end时间戳。{ template: cinematic-cream, caption_layer: bg, groups: [ { id: cg-0, tone: soft, in: 0.2, out: 4.85, css: top: 14%; right: 6%; left: auto; text-align: right; font-size: calc(0.09 * var(--h)); font-weight: 600; font-style: italic; letter-spacing: -0.01em;, words: [ { text: Some, start: 0.24, end: 0.44 }, { text: memories, start: 0.48, end: 0.82 }, { text: feel, start: 0.92, end: 1.14 }, { text: soft, start: 1.2, end: 1.64 } ] }, { id: cg-1, tone: soft, in: 2.55, out: 4.85, css: top: 26%; right: 10%; left: auto; text-align: right; font-size: calc(0.075 * var(--h)); font-weight: 500; font-style: italic;, words: [ { text: like, start: 2.66, end: 2.78 }, { text: old, start: 2.88, end: 3.02 }, { text: film, start: 3.16, end: 3.46 } ] }, { id: cg-2, tone: present, in: 4.9, out: 8.04, css: top: 18%; right: 6%; left: auto; text-align: right; font-size: calc(0.085 * var(--h)); font-weight: 700;, words: [ { text: but, start: 5.04, end: 5.18 }, { text: suddenly, start: 5.24, end: 5.76 } ] }, { id: cg-3, tone: present, in: 6.7, out: 8.04, css: top: 32%; right: 6%; left: auto; text-align: right; font-size: calc(0.11 * var(--h)); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95;, words: [ { text: everything, start: 6.82, end: 7.14 }, { text: is, start: 7.18, end: 7.28 }, { text: sharp, start: 7.32, end: 7.52 }, { text: again, start: 7.58, end: 7.92 } ] } ] }同一视觉效果零槽位约束。每一组字幕拥有自己的排版。几个可直接复用的要点cg-0/cg-1 共享out: 4.85cg-2/cg-3 共享out: 8.04——同组块内统一退出时刻避免 flex 回流造成的跳动这正是 skills/embedded-captions/references/composition-craft.md 的块边界三定律。组窗口必须包住组内所有词的时间戳group.in ≤ min(word.start)且group.out ≥ max(word.end)否则词会被静默延迟到容器挂载后才出现。组内逐词动画的触发点是每个词的startin只约束容器挂载时刻——所以prev_block.out ≤ next_block.first_word.start才能保证下一块的首词仍在真实口语时刻入场。十、工作流中的位置这套排版知识何时生效在 Cinematic 模式的完整管线中skills/embedded-captions/SKILL.md 的 5 步流程手写排版发生在第 3 步唯一的创意步骤1. hyperframes init project --non-interactive --video video.mp4 --skillembedded-captions 2. bash scripts/prepare.sh project # matte ∥ transcribe → safe-zones 3. 编写 plan.json → node scripts/fill-timings.cjs → fit-fonts.cjs → make-composition.cjs 4. node scripts/preview-frames.cjs project # ~2s/帧合成预览渲染前必做 5. bash scripts/render-and-composite.sh project # 门禁 → final.mp4第 2 步产出的safe-zones.json会给出hugLeft/hugRight叙事带、heroAnchor/heroBands等推荐锚点——但排版样式仍需你来写。第 3 步中fit-fonts.cjs会自动把放不下的组缩到合适字号自动版的两步字号检查make-composition.cjs将 plan 编译为index.html。第 4 步的preview-frames.cjs是渲染前的合成预览用来检查洗白、文字压文字、阅读顺序、hero 存在感与画面平衡——这些是几何门禁check-occlusion.cjs、check-overflow.cjs无法发现的审美问题。如果你想用planes共享父容器而不是逐组写top:composition-craft.md也提供了平面化写法——planes的 CSS 负责定位top/left/right flex组内 CSS 只负责排版字号/字重/样式/大小写/字距/行高二者职责分离。结语typographic-moves.md的全部价值在于一句话模板锁 DNA排版归你管。把字号算到帧宽以内、用帧高百分比做响应式、按语义角色挑招式、按叙事弧线排布、遵守bg/fg与soft/present的图层语气纪律——这六件事做对你的字幕就是嵌入场景的电影排版而不是贴在画面上的字幕条。更多配套知识可继续阅读嵌入轨道的完整攻略skills/embedded-captions/references/composition-craft.md平面定位与洁净区选择skills/embedded-captions/references/layout-heuristics.md十套 DNA 视觉语言与选择规则skills/embedded-captions/dna/README.md传统 cap-* 预设字号×列宽矩阵skills/embedded-captions/references/typography-presets.md【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考