HyperFrames Video Beats
该技能用于将口播视频与转录文本转化为一组有节奏的 motion graphics，在不遮挡讲话者的前提下支撑叙述。它适用于已有 HyperFrames 视频项目，在 Codex 被要求添加或改进视觉节拍、玻璃拟态下三分之一、皱纸全屏接管、转录同步标注、节奏覆盖、YouTube 留存图形或渲染就绪叠加层时使用。
核心目标
让观众保持方向感与参与度。每个 beat 必须回答以下之一：
- 观众应该记住什么？
- 哪个概念需要视觉结构？
- 哪个数据、对比或转折点值得强调？
- 哪里节奏变得过于安静，观众可能流失？
不要仅仅因为存在空白就添加图形，而应因为叙述中存在主题、过渡、证据点或心智模型需要视觉支撑才添加。
第一遍检查
- 阅读项目说明（
AGENTS.md、本地技能文档与项目特定笔记）。 - 检查根合成、当前 beat 排期、共享 CSS 与转录文本。
- 从根
data-start/data-duration条目或主SHOW数组构建覆盖地图。 - 提取所请求区域以及未覆盖空白的转录片段。
- 按叙述而非任意时间戳识别主题区间。
- 决定每个主题是否需要全屏纸张 beat、下三分之一玻璃卡片，或不需要新 beat。
使用快速本地命令，优先 rg、Select-String 以及小型 Node/PowerShell 转录脚本。
Beat 类型决策
使用全屏皱纸
当叙述到达重要论点、列表、章节标记、引言或数据，且应短暂占据整个画面时，使用纸张接管。
适用场景：
- 钩子兑现或“本视频内容”概览
- 主要章节过渡
- 重要数据或研究结果
- 可记忆的论点句
- 短引言或箴言
- 需要观众停下来看的对比
规则：
- 保持简短，通常 4-12 秒。
- 使用稀疏的黑色文本。
- 只有真实数据数字或一个极其重要的词使用强调色。
- 不要用纸张接管覆盖长篇解释。
- 默认不要让全屏文字变得活泼、巨大或过度加粗。
使用玻璃拟态下三分之一
当讲话者应保持可见，且图形应支撑当前想法时，使用玻璃下三分之一。
适用场景：
- 解释性脚手架
- 主题标签
- 方程样式的心智模型
- 小型列表
- “这意味着什么”的翻译
- 长口播段落中的节奏填充
- 缩短的全屏或分屏 beat 之后的跟进卡片
规则：
- 下三分之一保持在画面下三分之一或下半部分。
- 避免遮挡面部。
- 使用简洁文本：一个标题加可选短副标题，或 2-4 项列表。
- 每个主题区间优先使用一张卡片，而非许多微小闪现。
- 除非用户要求设计变更，否则保留现有玻璃卡片风格。
节奏启发式
针对长视频 YouTube 口播视频：
- 视频早期：避免超过 20-30 秒没有视觉 beat。
- 主体部分：避免超过 30-45 秒没有 beat。
- 密集解释部分：大约每个主题区间使用下三分之一，而非每句话。
- 大型纸张接管应偶尔作为标点，而非默认方式。
- 如果现有 beat 因感觉过长而被手动缩短，尊重该决定，并在其后用更短的新卡片填充。
扫描排期时，报告真实可见性排期中的空白，而非仅 DOM 顺序。如果根时间线使用 SHOW 数组，那通常是权威可见范围。
定时方法
每个 beat 按转录主题定时：
- 找到主题开始的第一个词或短语。
- 尽可能在该锚点前 0.2-0.6 秒启动 beat。
- 保持 beat 可见直到主题结束或自然交接。
- 如果下一个 beat 立即开始，除非有意交接，否则提前 0.1-0.5 秒清除。
- 将子元素入场与口头短语匹配。
避免以下失败模式：
- 卡片出现在正确主题上，但只持续 5-8 秒，而讲话者继续讨论该主题 20-40 秒。
优先：
- 一张卡片贯穿整个主题，随着叙述推进，中途构建副标题或列表项。
内容撰写
为扫视理解而写。观众应在不到一秒内理解卡片。
使用：
- 简短名词短语
- 直接标签
- 每卡一个心智模型
- 仅在数字有意义时使用
- 动词用于澄清动作
避免：
- 重复整个旁白
- 长句
- 模糊的炒作语言
- 过多高亮词
- 在图形内解释如何使用视频
良好模式：
The bottleneck
Not enough AI inside real workflows.
The problem is adoption, not raw talent.
The bridge
Skills + Workflows = 40 hrs saved
In this video
-> The study
-> The stats
-> The paths you can take
-> What actually matters
视觉风格规则
首先遵循本地设计系统。对于此项目家族，使用：
- 严肃专业的排版。
- 纸张 beat 上使用黑色主文本。
- 强调蓝仅用于主要数据数字或罕见的力量词。
- 玻璃卡片使用现有深色磨砂风格。
- 下三分之一卡片不遮挡讲话者面部。
纸张 beat：
- 使用黑色用于 kicker、标签、箭头、来源、引言与支撑文本。
- 保持克制的字重。
- 除非用户明确要求，避免过大的活泼字体。
- 使皱纸运动具有确定性。
玻璃卡片：
- 复用
.glass-card dim lower-third或最接近的现有类。 - 优先底部居中放置。
- 保持卡片紧凑。
- 当想法具有结构性时，使用方程/列表辅助元素。
HyperFrames 实现规则
遵循项目 AGENTS.md 与 HyperFrames lint 规则：
- 每个挂载的定时元素需要
data-start、data-duration与data-track-index。 - 可见的定时根挂载元素应具有项目使用的预期 clip/layer 类。
- 子合成应在
window.__timelines上注册暂停的 GSAP 时间线。 - 使用
tl.set({}, {}, SLOT);固定每个子合成时间线。 - 只保留确定性逻辑。
- 不要以可能冻结渲染的方式动画化视频元素尺寸或媒体属性。
- 编辑 HTML 后运行
npx hyperframes lint。
添加 beat 时：
- 创建
compositions/beats/NNN-short-name.html。 - 在
index.html中添加根挂载。 - 如果存在主可见性排期，添加或更新它。
- 使子合成
SLOT与挂载时长匹配。 - 验证没有同轨道重叠，除非项目有意使用多个叠加轨道。
覆盖扫描
编辑后，扫描主排期：
- 按可见开始时间列出 beat。
- 打印超过目标阈值的空白。
- 仅在转录有可支撑概念处添加或重新定时 beat。
对于此项目模式，使用 30 秒作为严格扫描阈值，45 秒作为主体部分最大可接受阈值。
验证
完成前：
- 运行 HyperFrames linter。
- 修复所有错误。
- 如果已知且非阻塞，单独提及警告。
- 如果用户要求渲染就绪输出，酌情渲染或冒烟渲染。
- 给用户确切更改的文件路径与时间戳。
实用默认值
除非项目上下文另有说明，使用以下默认值：
- 全屏纸张概览：8-10 秒。
- 全屏纸张数据：5-8 秒。
- 玻璃下三分之一解释：12-30 秒。
- 长主题玻璃卡片：25-45 秒，带交错子元素。
- Beat 起始提前量：0.2-0.6 秒。
- 空白扫描阈值：30 秒。
- 下三分之一宽度：约 68-72vw，最大约 1240-1280px。
需要保留的内容
保留审查中发现的用户品味决定：
- 如果用户说某个 beat 太长，不要仅为满足通用覆盖规则而恢复它。
- 如果玻璃卡片风格已获批准，复用而非重新设计。
- 如果排版已获批准，保持稳定，仅调整局部尺寸/字重。
- 如果讲话者面部重要，优先下三分之一卡片而非中心屏幕卡片。