词元广场TOKPUB.COM - 欢迎您，支持一个 Key 调用近 600+ 海内外模型，限时特价模型低至 1 折，欢迎上岸！
"Hyperframes"
Hyperframes
技能元数据
| 来源 | 可选 — 通过 hermes skills install official/creative/hyperframes 安装 |
| 路径 | optional-skills/creative/hyperframes |
| 版本 | 1.0.0 |
| 作者 | heygen-com |
| 许可证 | Apache-2.0 |
| 平台 | linux, macos, windows |
| 标签 | creative, video, animation, html, gsap, motion-graphics |
| 相关技能 | manim-video, meme-generation |
参考：完整 SKILL.md
信息
HyperFrames
data-* 属性用于计时、GSAP 时间轴用于动画、CSS 用于外观的 HTML 文件。HyperFrames 引擎逐帧捕获页面，并通过 FFmpeg 编码为 MP4/WebM。manim-video 的互补关系： 数学/几何讲解（方程式、3B1B 风格）使用 manim-video。动态图形、带字幕的对话视频、产品演示、社交叠加层、着色器转场，以及任何由真实视频/音频媒体驱动的内容使用 hyperframes。使用场景
manim-video）meme-generation，图像模型）快速参考
--quality draft|standard|high · --fps 24|30|60 · --format mp4|webm · --docker（可复现）· --strict。初始设置（一次性）
1.
2.
hyperframes CLI（npm install -g hyperframes@>=0.4.2）。3.
chrome-headless-shell — 必需，用于通过 Chrome 的 HeadlessExperimental.beginFrame 捕获路径实现最高质量渲染。4.
npx hyperframes doctor 并报告结果。操作流程
1. 编写 HTML 前先规划
#333、#3b82f6、Roboto 是跳过此步骤的明显标志）。按顺序检查：1.
DESIGN.md？ → 使用其中精确的颜色、字体、动态规则和"禁止事项"约束。2.
## Style Prompt、## Colors（3-5 个带角色的十六进制色值）、## Typography（1-2 个字体族）、## What NOT to Do（3-5 个反模式）的最小 DESIGN.md。3.
DESIGN.md。每个合成的调色板和排版都必须追溯到 DESIGN.md 或用户的明确指示。2. 初始化脚手架
blank、warm-grain、play-mode、swiss-grid、vignelli、decision-tree、kinetic-type、product-promo、nyt-graph。传入 --example <name> 选择模板，--video clip.mp4 或 --audio track.mp3 以媒体文件为起点。3. 先布局，后动画
.scene-content 容器必须填满场景（width:100%; height:100%; padding:Npx），使用 display:flex + gap。用 padding 将内容向内推 — 永远不要在内容容器上使用 position: absolute; top: Npx（内容高于剩余空间时会溢出）。gsap.from() 入场动画（向 CSS 位置动画）和 gsap.to() 退场动画（从 CSS 位置动画）。4. 使用 GSAP 制作动画
window.__timelines["<composition-id>"] = tlgsap.timeline({ paused: true }) — 播放器控制播放repeat 值（禁止 repeat: -1 — 会破坏捕获引擎）。计算方式：repeat: Math.ceil(duration / cycleDuration) - 1。Math.random()、Date.now() 或挂钟逻辑。如需伪随机数，使用带种子的 PRNG。async/await、setTimeout 或 Promise。5. 场景间转场
1.
2.
gsap.from(...)）。3.
4.
npx hyperframes add <transition-name> 安装着色器转场（flash-through-white、liquid-wipe 等）。完整列表：npx hyperframes add --list。6. 音频、字幕、TTS、音频响应、高亮
<audio> 元素（视频使用 muted playsinline）。npx hyperframes tts "脚本文本" --voice af_nova --output narration.wav。使用 --list 列出可用音色。音色 ID 首字母编码语言（a/b=英语，e=西班牙语，f=法语，j=日语，z=普通话等）— CLI 自动推断音素化（phonemizer）语言环境；仅在需要覆盖时传入 --lang。非英语音素化需要系统级安装 espeak-ng。npx hyperframes transcribe narration.wav → 词级转录。根据转录内容的语气选择样式（hype / corporate / tutorial / storytelling / social — 见 references/features.md 中的表格）。语言规则： 除非确认音频为英语，否则永远不要使用 .en whisper 模型 — .en 会将非英语音频翻译而非转录。每个字幕组在其退出 tween 之后必须有一个硬性的 tl.set(el, { opacity: 0, visibility: "hidden" }, group.end) 清除 — 否则字幕组会泄漏到后续组中保持可见。for 循环的 tl.call(draw, [], f / fps) 逐帧采样 — 单个长 tween 不会响应音频。 将低频映射到 scale（脉冲），高频映射到 textShadow/boxShadow（发光），整体振幅映射到 opacity/y/backgroundColor。避免均衡器条形图的陈词滥调 — 让内容引导视觉，让音频驱动其行为。references/features.md#marker-highlighting。完全可寻址，无动画 SVG 滤镜。flash-through-white、liquid-wipe、cross-warp-morph、chromatic-split 等，通过 npx hyperframes add 安装）中选择。氛围和能量对照表见 references/features.md#transitions。同一合成中不得混用 CSS 转场和着色器转场。7. Lint、验证、检查、预览、渲染
hyperframes validate 对每个文字元素后方的背景像素进行采样，并对对比度低于 4.5:1（大文字为 3:1）的情况发出警告。hyperframes inspect 是布局侧的配套工具 — 在多个时间戳运行页面，标记静态 lint 无法发现的问题（仅在 4.5s 时超出安全区域的字幕换行、标题为最长变体时溢出的卡片、被转场着色器遮挡的元素）。对于包含对话气泡、卡片、字幕或紧凑排版的合成，务必运行 inspect。8. 网站转视频（若用户提供 URL）
常见陷阱
HeadlessExperimental.beginFrame' wasn't found — Chromium 147+ 移除了此协议。确保使用 hyperframes@>=0.4.2（自动检测并回退到截图模式）。应急方案：export PRODUCER_FORCE_SCREENSHOT=true。参见 hyperframes#294 和 references/troubleshooting.md。chrome-headless-shell） — 渲染会挂起 120 秒后超时。运行 npx puppeteer browsers install chrome-headless-shell（setup.sh 已处理此步骤）。hyperframes doctor 会报告将使用哪个二进制文件。repeat: -1 — 会破坏捕获引擎。始终计算有限的 repeat 次数。gsap.set() — 页面加载时该元素不存在。改为在时间轴内使用 tl.set(selector, vars, timePosition)，位置在该 clip 的 data-start 处或之后。<br/> — 强制换行不了解渲染字体宽度，导致自然换行 + <br/> 双重换行。使用 max-width 让文字自然换行。例外：每个单词刻意独占一行的短展示标题。visibility 或 display 进行动画 — GSAP 无法对这些属性进行 tween。使用 autoAlpha（同时处理 visibility 和 opacity）。video.play() 或 audio.play() — 框架拥有播放控制权。永远不要自行调用这些方法。window.__timelines。永远不要将时间轴构建包裹在 async、setTimeout 或 Promise 中。index.html 包裹在 <template> 中 — 会对浏览器隐藏所有内容。只有通过 data-composition-src 加载的子合成才使用 <template>。<video> + 独立的 <audio>。验证
1.
npx hyperframes lint --strict && npx hyperframes validate && npx hyperframes inspect（lint 捕获结构问题，validate 捕获对比度问题，inspect 捕获视觉布局/溢出问题 — 若出现警告请参阅 troubleshooting.md）。2.
npx hyperframes init 会将技能脚本复制到项目中，因此路径为项目本地路径：animation-map.json，包含每个 tween 的摘要、ASCII 甘特时间轴、stagger 检测、死区（超过 1 秒无动画）、元素生命周期和标记（offscreen、collision、invisible、paced-fast <0.2s、paced-slow >2s）。扫描摘要和标记 — 逐一修复或说明原因。小幅编辑可跳过。3.
ls -lh final.mp4。4.
data-duration 匹配： ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 final.mp4。5.
ffmpeg -i final.mp4 -ss 00:00:05 -vframes 1 preview.png。6.
ffprobe -v error -show_streams -select_streams a -of default=nw=1:nk=1 final.mp4 | head -1。hyperframes render 失败，运行 npx hyperframes doctor 并在报告问题时附上其输出。