Hyperframes 电影级嵌入字幕美学:18 条设计原则与工程落地指南

Hyperframes 电影级嵌入字幕美学:18 条设计原则与工程落地指南 Hyperframes 电影级嵌入字幕美学18 条设计原则与工程落地指南【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes字幕不只是把话打上去。在 Hyperframes 的embedded-captions技能体系中skills/embedded-captions/references/aesthetic-principles.md是全技能最核心的参考文档——它定义了把字幕从预设模板生成提升到被设计过的导演级作品的 18 条规则并配套了编辑判断规则与渲染前自检清单。本文以该文档为主体逐条拆解这 18 条原则并结合本仓库中的编译脚本、几何校验器、DNA 视觉语言与模板规范说明每一条规则在工程上是如何被强制、被校验、被落地的。为什么需要一套审美原则该技能面对的是单主体 talking-head 视频的字幕增强场景不修改原片画面仅通过matte人体分割前景蒙版让文字嵌入场景、被主体遮挡从而产生字幕长在画面里的观影体验。市面上的 AI 字幕工具Veed、Submagic、Opus Clip、Captions.ai、CapCut本质上是预设选择器——给你一盒蜡笔而本技能要扮演的是导演——它行使判断力。整套 18 条原则的竞争论点就是在品味上取胜而不是在功能数量上取胜。因此每份plan.json电影模式/Cinematic和每个 Standard 模式 HTML 在提交前都必须对照这 18 条规则检查。下面的内容逐条展开规则本身并在每条规则后补充仓库内的源码级佐证与落地方式。规则 13主体优先、遮挡融入、对比度层级规则 1主体永远是赢家。字幕存在的意义是服务人脸而不是与人脸竞争。如果观众的目光先落在字幕上而不是说话者身上这条字幕就是失败的。发布任何plan.json之前都要自问先读到的是字幕还是主体如果字幕赢了就缩小、变暗或移动它。规则 2遮挡而不是悬停。顶级字幕设计把文字放进场景里。字母从肩膀、麦克风、头部后面穿过会带来剧情内diegetic的质感而统一悬浮在下三分之一处的字幕则像 PowerPoint。这依赖完整的 matte 管线——这正是相对所有竞品的护城河。这条规则在工程上的对应物是safe-zones.cjs中的 hero 锚点逻辑代码从逐像素 alpha 蒙版出发把 hero唯一一个被提升的大词居中放在主体上让头部/躯干遮挡其中间 30%55%——遮挡本身就是嵌入效果见 safe-zones.cjs 中heroAnchor的注释 Place the ONE big hero here (centered on the subject); the head/torso occludes its middle (~30-55%) — that is the embed.。脚本还会输出heroBands逐高度遮挡预测剖面优先选择预测遮挡 12%62% 的横带只有当没有任何横带达到 ≤62% 遮挡时才允许 hero 放到前景fg 是最后手段。这说明遮挡而非悬停不是一句口号而是由几何求解器预先计算好的版面事实。规则 3对比度是层级问题不是亮度问题。在文字后面放一个白色矩形框是品味的失败。优先级顺序为mix-blend-mode: overlay或screen拾取场景亮度23px 深色描边 柔和投影窄的半透明渐变条不是实心色块局部把背景板压暗 10%15%最后手段硬白胶囊底板——在电影方向上被禁用。仓库中与此对应的机制是 SKILL.md 的亮度探测采样字幕区域的平均亮度低于 60 时浅色文字可直接阅读60180 需要加字形遮罩glyph scrim180 以上必须用不透明文字加遮罩。同时screen混合在亮度超过 180 的背景上会失效因此电影模板锁定 cream screen不可改色遇到亮场景应改选inkDNA为亮面设计的近黑正片叠底文字而不是强行改色。规则 46镜头驱动位置、字体纪律、字距随字号收紧规则 4消灭恒定的下三分之一。固定底部的字幕是单调的。字幕区域应随镜头变化紧特写close-up→ 上侧栏或顶部crown中景mid-shot→ 嵌入背景墙/泡沫板/白板远景wide→ 经典下三分之一偏移到非主体一侧。这一规则的工程化体现在layout-heuristics.md中正文定义了 clean zone在整个片段中永远是背景的像素区域的优先级——离头部最远的角落、头顶上方减 30px 的横条、下三分之一最后手段并给出了 crown 居中放置的三个条件主体在画幅中心 ±10% 以内、两侧干净区各 ≥15% 画幅宽、crown 宽度 主体宽度 400px。规则还强调要把主体的视线方向looking room作为并列条件字幕应放在主体视线相反的一侧避免抢占视线空间。详见 layout-heuristics.md。规则 5最多一个字体家族、两个字重。层级靠字重如 500 → 800而非字体建立。在一个片段里混搭 Montserrat 手写体 衬线体是最业余的标志。建议选用 Inter、SF Pro、Söhne、GT America、Aktiv Grotesk、Neue Haas Grotesk 这类拥有 ≥5 个字重的字体用字重 字号来构图。仓库中 Standard 模式自带的字体文件集modes/standard/fonts/files以 Inter 的多字重400/500/600/700/800/900为核心配合少量特性字体Anton、Bodoni Moda、Caveat 等服务不同身份识别而单个片段的构图仍然遵循单一家族原则。规则 6字距随字号增大而收紧。展示级字号40pt需要负字距-10 到 -30 单位或-0.015em到-0.035em正文级字号等效 1420pt需要正字距5 到 15或0.005em到0.015em。Apple SF Pro 的光学字号模型是参考基准Submagic 的默认设置恰好相反这也是它显得廉价的原因之一。注意这与规则 10 不冲突字距是静态设置在最终态上的而非在入场动画中动态变化后者会引发 reflow。规则 79字号标尺、禁用斜体强调、单色纪律规则 7正文字幕的大写高度约为画幅高度的 3.5%5%。1080p 竖屏高 1920正文 6595px强调/钩子 130170px1080p 横屏高 1080正文 4055px强调 70100pxHormozi 式超大字画幅的 7%9%是钩子尺寸不是正文尺寸只留给点睛句。这与 typography-presets.md 中的字号表相互印证intro66px、phrase78px、emph92px、dream82px、crown140px针对约 560px 列宽与 1080 高画幅标定并且给出随列宽扩大的缩放矩阵600-760px 列宽对应 78/108/128/100/220竖屏时 crown 字号整体除以 1.5。规则 8视频文字中永远不用斜体做强调。斜体是印刷里表示段落内文气流动的约定在 24fps 运动画面中它读起来像歪了而不是加重了。强调应使用字重extrabold、颜色单一强调色或字号1.31.6×。斜体仅允许用于书面材料的字面引用、外语词、内心独白与对话的区分。这解释了 typography-presets.md 中dream风格82px italic 700存在的合理性——它专门表达梦想/回忆类的心理状态属于thought vs spoken的斜体豁免而非用于强调。规则 9色彩纪律——一个色相 中性色。每个视频只选一个高饱和强调色用于关键词高亮。Hormozi 的黄绿红在他身上成立因为他的内容本身就很响电影感 单一强调色 白/骨白/炭灰。默认调色板暖白#F5EFE6用于深色背景石墨灰#1A1A1A用于浅色背景强调色从场景采样。仓库把从场景采样强调色做成了流水线产物safe-zones.cjs的scenePalette从背景像素量化 3bit/通道的色桶取主色对饱和像素做色相直方图并加权再钳制到可读的饱和度/亮度区间hsv2hex(h, min(0.78, max(0.5, s*1.2)), min(0.8, max(0.55, v*1.15)))输出accentSuggestion同时给出场景的暖/冷色温判断temperature。这就是强调色从场景采样的确定性实现见 safe-zones.cjs 的scenePalette函数。规则 1012动画纪律、阅读时长、错峰即表达规则 10只动画 transform绝不动画字母本身。letter-spacing、filter:blur、font-weight的动画会导致 inline-block 回流 → 整行跳动。应只动画translateY、scale、opacity、clip-path。这一点在 anti-patterns.md 中被作为已锁死的 bug 记录动画 only opacity transform. If you want a breath effect, usescaleory, not letter-spacing. 同文件还警告不要同时淡入容器和每个单词容器 opacity × 单词 opacity 会产生非线性感知曲线文字会在中途啪地出现正确做法是用tl.set先把容器透明度置 1只淡入单词。规则 11每个词至少可见 0.4 秒。BBC 的阅读速度是 160180 wpm约 0.330.38 秒/词。电影感需要更多呼吸空间——单词错峰进入 200220ms整句在退出前保持 0.40.6 秒。低于 150ms 的入场读起来像抓狂。这与 SKILL.md 的硬性下限一致每条字幕在屏 ≥0.5 秒更短即不可读。规则 12错峰stagger是首要表达轴。同一句话不同的错峰节奏观感完全不同错峰观感40ms机关枪式、紧迫、TikTok 钩子80ms对话式、默认150ms深思熟虑、纪录片250ms诗意、仪式感要根据内容基调选择而不是默认用一个值。这正是 SKILL.md 强调同一错峰用于纪录片和 vlog 是违规的原因——自检清单第 8 项专门检查这一点。规则 1315强调递进、节奏破局、字幕编辑规则 13强调在短语内部递进而不是在短语之间。每个词都加粗 没有强调。结构建议70% 普通正文20% 轻微提升颜色或字重二选一不同时用8% 完全强调更大、更亮、停留更久2% 高潮最大、停留 1.5 秒、前后各留一次呼吸。规则 14每 30 秒打破一次节奏。每个词都一个样 眼睛适应后不再感知运动。每约 30 秒埋一个节奏破局点短语从相反方向进入、某个单词 2× 尺寸、一段完全无字幕的静默、一次颜色切换。这就是 Submagic 预设作品与被设计过的作品之间的分野。规则 15字幕加信息剪掉复述。转写全部内容但展示70%85%。删除填充词um、like、you know、I mean、自我纠正I think... I mean actually...、显而易见的视觉复述一边指着一边说as you can see here。这是纯编辑判断现有 AI 字幕工具都不做属于纯增量价值。这条规则的工程化配套在 caption-grouping.md分组断点优先用 ≥500ms 停顿、句末标点、强逗号后 ≥250ms 停顿、话语重置词组上限为 6 词或 2.5 秒同时明确编辑手术是被允许的——可以删填充词、压缩长句、在明显静默/笑声/音乐段整组跳过。示例中 had the great foundation 被精简为 the great foundationI was dreaming of... 删掉 I wascrown 里删掉 a都是为了视觉节奏。规则 1618呼吸分段、平台安全区、黑边即版面规则 16按呼吸分段不按时长分段。在 ≥250ms 的自然停顿处切块。一条跨过呼吸停顿的字幕会感觉很别扭。Whisper 的逐词时间戳让这变得微不足道。规则 17平台安全区永远要算。永远遵守平台安全区9:16 的 TikTok/IG/Shorts字幕区y ∈ [12%, 78%]底部 22% 是 UI16:9 广播电视标题安全区 居中 80%TV 导出四边留 5% 边距。要烘焙进版面求解器永远不要靠目测。仓库中safe-zones.cjs本身就是版面求解器的实证——它把遮挡、亮度、安全区变成预先计算好的safe-zones.json供作者使用而 layout-heuristics.md 第 5 步给出了 letterbox/pillarbox 的硬校验公式左对齐plane_left padding_left、右对齐plane_right − padding_right − longest_word_width、居中plane_center − longest_word_width / 2且全部必须 ≥ 黑边内缘 1020px 安全余量并特别提醒按换行后的最长单行计算宽度four very talented guys 换 3 行后最宽的是 talented 约 8 字符而不是整句 23 字符。规则 18黑边letterbox/pillarbox也是字幕的版面。16:9 素材放到 9:16 产生的黑条那些黑条就是字幕的家。2.35:1 电影画幅导出到 16:9在 letterbox 里放衬线体引文会读起来像纪录片。这条规则与 SKILL.md 的 pre-flight 探测呼应首帧出现黑边就计算安全内容矩形把字幕放置约束在安全区内部。编辑判断规则决定该显示什么18 条规则之外还有一套该加什么字幕的修辞判断规则现有工具都不做填充词抑制off/light/strong——纪录片默认 lightvlog 默认 strong自我纠正折叠——只显示最终版本呼吸组分段——在 250ms 的静默处分组绝不在短语中间切语义强调——每个短语做一遍 LLM 判断哪 12 个词承载含义高亮它们而不是默认重读强调或最响亮的词尊重静默——说话者为了修辞效果停顿 1.5 秒以上时不要用残留的旧字幕填补让静默呼吸引语感知——he said, quote… 或手势比划引号 → 用斜体属于被允许的斜体例外禁止[laughs]/[sighs]——那是无障碍字幕的写法审美字幕里它们污染画面。这些判断与 caption-grouping.md 的编辑手术一脉相承你在写支持言语的排版而不是法庭记录誊本。渲染前自检清单提交前的最后一道关卡Agent 自己的渲染前检查任何一条违反都应重新生成受影响片段字幕和主体谁先被读到规则 1有没有硬白胶囊底板规则 3——电影方向禁用特写还在用固定下三分之一规则 4超过 2 个字重或超过 1 个字体家族规则 5用斜体做强调规则 8——禁用超过 1 个高饱和强调色规则 9动画了 letter-spacing 或 filter:blur规则 10——禁用纪录片和 vlog 用同一套错峰规则 12每个组都被强调规则 13超过 30 秒没有节奏破局规则 14显示了每个填充词规则 15字幕跨过呼吸停顿规则 16字幕进入了平台 UI 区规则 17这条清单与 SKILL.md 的Non-negotiables人脸每 0.3 秒窗口至少 30% 不被遮挡、最终渲染做 WCAG 对比度 lint、全流程确定性禁用Math.random()/Date.now()、绝不调色原片共同构成提交防线几何类违规则由check-timing.cjs80ms 时间漂移容差、group 窗口必须包络其单词、时间空间重叠检测和check-occlusion.cjs、check-overflow.cjs、check-rail-climax.cjs等脚本在渲染门禁中自动拦截。审美规则靠人agent执行几何规则靠门禁执行两层缺一不可。结语从规则到管线18 条审美原则并不是孤立的设计鸡汤。在本仓库中它们与 safe-zones.cjs主体遮挡锚点、亮度、场景色采样、光向接触阴影、check-timing.cjs时间精度与重叠校验、typography-presets.md字号/字重标尺、layout-heuristics.md版面位置与安全区公式、anti-patterns.md已锁死的失败模式以及dna/目录下十种逐场景参数化的视觉语言cream / ink / editorial / keynote / documentary / loud / neon / glitch / chrome / velocity见 dna/README.md构成了一个闭环规则定义品味脚本计算几何门禁守护确定性。当你准备提交一份plan.json时先通读这 18 条规则与自检清单再让管线把判断变成版面——这样产出的字幕才是被设计过的而不是从预设里挑出来的。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考