关于 hyperframes-video-beats
HyperFrames Video Beats 是用于规划和制作对话式视频定时动态图形的技能，将旁白主题对应到视觉形式，并指导时间安排、HyperFrames 结构和验证。
主要功能
- 01将转录主题映射为视觉节拍
- 02选择纸张全屏或玻璃质感下三分之一
- 03按口述主题安排节拍时间
- 04制作定时 HyperFrames 合成内容
- 05检查节拍覆盖并运行 lint
适用场景
- 01为对话式讲解添加图形
- 02突出关键统计数据或转折
- 03查找节拍安排中的长间隔
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/hyperframes-video-beats确认已加载。
附带文件agents/openai.yaml
详细介绍
HyperFrames Video Beats
使用这项技能，将出镜讲解视频和文字稿转化为节奏鲜明的一组动态图形，在辅助旁白的同时，避免不必要地遮挡讲述者。
核心目标
让观众始终了解内容脉络并保持投入。每个节拍都必须回答以下问题之一：
- 观众应该记住什么？
- 哪个概念需要用视觉结构呈现？
- 哪个统计数据、对比或转折值得强调？
- 哪些地方的节奏变得足够平缓，可能让观众走神？
不要因为有空白就添加图形。只有当旁白涉及主题、转场、论据或适合视觉辅助的思维模型时，才添加图形。
第一轮检查
- 阅读项目说明（
AGENTS.md、本地技能文档和项目专属备注）。 - 检查根合成、当前节拍安排、共享 CSS 和文字稿。
- 根据根目录中的
data-start/data-duration条目或主SHOW数组，绘制覆盖范围图。 - 提取所请求片段和未覆盖空档的文字稿片段。
- 根据旁白识别主题片段，而不是根据任意时间戳划分。
- 判断每个主题是否需要全屏纸张节拍、玻璃拟态下三分之一屏卡片，或无需添加新节拍。
使用快速的本地命令。优先使用 rg、Select-String 和小型 Node/PowerShell 文字稿脚本。
节拍类型决策
使用全屏皱纸效果
当旁白进入一个重要论点、列表、章节标记、引言或统计数据，值得短暂占据整个画面时，使用纸张全屏转场。
适用场景：
- 开场钩子的回报，或“本视频内容”概览
- 重要章节转场
- 关键统计数据或研究结果
- 易于记住的论点
- 简短引言或箴言
- 需要观众停下来关注的对比
规则：
- 保持简短，通常为 4–12 秒。
- 使用简洁的黑色文字。
- 只有真正的统计数字或一个极其重要的词语才使用强调色。
- 不要用纸张全屏转场覆盖冗长的解释。
- 默认不要让全屏文字显得俏皮、过大或过度加粗。
使用玻璃拟态下三分之一屏
当需要让讲述者保持可见，并用图形辅助当前观点时，使用玻璃拟态下三分之一屏卡片。
适用场景：
- 解释框架
- 主题标签
- 方程式风格的思维模型
- 简短列表
- “这意味着什么”的解读
- 为较长的出镜讲解片段填充节奏
- 缩短的全屏或分屏节拍之后的补充卡片
规则：
- 将下三分之一屏卡片放在画面下方三分之一处或下半部。
- 避免遮挡面部。
- 文字要简洁：一个标题加可选的简短副标题，或一个包含 2–4 项的列表。
- 每个主题片段优先使用一张卡片，而不是连续闪现许多小卡片。
- 除非用户要求更改设计，否则保留现有的玻璃卡片风格。
节奏启发式
对于长篇 YouTube 出镜讲解视频：
- 视频前段：避免超过 20–30 秒没有视觉节拍。
- 主体部分：避免超过 30–45 秒没有节拍。
- 内容密集的解释部分：大致每个主题片段使用一次下三分之一屏卡片，而不是每句话都用。
- 大幅纸张全屏转场应偶尔用作点睛，而不是默认做法。
- 如果现有节拍曾因显得过长而被手动缩短，请尊重这一选择，并在其后添加一张更短的新卡片来填补。
扫描节拍安排时，应根据可见时间安排报告实际空档，而不只是根据 DOM 顺序判断。如果根时间线使用 SHOW 数组，通常应以该数组指定的可见范围为准。
时间安排方法
根据转录内容中的主题，为每个节拍安排时间：
- 找出主题开始处的第一个词或短语。
- 尽可能在该锚点前 0.2-0.6 秒开始节拍。
- 让节拍持续显示，直到主题结束或自然过渡到下一主题。
- 如果下一个节拍紧接着开始，则提前 0.1-0.5 秒清除当前节拍，除非这是有意的衔接。
- 让子元素的入场与口播短语相匹配。
避免以下问题：
- 卡片出现时主题没错，但只持续 5-8 秒，而发言者仍在讨论该主题，持续 20-40 秒。
建议：
- 一张卡片贯穿整个主题；如果叙述内容有所发展，可在中途添加副标题或列表项。
内容撰写
以便于快速理解为目标。观众应能在不到 1 秒内看懂卡片。
使用：
- 简短的名词短语
- 直接的标签
- 每张卡片只呈现一个思维模型
- 仅在数字有意义时使用数字
- 能清楚说明操作时使用动词
避免：
- 重复整段画外音
- 长句
- 含糊夸张的措辞
- 过多高亮词语
- 在图形中解释如何使用视频
良好范例：
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
视觉风格规则
首先遵循本地设计系统。对于这一系列项目，请使用：
- 严肃、专业的字体排版。
- 纸张节拍使用黑色主文字。
- 强调蓝色仅用于重要统计数字或少数有力词语。
- 玻璃卡片采用现有的深色磨砂风格。
- 下三分之一卡片不得遮挡发言者的脸。
纸张节拍：
- 标签、引导语、箭头、来源、引文和辅助文字使用黑色。
- 字重保持克制。
- 除非用户明确要求，否则避免使用过大、活泼的字体。
- 确保皱纸动画具有确定性。
玻璃卡片：
- 复用
.glass-card dim lower-third或最接近的现有类。 - 优先放置在底部居中位置。
- 卡片保持紧凑。
- 表达结构性概念时使用公式／列表辅助组件。
HyperFrames 实现规则
遵循项目的 AGENTS.md 和 HyperFrames lint 规则：
- 每个已挂载的定时元素都需要
data-start、data-duration和data-track-index。 - 可见的定时根挂载元素应具有项目使用的预期片段／图层类。
- 子合成应在
window.__timelines上注册一个暂停的 GSAP 时间轴。 - 使用
tl.set({}, {}, SLOT);固定每个子合成的时间轴。 - 仅保留确定性逻辑。
- 不要以可能导致渲染冻结的方式为视频元素尺寸或媒体属性添加动画。
- 编辑 HTML 后运行
npx hyperframes lint。
添加节拍时：
- 创建
compositions/beats/NNN-short-name.html。 - 在
index.html中添加根挂载。 - 如果存在主可见性时间表，则添加或更新它。
- 让子合成的
SLOT与挂载时长一致。 - 确认同一轨道上没有重叠，除非项目有意使用多个叠加轨道。
覆盖范围扫描
编辑完成后，扫描主时间表：
- 按可见开始时间列出节拍。
- 打印超过目标阈值的间隙。
- 仅在转录内容有依据支持时添加或调整节拍。
对于此项目模式，严格扫描阈值设为 30 秒，主体内容的最大可接受阈值设为 45 秒。
验证
完成前：
- 运行 HyperFrames 检查器。
- 修复所有错误。
- 如果有已知且不阻塞的问题，单独说明警告。
- 如果用户要求可直接渲染的输出，则根据需要进行渲染或冒烟渲染。
- 告知用户具体修改的文件路径和时间戳。
实用默认值
除非项目上下文另有要求，否则使用以下默认值：
- 全屏纸张概览：8-10 秒。
- 全屏纸张统计：5-8 秒。
- 玻璃下三分之一说明：12-30 秒。
- 长主题玻璃卡片：25-45 秒，子元素分阶段出现。
- 节拍提前量：0.2-0.6 秒。
- 间隙扫描阈值：30 秒。
- 下三分之一宽度：约 68-72vw，最大约 1240-1280px。
需要保留的内容
保留审核过程中发现的用户偏好决定：
- 如果用户说某个镜头节奏太长，不要仅仅为了满足通用覆盖规则而恢复它。
- 如果玻璃卡片样式已获认可，就继续使用，不要重新设计。
- 如果排版已获认可，就保持稳定，只调整局部字号或字重。
- 如果说话者的面部很重要，优先使用下三分之一位置的卡片，而不是屏幕中央的卡片。