Hipson HyperFrames 视频
当用户需要视频合成、网站转视频工作流、产品发布视频、产品介绍、动画案例研究、宣传视频、社交媒体短视频，或使用 HyperFrames 输出 MP4 格式时，请使用此技能。
请勿将此工作流与常规网页 UI 设计合并。HyperFrames 工作是独立的视频合成路径。
什么是 HyperFrames
HyperFrames 是一种用于渲染视频的确定性 HTML 合成工作流。视频构图以纯 HTML/CSS/JavaScript 编写，在本地预览，并通过 Node.js 和可用的 FFmpeg 工具渲染成视频。
适用于需要将网页式布局变为定时视频的场景：产品发布、功能介绍、更新日志回顾、案例动画演示、宣传资产或社交媒体短视频。
何时不使用
- 普通的静态 UI 设计。
- 仅涉及后端、API、数据库或安全的任务。
- 纯 React 组件的实现。
- 一次性图片生成。
- 任何用户未要求视频、时间线、渲染、MP4 或 HyperFrames 的任务。
冷启动
当用户仅描述视频时，询问或推断以下内容：
- 受众与目标；
- 平台与宽高比；
- 时长与帧率；
- 源文案；
- 视觉参考或品牌约束；
- 期望氛围；
- 音频还是静音/字幕优先的交付；
- 输出格式与截止日期。
然后在实施前生成视频简报。
热启动
当用户提供 URL、页面、PDF、转录文本、更新日志、CSV 或文案时：
- 提取故事要点。
- 选择可以用文字、产品 UI、图表、截图或动态卡片展示的内容。
- 定义带时间戳的场景。
- 识别哪些资产必须是本地的、生成的、导出的或省略的。
- 生成 HyperFrames 实施简报。
HyperFrames 核心规则
- 使用纯 HTML 合成，不使用 React 或 Vue，除非用户明确要求框架。
- 根合成元素必须包含
data-composition-id、data-width和data-height。 - 定时元素使用
class="clip"、data-start、data-duration和data-track-index。 - GSAP 时间线应暂停并注册到
window.__timelines上。 - 避免使用
Math.random()和异步时间线设置。 - 保持视频元素静音；使用单独的音频元素。
- 优先使用确定性渲染，而不是实时网络数据或运行时随机性。
- 本地渲染需要 Node.js 22+ 和 FFmpeg。
- 使用可用的预览、渲染和 lint 命令。
视频简报格式
# HyperFrames 视频简报
## 目标
## 来源材料
## 格式
宽高比、时长、帧率、平台。
## 创意方向
氛围、视觉风格、字体、颜色、动态、音频。
## 场景分解
逐个场景的时序、视觉、字幕、动态、音频。
## HyperFrames 实施说明
HTML 结构、数据属性、GSAP 时间线、资产、命令。
## Codex 实施简报
具体的实施任务。
## 质量检查清单
时序、字幕、对比度、音频、渲染质量、确定性。
Codex 实施简报要求
包含：
- 合成 ID；
- 宽度、高度、帧率与时长；
- 目标文件夹和文件名；
- 场景时序表；
- 所需资产和备用资产；
- 文本/字幕来源；
- 确切的动画/时间线期望；
- 预览、lint 和渲染命令；
- 本地输出路径，通常被 git 忽略；
- 确定性渲染的质量检查清单。
质量检查清单
- 根元素具有必需的合成数据属性。
- 每个定时元素具有确定性的
data-start、data-duration和data-track-index。 - 时间线已暂停并注册到
window.__timelines上。 - 没有
Math.random()或异步设置影响最终时序。 - 视频元素已静音，音频分开。
- 字幕在目标平台尺寸下可读。
- 对比度足够。
- 时序与场景分解匹配。
- 检查渲染输出是否存在丢帧、剪辑、错误裁剪和音频同步问题。
- 生成的媒体文件除非明确批准，否则不提交到 git。
仓库卫生
使用本地输出文件夹（如 hyperframes-output/、exports/ 或 tmp/）存放渲染和生成的资产。不要提交大型生成的 MP4、WebM、MOV、WAV、MP3、SRT 或 VTT 文件，除非用户明确将其批准为源资产。