Hyperframes：基于HTML/CSS/JS的专业视频生成框架
核心概念与设计哲学
Hyperframes 是一个由 HAGEN 开源的视频生成框架，其核心理念在于允许开发者使用纯 HTML、CSS 和 JavaScript 来描述和生成专业级视频（可导出为 MP4 格式）。与传统视频制作工具（如 Premiere、After Effects）的手动时间线操作不同，Hyperframes 将视频制作转化为代码编写过程：每一行 HTML 对应视频中的一个元素，CSS 控制样式，JavaScript 控制动画。框架通过无头浏览器逐帧捕获 HTML 页面，并利用 FFmpeg 将帧序列合成为视频文件。
该框架无需 React 或其他编译工具，直接编写 HTML 文件即可运行，渲染器负责将 HTML 转换为视频。其设计目标在于降低视频制作的技术门槛，使具备前端开发能力的程序员能够利用已有技能完成视频创作。
核心工作机制：三个关键组件
1. HTML 标签与 data 属性
Hyperframes 通过自定义 data 属性在 HTML 元素上定义视频时间线行为。关键属性包括：
data-start：元素开始显示的时间（秒）
data-duration：元素持续显示的时间（秒）
data-track-index：控制元素所在的图层层级，类似于 Photoshop 中的图层顺序
示例：<div data-start="0" data-duration="5" data-track-index="1"> 表示该元素从第 0 秒出现，持续 5 秒，位于第一层。
2. JavaScript 时间线 API（GSAP）
框架内置对 GSAP（GreenSock Animation Platform）时间线的支持。开发者需创建一个 GSAP 时间线实例，设置 paused: true，并将其注册到 window.timelines 对象中。框架会自动接管该时间线，使其与视频帧的播放精准同步。
const tl = gsap.timeline({ paused: true });
window.timelines = { main: tl };
3. 渲染引擎（无头浏览器 + FFmpeg）
框架启动一个无头浏览器（Headless Browser），逐帧捕获 HTML 页面的渲染结果，然后通过 FFmpeg 将这些帧合成为 MP4 视频文件。整个过程自动化，无需手动干预。
环境安装与项目初始化
系统要求
Node.js 22 及以上版本
FFmpeg（需预先安装并配置环境变量）
初始化项目
在终端执行以下命令：
npx hyperframes editm-video
该命令会创建一个完整的项目目录结构，包含：
index.html：视频入口文件
compositions/：存放组件（类似视频片段）
assets/：存放素材文件
预览模式
执行以下命令启动预览：
npx hyperframes preview
浏览器将自动打开一个预览窗口，左侧为代码编辑器，右侧为实时视频效果。修改代码后刷新即可看到更新，无需等待长时间渲染。
动画实现：以 GSAP 驱动
在 index.html 中，首先定义一个容器元素，并设置 data-composition-id、data-width、data-height 属性（例如 1920×1080）。内部放置需要动画的元素，并添加 data-start、data-duration、data-track-index 属性。
动画部分使用 GSAP 的 tl.from() 方法。例如，让标题从下方滑入并淡入：
tl.from(titleElement, { y: 60, opacity: 0, duration: 0.8, ease: "power3.out" });
更复杂的 3D 翻转效果可通过组合 x、rotateY、perspective 等属性实现。所有动画均基于前端技术栈，但输出效果与专业剪辑软件相当。
VFX 特效包：即装即用的视频特效
Hyperframes 提供名为 VFX 特效快 的扩展机制，类似于前端 NPM 包，但专为视频特效设计。安装命令格式为：
npx hyperframes add vfx-<特效名称>
官方目前提供超过 50 个现成特效，涵盖以下类别：
碎裂效果：vfx-ur-shutter
液态背景：vfx-liquid-background
传送门效果：vfx-photo
粒子系统：vfx-magnetic
产品设备展示：vfx-iphone-device（自带 iPhone 和 MacBook 的 3D 模型）
社交媒体覆盖、屏幕过渡、数据可视化、电影级特效等
安装后，通过 data 属性在 HTML 中引用即可使用，无需从零编写特效代码。
过渡与场景切换
传统视频剪辑中的场景过渡在 Hyperframes 中通过过渡组件实现。安装命令示例：
npx hyperframes add transition-flash-through-white
支持的过渡类型包括：
白光闪屏：flash-through-white
色散镜像分裂：chromatic-radio-split
墨水飞溅、翻页、折叠、水波纹等
使用 data 属性指定过渡时间和类型，框架自动处理两个场景之间的衔接。所有过渡均为确定性行为，同一份代码渲染 1000 次结果完全一致，适合自动化视频流水线。
AI Agent 集成：自然语言驱动视频生成
Hyperframes 的设计天然支持 AI 代理（AI agent）调用。开发者无需手动编写 HTML，只需向 AI 助手描述需求（例如：“制作一个十秒钟的产品介绍视频，深色背景，标题从左边飞入，底部加一个购买按钮”），AI 即可自动生成完整的 HTML 文件，包含所有动画和样式。随后运行 npx hyperframes render 即可导出最终视频。
这一特性使得批量视频生成成为可能：创建模板后，通过替换文本和数据即可批量产出个性化视频（如 Spotify 年度总结、GitHub 年度回顾）。所有处理均在本地完成，无需云端 API 费用。
渲染与导出
本地渲染命令
npx hyperframes render <项目路径>
框架启动无头浏览器逐帧渲染 HTML 组件，然后由 FFmpeg 合成 MP4 视频。
渲染质量等级
draft：快速迭代，用于开发阶段
standard：用于审核
hi：最终交付，质量最高
渲染 60fps 视频会消耗更多时间，但画面更流畅。可通过 --docker 参数使用 Docker 容器渲染，确保每次输出的字节完全一致。
辅助工具
lint：检查 HTML 结构是否存在错误
inspect：打开无头浏览器逐帧检查布局是否溢出，比肉眼检查更可靠
实战学习路线图
第一天：跟随官方 Quick Start 制作一个五秒钟的标题动画，熟悉 HTML 结构和 GSAP 时间线。
第三天：制作一个 30 秒的完整视频，包含场景过渡、字幕和背景音乐。
第一周：安装三个 VFX 特效快，组合出有冲击力的视觉效果。
第二周：制作数据驱动视频，使用真实数据生成动态图表。
第三周：与 AI agent 配合，用自然语言描述需求，让 AI 生成视频。
一个月后：能够使用纯前端技术独立制作专业级视频。
Hyperframes 将视频制作转化为前端开发流程，使任何具备 HTML 编写能力的人都能成为视频创作者。其核心优势在于代码化、自动化、可批量，且完全本地运行，无需依赖云端服务。
