hyperframes-video-beats

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

HyperFrames Video Beats

HyperFrames 视频节拍

Use this skill to turn a talking-head video plus transcript into a paced set of motion graphics that support the narration without covering the speaker unnecessarily.

使用此 skill，将口播视频与转录稿转换为一组节奏分明的动态图形，在不过度遮挡演讲者的前提下为叙述提供支持。

Core Goal

核心目标

Keep the viewer oriented and engaged. Every beat must answer one of these:

What should the viewer remember?
What concept needs visual structure?
What stat, contrast, or pivot deserves emphasis?
Where is the pacing getting quiet enough that the viewer may drift?

Do not add graphics just because a gap exists. Add graphics because the narration has a topic, transition, proof point, or mental model that benefits from visual support.

让观众保持方向感并持续投入。每个节拍都必须回答以下问题之一：

观众应该记住什么？
哪个概念需要视觉化结构？
哪个数据、对比或转折值得强调？
哪些地方的节奏过于平淡，可能让观众走神？

不要仅仅因为存在空档就添加图形。只有当叙述中的主题、转场、证据点或思维模型能够从视觉支持中受益时，才添加图形。

First Pass

第一轮检查

Read project instructions (
```
AGENTS.md
```
, local skill docs, and project-specific notes).
Inspect the root composition, current beat schedule, shared CSS, and transcript.
Build a coverage map from the root
```
data-start
```
/
```
data-duration
```
entries or the master
```
SHOW
```
array.
Extract transcript chunks for any requested region and any uncovered gaps.
Identify topic spans by narration, not by arbitrary timestamps.
Decide whether each topic needs a full-screen paper beat, a lower-third glass card, or no new beat.

Use fast local commands. Prefer

rg

Select-String

, and small Node/PowerShell transcript scripts.

阅读项目说明（
```
AGENTS.md
```
、本地 skill 文档及项目专属说明）。
检查根合成、当前节拍时间表、共享 CSS 和转录稿。
根据根级
```
data-start
```
/
```
data-duration
```
条目或主
```
SHOW
```
数组构建覆盖图。
提取用户要求区域以及所有未覆盖空档对应的转录稿片段。
根据叙述内容而非随意设定的时间戳识别主题片段。
判断每个主题适合使用全屏纸张节拍、玻璃拟态下三分之一信息条，还是不新增节拍。

使用快速本地命令。优先使用

rg

、

Select-String

和小型 Node/PowerShell 转录稿脚本。

Beat Type Decision

节拍类型决策

Use Full-Screen Crumpled Paper

使用全屏揉皱纸张

Use a paper takeover when the narration reaches a major thesis, list, section marker, quote, or stat that should briefly become the whole frame.

Good uses:

Hook payoff or "in this video" overview
Major section transition
Big stat or study result
Memorable thesis line
Short quote or mantra
Contrast that needs the audience to stop and look

Rules:

Keep it short, usually 4-12 seconds.
Use sparse black text.
Let only true stat numbers or one extremely important word use accent color.
Do not cover long explanations with paper takeovers.
Do not make full-screen text playful, huge, or over-bold by default.

当叙述进入需要短暂占据整个画面的核心论点、清单、章节标记、引语或数据时，使用纸张接管画面。

适用场景：

开场钩子揭晓或“本视频概览”
重要章节转场
醒目的数据或研究结果
值得记住的核心论点
简短引语或口头箴言
需要让观众停下来关注的强烈对比

规则：

保持简短，通常为 4–12 秒。
使用稀疏的黑色文字。
仅让真正的统计数字或一个极其重要的词使用强调色。
不要使用纸张接管画面承载长篇解释。
默认不要将全屏文字设计得过于俏皮、巨大或粗重。

Use Glassmorphism Lower Third

使用玻璃拟态下三分之一信息条

Use a glass lower-third when the speaker should remain visible and the graphic should support the current idea.

Good uses:

Explanation scaffolds
Topic labels
Equation-style mental models
Small lists
"What this means" translations
Pacing fills during long talking-head stretches
Follow-up cards after a shortened full-screen or split-screen beat

Rules:

Keep lower thirds in the lower third or lower half.
Avoid covering the face.
Use concise text: one headline plus optional short subline, or a 2-4 item list.
Prefer one card per topic span over many tiny flashes.
Preserve the existing glass-card style unless the user asks for a design change.

当演讲者应保持可见，且图形用于辅助当前观点时，使用玻璃拟态下三分之一信息条。

适用场景：

解释框架
主题标签
类公式思维模型
小型清单
“这意味着什么”式转译
在长时间口播段落中填补节奏空档
在缩短后的全屏或分屏节拍之后，用后续卡片承接内容

规则：

将下三分之一信息条放在画面下三分之一或下半部分。
避免遮挡演讲者的面部。
使用简洁文字：一个标题加可选的简短副标题，或一个包含 2–4 项的清单。
每个主题片段优先使用一张卡片，而不是大量短暂闪现的小卡片。
除非用户要求更改设计，否则保留现有的玻璃卡片风格。

Pacing Heuristics

节奏启发式规则

For long-form YouTube talking-head videos:

Early video: avoid more than 20-30 seconds without a visual beat.
Main body: avoid more than 30-45 seconds without a beat.
Dense explanation sections: use lower thirds roughly every topic span, not every sentence.
Big paper takeovers should be occasional punctuation, not the default.
If an existing beat was manually shortened because it felt too long, respect that choice and fill after it with a new shorter card.

When scanning a schedule, report true gaps from the visibility schedule, not just the DOM order. If the root timeline uses a

SHOW

array, that is usually the authoritative visible range.

对于长篇 YouTube 口播视频：

视频早期：避免出现超过 20–30 秒没有视觉节拍的空档。
主体部分：避免出现超过 30–45 秒没有视觉节拍的空档。
密集解释部分：大致每个主题片段使用一张下三分之一信息条，而不是每句话都使用。
大型纸张接管画面应偶尔用于标点式停顿，而不应成为默认方案。
如果现有节拍因感觉过长而被手动缩短，应尊重这一决定，并在其后用一张新的短卡片填补空档。

扫描时间表时，应根据可见性时间表报告真实空档，而不只是依据 DOM 顺序。如果根时间线使用

SHOW

数组，该数组通常就是权威的可见范围。

Timing Method

定时方法

Time every beat to the transcript topic:

Find the first word or phrase where the topic starts.
Start the beat 0.2-0.6 seconds before that anchor when possible.
Keep the beat visible until the topic ends or naturally hands off.
If the next beat begins immediately, clear 0.1-0.5 seconds before it unless the handoff is intentional.
Match sub-element entrances to spoken phrases.

Avoid this failure mode:

Card appears on the right topic but only lasts 5-8 seconds while the speaker keeps discussing the topic for 20-40 seconds.

Prefer:

One card lives across the whole topic, with a subline or list item building midway through if the narration evolves.

根据转录稿中的主题为每个节拍定时：

找到主题开始的第一个词或短语。
如有可能，在该锚点前 0.2–0.6 秒开始节拍。
保持节拍可见，直至主题结束或自然交接。
如果下一个节拍紧接着开始，则在其开始前留出 0.1–0.5 秒空档，除非刻意进行无缝衔接。
让子元素的入场时机与口播短语同步。

避免出现以下问题：

卡片出现在正确的主题上，但只持续 5–8 秒，而演讲者继续讨论该主题长达 20–40 秒。

更推荐：

同一张卡片贯穿整个主题；如果叙述在过程中发展，可在中途逐步加入副标题或清单项。

Content Writing

内容文案

Write for glance comprehension. The viewer should understand the card in under one second.

Use:

Short noun phrases
Direct labels
One mental model per card
Numbers only when they are meaningful
Verbs when they clarify the action

Avoid:

Repeating the whole voiceover
Long sentences
Vague hype language
Too many highlighted words
Explaining how to use the video inside the graphic

Good patterns:

text

The bottleneck
Not enough AI inside real workflows.
The problem is adoption, not raw talent.

text

The bridge
Skills + Workflows = 40 hrs saved

text

In this video
-> The study
-> The stats
-> The paths you can take
-> What actually matters

文案应以快速扫读即可理解为目标。观众应能在不到一秒的时间内理解卡片内容。

使用：

简短名词短语
直接标签
每张卡片只呈现一个思维模型
仅在数字具有实际意义时使用数字
在动词有助于说明动作时使用动词

避免：

复述完整的旁白内容
长句
含糊且夸张的宣传语言
过多高亮词语
在图形中解释如何使用视频

推荐模式：

text

The bottleneck
Not enough AI inside real workflows.
The problem is adoption, not raw talent.

text

The bridge
Skills + Workflows = 40 hrs saved

text

In this video
-> The study
-> The stats
-> The paths you can take
-> What actually matters

Visual Style Rules

视觉样式规则

Follow the local design system first. For this project family, use:

Serious professional typography.
Black primary text on paper beats.
Accent blue only for major stat numbers or rare power words.
Glass cards with the existing dark frosted style.
Lower-third cards that do not cover the speaker's face.

For paper beats:

Use black for kickers, labels, arrows, sources, quotes, and supporting text.
Keep font weight restrained.
Avoid oversized playful type unless the user explicitly asks for it.
Make the crumpled-paper motion deterministic.

For glass cards:

Reuse
```
.glass-card dim lower-third
```
or the closest existing class.
Prefer bottom-center placement.
Keep cards compact.
Use equation/list helpers when the idea is structural.

首先遵循本地设计系统。对于这一项目系列，使用：

严肃、专业的字体排印。
纸张节拍的主要文字使用黑色。
强调蓝仅用于重大统计数字或极少数重点词。
玻璃卡片沿用现有的深色磨砂风格。
下三分之一卡片不得遮挡演讲者的面部。

对于纸张节拍：

引导标题、标签、箭头、来源、引语和辅助文字均使用黑色。
控制字重。
除非用户明确要求，否则避免使用超大且俏皮的字体样式。
揉皱纸张动画应采用确定性实现。

对于玻璃卡片：

复用
```
.glass-card dim lower-third
```
或最接近的现有类。
优先放置在底部中央。
保持卡片紧凑。
当观点具有结构性时，使用公式或列表辅助形式。

HyperFrames Implementation Rules

HyperFrames 实现规则

Follow project

AGENTS.md

and HyperFrames lint rules:

Every mounted timed element needs
```
data-start
```
,
```
data-duration
```
, and
```
data-track-index
```
.
Visible timed root-mounted elements should have the expected clip/layer class used by the project.
Sub-compositions should register a paused GSAP timeline on
```
window.__timelines
```
.
Pin each sub-composition timeline with
```
tl.set({}, {}, SLOT);
```
.
Keep deterministic logic only.
Do not animate video element dimensions or media properties in ways that can freeze renders.
Run
```
npx hyperframes lint
```
after editing HTML.

When adding a beat:

Create
```
compositions/beats/NNN-short-name.html
```
.
Add the root mount in
```
index.html
```
.
Add or update the master visibility schedule if one exists.
Make the sub-composition
```
SLOT
```
match the mounted duration.
Verify no same-track overlaps unless the project intentionally uses multiple overlay tracks.

遵循项目

AGENTS.md

和 HyperFrames lint 规则：

每个已挂载的定时元素都需要
```
data-start
```
、
```
data-duration
```
和
```
data-track-index
```
。
对可见的、挂载在根级的定时元素，应使用项目预期的 clip/layer 类。
子合成应在
```
window.__timelines
```
上注册一个已暂停的 GSAP 时间线。
使用
```
tl.set({}, {}, SLOT);
```
固定每个子合成时间线。
仅使用确定性逻辑。
不要以可能导致渲染卡死的方式对视频元素尺寸或媒体属性设置动画。
编辑 HTML 后，运行
```
npx hyperframes lint
```
。

添加节拍时：

创建
```
compositions/beats/NNN-short-name.html
```
。
在
```
index.html
```
中添加根挂载。
如果存在主可见性时间表，则添加或更新它。
使子合成的
```
SLOT
```
与挂载时长一致。
验证不存在同一轨道上的重叠，除非项目有意使用多个叠加轨道。

Coverage Scan

覆盖扫描

After edits, scan the master schedule:

List beats sorted by visible start.
Print gaps over the target threshold.
Add or retime beats only where the transcript has a supportable concept.

For this project pattern, use 30 seconds as the strict scan threshold and 45 seconds as the maximum acceptable main-body threshold.

编辑完成后，扫描主时间表：

按可见开始时间列出节拍。
输出超过目标阈值的空档。
仅在转录稿具有明确概念依据的位置添加或重新定时节拍。

对于这种项目模式，使用 30 秒作为严格扫描阈值，使用 45 秒作为主体部分可接受的最大阈值。

Validation

验证

Before finishing:

Run the HyperFrames linter.
Fix all errors.
Mention warnings separately if they are known and non-blocking.
If the user asked for render-ready output, render or smoke-render as appropriate.
Give the user exact file paths and timestamps changed.

完成前：

运行 HyperFrames linter。
修复所有错误。
如果警告已知且不会阻塞流程，则单独说明。
如果用户要求可直接用于渲染的输出，则根据情况执行渲染或冒烟渲染。
向用户提供修改过的准确文件路径和时间戳。

Practical Defaults

实用默认值

Use these defaults unless project context says otherwise:

Full-screen paper overview: 8-10 seconds.
Full-screen paper stat: 5-8 seconds.
Glass lower-third explanation: 12-30 seconds.
Long topic glass card: 25-45 seconds with staggered sub-elements.
Beat start lead-in: 0.2-0.6 seconds.
Gap scan threshold: 30 seconds.
Lower-third width: about 68-72vw, max about 1240-1280px.

除非项目上下文另有说明，否则使用以下默认值：

全屏纸张概览：8–10 秒。
全屏纸张数据：5–8 秒。
玻璃拟态下三分之一解释卡片：12–30 秒。
长主题玻璃卡片：25–45 秒，并错开加入子元素。
节拍开始提前量：0.2–0.6 秒。
空档扫描阈值：30 秒。
下三分之一信息条宽度：约为 68–72vw，最大约为 1240–1280px。

What To Preserve

需要保留的内容

Preserve user taste decisions discovered during review:

If the user says a beat is too long, do not restore it just to satisfy a generic coverage rule.
If glass card style is approved, reuse it instead of redesigning it.
If typography is approved, keep it stable and adjust only local sizing/weight.
If the speaker's face is important, prefer lower-third cards over center-screen cards.

保留在审查过程中发现的用户审美偏好：

如果用户表示某个节拍过长，不要仅为了满足通用的覆盖规则而将其恢复。
如果玻璃卡片风格已获认可，应复用该风格，而不是重新设计。
如果字体排印已获认可，应保持稳定，仅调整局部尺寸或字重。
如果演讲者的面部很重要，应优先使用下三分之一卡片，而不是居中卡片。