HyperFrames：用 HTML 直接生成 MP4 视频的开源框架（写网页就能出视频）

大家好 这里是「代码简单说`,欢迎大家关注同名公众号,不定时更新更多实用有趣的教程 也欢迎大家在评论区一起讨论交流!~

关键词

HyperFrames教程 / HTML生成视频 / MP4渲染框架 / 前端视频生成工具 / headless chrome 视频渲染 / GSAP视频动画 / Node视频生成 / 自动化视频工具

---

一、项目背景：为什么会出现 HyperFrames？

在传统视频制作流程里，一般是这样的：

• PR / AE / 剪辑工具手动做动画
• 或者用代码框架（如 Remotion）生成视频
• 再导出 MP4

问题很明显：

• 学习成本高（尤其 AE）
• 代码方案依赖 React 生态（Remotion）
• 动画调试困难（时间轴复杂）
• 不适合 AI 自动生成内容

HyperFrames 的思路非常直接：

用 HTML + CSS + JS 直接描述视频，然后渲染成 MP4

也就是：

HTML = 视频源代码
Headless Chrome = 渲染引擎
FFmpeg = 视频编码器

---

二、HyperFrames 是什么？

一句话理解：

HyperFrames 是一个“HTML → MP4”的确定性视频渲染框架

它的核心能力：

• 用 HTML 写视频结构
• 用 data-* 控制时间轴
• 支持 GSAP / CSS / Lottie / Three.js 动画
• 通过 headless Chrome 逐帧渲染
• 最终输出 MP4（确定性结果）

---

三、核心优势（为什么它值得关注）

1. 无需 React / 无构建流程

传统 Remotion：

React + Vite + Bundle + Render

HyperFrames：

index.html → render → mp4

---

2. 适合 AI Agent 自动生成视频

它非常适合：

• Cursor
• Claude Code
• Codex
• Gemini CLI

因为：

AI 本身就擅长写 HTML，而不是 React 动画系统

---

3. 确定性渲染（Deterministic）

同样输入：

HTML + assets

输出：

完全一致的 MP4

适合：

• CI 流水线
• 自动化内容生产
• 批量视频生成

---

4. 技术栈完全开放

支持：

• GSAP
• CSS Animation
• Web Animations API
• Lottie
• Three.js
• Anime.js

---

四、快速开始（CLI 使用）

1. 初始化项目

npx hyperframes init my-video
cd my-video

---

2. 本地预览

npx hyperframes preview

作用：

• 浏览器实时预览
• 支持热更新
• 时间轴调试

---

3. 生成 MP4

npx hyperframes render

输出：

dist/output.mp4

---

五、核心思想：HTML 如何变成视频？

HyperFrames 的关键在于：

所有元素必须“可时间控制”

例如：

<h1 data-start="1" data-duration="4">Launch</h1>

含义：

属性	作用
data-start	从第几秒开始
data-duration	持续时间
data-track-index	图层顺序

---

六、完整示例（动画视频结构）

<div id="stage" data-width="1920" data-height="1080">

  <video
    data-start="0"
    data-duration="6"
    src="intro.mp4"
  ></video>

  <h1 data-start="1" data-duration="4">
    Launch day
  </h1>

  <audio
    data-start="0"
    data-duration="6"
    src="music.wav"
  ></audio>

</div>

---

七、动画如何控制？（GSAP 示例）

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

<script>
  const tl = gsap.timeline({ paused: true });

  tl.from("#title", {
    opacity: 0,
    y: 40,
    duration: 0.8
  }, 1);

  window.__timelines = {
    launch: tl
  };
</script>

核心点：

• timeline 是“可 seek 的”
• renderer 会按时间逐帧执行
• 保证视频稳定输出

---

八、HyperFrames 架构解析

核心链路：

HTML
  ↓
Parser（解析 data-*）
  ↓
Headless Chrome（逐帧渲染）
  ↓
Frame Capture
  ↓
FFmpeg 编码
  ↓
MP4 输出

---

九、HyperFrames vs Remotion

对比项	HyperFrames	Remotion
UI模型	HTML	React
构建	无	需要 bundler
适合AI	非常适合	一般
学习成本	低	中高
渲染方式	Chrome + FFmpeg	类似

---

十、适用场景（非常关键）

1. 自动生成营销视频

• 产品介绍
• App 功能展示

2. 数据可视化视频

• chart race
• dashboard 动画

3. AI 自动内容生成

• prompt → video

4. 技术讲解视频

• code diff 动画
• UI walkthrough

---

十一、Frame.md：设计系统升级版

HyperFrames 引入：

frame.md = 面向视频的 design system

作用：

• 将 design token 转为视频结构
• 控制动画节奏
• 给 AI 提供“视觉约束”

可以理解为：

design.md（网页）
→ frame.md（视频）

---

十二、HyperFrames 本质总结

它不是“视频工具”，而是：

一个 HTML → 动画时间轴 → 视频渲染引擎

本质上是：

• Web 渲染器
• 时间轴编排系统
• headless video pipeline

---

十三、总结

HyperFrames 的价值在于：

• 降低视频制作门槛
• 让前端直接参与视频生成
• 适配 AI 自动化生产内容
• 替代部分 AE / PR 自动化流程

---

如果你是前端开发者，这个项目的意义是：

你写的 HTML，不再只是页面，而是“视频脚本”

---

关注与交流

如果你对：

• 前端自动化生成视频
• AI + 视频工程化
• GSAP / Web 动画系统
• Node + FFmpeg 流水线

这类方向感兴趣，可以继续深入拆：

• HyperFrames 渲染源码分析
• headless chrome 帧同步机制
• AI 自动生成 video pipeline 设计