首页 专区 Skill 文章 专题 AI工具 学习 编程手册

PHP MySQL jquery HTML CSS
首页 > Skill > 设计多媒体

hyperframes-超帧视频

Polar Sponsor
爱发电 赞助
.NET 9.0
立即下载

HTML 驱动的视频合成——GSAP 动画、TTS 字幕、音频响应、着色器转场

HyperFrames.

功能概述

HyperFrames.是一项面向实际任务的技能，主要用于ALHTML是视频的真谛源.；A组成是HTML文件,具有数据*属性的定时,动画的GSAP时程,以及显示的CSS. .；

核心要点

  • HyperFrames引擎.。
  • 它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
  • 使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。

使用与执行

该技能适合需要稳定复用相关能力的场景，可作为自动化工作流的一部分，也便于后续检查、调整和扩展。从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；

结果检查与注意事项

若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。

HyperFrames

HTML 是视频的唯一真实来源。一个“合成（composition）”即是一个 HTML 文件，其中通过 data-* 属性定义时间点、使用 GSAP 时间轴实现动画、并借助 CSS 控制视觉样式。HyperFrames 引擎逐帧捕获页面，并利用 FFmpeg 编码为 MP4/WebM 视频。

与 manim-video 互补：对数学/几何类讲解内容（如公式推导、3B1B 风格动画），请使用 manim-video；对动态图形、带字幕的出镜口播、产品导览、社交平台叠加层、着色器转场等一切以真实音视频媒体为驱动的场景，请使用 hyperframes。

适用场景

  • 用户要求将文本、脚本或网页渲染为视频
  • 动态片头、下栏字幕（lower thirds）或排版式开场动画
  • 带字幕的旁白视频（TTS + 字幕与音频波形精准同步）
  • 音频响应式视觉效果（节拍同步、频谱柱状图、脉动辉光）
  • 场景间转场（淡入淡出、滑动擦除、着色器扭曲、白闪过渡）
  • 社交平台风格叠加层（Instagram / TikTok / YouTube 风格）
  • 网页转视频流水线（抓取指定 URL，生成宣传视频）
  • 任何需确定性地渲染为视频文件的 HTML/CSS/JS 动画

请不要在以下场景中使用本能力：

  • 纯数学/公式动画（→ 使用 manim-video）
  • 图像生成或表情包制作（→ 使用 meme-generation 或图像模型）
  • 实时音视频会议或流媒体传输

快速参考

npx hyperframes init my-video               # 初始化项目结构
cd my-video
npx hyperframes lint                        # 渲染前校验（语法、结构、时序）
npx hyperframes preview                     # 实时重载浏览器预览（端口 3002）
npx hyperframes render --output final.mp4   # 渲染为 MP4 视频
npx hyperframes doctor                      # 诊断环境问题

渲染参数：--quality draft|standard|high · --fps 24|30|60 · --format mp4|webm · --docker（保障可复现性）· --strict。

完整 CLI 参考文档见：references/cli.md。

环境配置（仅需一次）

bash "$(dirname "$(find ~/.hermes/skills -path '*/hyperframes/SKILL.md' 2>/dev/null | head -1)")/scripts/setup.sh"

该脚本执行以下操作：

  1. 验证 Node.js 版本 ≥ 22 且 FFmpeg 已安装（若未满足则输出修复指引）。
  2. 全局安装 hyperframes CLI（npm install -g hyperframes@>=0.4.2）。
  3. 通过 Puppeteer 预缓存 chrome-headless-shell —— 此为必需步骤，确保通过 Chrome 的 HeadlessExperimental.beginFrame 路径获得最佳渲染质量。
  4. 运行 npx hyperframes doctor 并报告结果。

若配置失败，请参阅 references/troubleshooting.md。

操作流程

1. 编写 HTML 前先规划

动笔编码前，请先从宏观层面明确以下四点：

  • 内容（What）——叙事主线、关键节点、情绪节奏
  • 结构（Structure）——合成单元划分、轨道（视频/音频/叠加层）、各段时长
  • 视觉识别体系（Visual identity）——配色方案、字体选择、动效气质（爆发感 / 电影感 / 流畅感 / 科技感）
  • 英雄帧（Hero frame）——每个场景中元素同时可见度最高的瞬间。这是你最先要构建的静态布局。

视觉识别体系关卡（HARD-GATE）。在编写任何合成 HTML 之前，必须明确定义视觉识别体系。禁止使用默认或通用配色（如 #333、#3b82f6、Roboto 等均为跳过此步骤的明显信号）。请按顺序核查：

  1. 项目根目录是否存在 DESIGN.md？ → 严格采用其中指定的配色、字体、动效规则及“禁止事项”约束。

  2. 用户是否指定了风格名称？（例如 “Swiss Pulse”、“暗黑科技风”、“奢侈品牌调性”）→ 生成最小化 DESIGN.md，包含 ## Style Prompt、## Colors（3–5 个带语义角色的十六进制色值）、## Typography（1–2 个字体族）、## What NOT to Do（3–5 条反模式）。

  3. 以上均不满足？ → 在编写任何 HTML 前，必须回答以下三个问题：

    • 整体情绪基调？（爆发感 / 电影感 / 流畅感 / 科技感 / 混乱感 / 温暖感）
    • 明色系还是暗色系画布？
    • 是否有品牌指定色、字体或视觉参考？

    再根据答案生成一份 DESIGN.md。所有合成必须能将其配色与字体溯源至 DESIGN.md 或用户明确指令。

2. 初始化项目

npx hyperframes init my-video --non-interactive

模板选项：blank、warm-grain、play-mode、swiss-grid、vignelli、decision-tree、kinetic-type、product-promo、nyt-graph。可通过 --example 指定模板；也可通过 --video clip.mp4 或 --audio track.mp3 注入初始音视频素材。

3. 先布局，后动画

请**首先编写英雄帧的静态 HTML+CSS**——暂勿引入 GSAP。容器 .scene-content 必须铺满整个场景（width:100%; height:100%; padding:Npx），并设置 display:flex + gap。使用 padding 向内缩进内容——切勿对内容容器使用 position: absolute; top: Npx（当内容高度超过剩余空间时将导致溢出）。

仅当英雄帧视觉效果确认无误后，再添加 gsap.from() 入场动画（动画目标为当前 CSS 定位）和 gsap.to() 退场动画（动画起点为当前 CSS 定位）。

完整 data-attribute 规范与合成规则详见 references/composition.md。

4. 使用 GSAP 实现动画

每个合成必须满足以下要求：

  • 注册其时间轴：window.__timelines[""] = tl
  • 初始化为暂停状态：gsap.timeline({ paused: true }) —— 播放由播放器统一控制
  • 使用有限的 repeat 值（禁用 repeat: -1，否则将破坏捕获引擎）。推荐计算方式：repeat: Math.ceil(duration / cycleDuration) - 1
  • 确保确定性 —— 禁止使用 Math.random()、Date.now() 或依赖系统时钟的逻辑；如需伪随机行为，请使用带种子的 PRNG。
  • 同步构建 —— 时间轴构造过程禁止使用 async/await、setTimeout 或 Promise。

核心 GSAP API（补间、缓动、错落、时间轴）详见 references/gsap.md。

5. 场景间转场

多场景合成必须包含转场。规则如下：

  1. 场景之间必须使用转场——禁止硬切（jump cut）。
  2. 每个场景元素必须使用入场动画（gsap.from(...)）。
  3. 除最终场景外，禁止使用退场动画——转场本身即承担退场功能。
  4. 最终场景可淡出。

使用 npx hyperframes add 安装着色器转场（如 flash-through-white、liquid-wipe 等）。完整列表请运行：npx hyperframes add --list。

6. 音频、字幕、TTS、音频响应式、高亮标记

  • 音频：始终使用独立的 元素（视频需设为 muted playsinline）。
  • TTS： 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 → 输出词级转录文本。根据转录语气选择字幕风格（亢奋型 / 企业型 / 教程型 / 叙事型 / 社交型 —— 对应风格表见 references/features.md）。语言规则：除非已确认音频为英语，否则禁止使用 .en Whisper 模型（.en 模型会对非英语音频进行翻译而非转录）。每组字幕在退出补间结束后，必须有明确的硬性销毁语句：tl.set(el, { opacity: 0, visibility: "hidden" }, group.end)；否则字幕组将残留显示于后续组中。
  • 音频响应式视觉：预先提取音频频段（低频 / 中频 / 高频），并在时间轴内通过 for 循环调用 tl.call(draw, [], f / fps) 进行逐帧采样——单个长补间无法响应音频变化。映射关系建议：低频 → scale（脉动）、高频 → textShadow/boxShadow（辉光）、整体振幅 → opacity/y/backgroundColor。避免俗套的均衡器柱状图；让内容决定视觉形式，音频驱动其行为。
  • 标记式高亮：用于文本强调的高亮、圈选、爆破、涂鸦、手绘描边等效果，均由确定性 CSS + GSAP 实现 —— 详见 references/features.md#marker-highlighting。完全支持时间轴寻址，不依赖动画 SVG 滤镜。
  • 场景转场：所有多场景合成必须使用转场（禁止硬切）。可选用 CSS 基础转场（推入滑动、模糊淡入、缩放穿透、错落方块）或着色器转场（flash-through-white、liquid-wipe、cross-warp-morph、chromatic-split 等），通过 npx hyperframes add 安装。情绪与能量匹配表详见 references/features.md#transitions。同一合成中禁止混用 CSS 与着色器转场。

7. 校验、验证、审查、预览、渲染

npx hyperframes lint              # 检测缺失的 data-composition-id、轨道重叠、未注册的时间轴
npx hyperframes validate          # 在 5 个时间戳点执行 WCAG 对比度审计
npx hyperframes inspect           # 视觉布局审查 —— 溢出、出框元素、文字遮挡
npx hyperframes preview           # 实时浏览器预览
npx hyperframes render --quality draft --output draft.mp4    # 快速迭代
npx hyperframes render --quality high --output final.mp4     # 最终交付

hyperframes validate 会采样每个文本元素背后的背景像素，并对对比度低于 4.5:1（大号文字为 3:1）的情况发出警告。hyperframes inspect 是布局侧配套工具——在多个时间戳点运行页面，识别静态校验无法发现的问题（例如字幕仅在 4.5 秒时超出安全区域、标题最长变体导致卡片溢出、某元素最终被转场着色器遮盖）。对于含对话气泡、卡片、字幕或精密排版的合成，尤其建议运行 inspect。

8. 网页转视频（当用户提供 URL 时）

请遵循 references/website-to-video.md 中定义的 7 步流程：抓取 → DESIGN.md → SCRIPT.md → 分镜 → 合成 → 渲染 → 交付。

常见陷阱

  • HeadlessExperimental.beginFrame' wasn't found — Chromium 147+ 已移除此协议。请确保使用 hyperframes@>=0.4.2（自动检测并降级至截图模式）。应急方案：export PRODUCER_FORCE_SCREENSHOT=true。详见 hyperframes#294 及 references/troubleshooting.md。
  • 使用系统 Chrome（而非 chrome-headless-shell） —— 渲染将挂起 120 秒后超时。请运行 npx puppeteer browsers install chrome-headless-shell（setup.sh 已内置此步骤）。hyperframes doctor 将报告实际使用的二进制文件。
  • 任意位置出现 repeat: -1 —— 将破坏捕获引擎。务必始终计算有限重复次数。
  • 对稍后入场的元素使用 gsap.set() —— 页面加载时该元素尚不存在。请改用 tl.set(selector, vars, timePosition)，置于时间轴内且时间点 ≥ 该元素的 data-start。
  • 在正文文本中使用
    —— 强制换行无法感知渲染字体宽度，易与自然换行叠加造成双倍换行。应使用 max-width 让文本自主换行。例外：短标题需刻意逐字分行时可使用。
  • 对 visibility 或 display 执行动画 —— GSAP 无法补间这两项属性。请改用 autoAlpha（同时处理可见性与透明度）。
  • 手动调用 video.play() 或 audio.play() —— 框架全权管理播放。请勿自行调用。
  • 异步构建时间轴 —— 捕获引擎在页面加载后同步读取 window.__timelines。时间轴构造过程严禁包裹在 async、setTimeout 或 Promise 中。
  • 将独立 index.html 包裹在