hyperframes-超帧视频_设计多媒体 skill-PHP中文网

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                      # 诊断环境问题

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

环境配置（仅需一次）

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

该脚本执行以下操作：

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

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

操作流程

1. 编写 HTML 前先规划

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

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

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

项目根目录是否存在 DESIGN.md？ → 严格采用其中指定的配色、字体、动效规则及“禁止事项”约束。
用户是否指定了风格名称？（例如 “Swiss Pulse”、“暗黑科技风”、“奢侈品牌调性”）→ 生成最小化 DESIGN.md，包含 ## Style Prompt、## Colors（3–5 个带语义角色的十六进制色值）、## Typography（1–2 个字体族）、## What NOT to Do（3–5 条反模式）。
以上均不满足？ → 在编写任何 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. 场景间转场

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

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

使用 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。