嗨，兄弟们！HTML竟然Neng写视频？

说实话，我刚kan到 HeyGen 开源的 HyperFrames，脑子里直接冒出“这玩意儿还Neng再神奇点儿吗？”的感叹。

哈哈，我这人一听到 “开源” 就激动得不行，手指根本停不下来。

先给你们抛个炸弹：我们Ke以直接用 HTML + CSS + GSAP 把动画变成 MP4，根本不需要 After Effects 那种“大块头”。

你想啊，平时写页面就Yi经把 DOM、样式、时间轴玩得飞起了怎么不顺势把它们塞进视频流水线呢？

那个那个，这事儿听起来像是科幻，却真的在 HeyGen 那边实现了。

为啥要把视频交给代码？

先别装正经，我跟你说用键盘敲代码比拖拽素材省事多了。

调关键帧？那是过去式。

现在只要改个 data-start、data-duration，帧就自动对齐。

geng牛逼的是这玩意儿是纯文本文件，Git Neng管，团队协作不靠 U 盘搬砖。

说实话，我以前每次改颜色dou要等半小时渲染，那种心情简直比坐过山车还刺激。

HyperFrames 的四层架构

interface HfProtocol {
  duration: number;               // 视频总时长
  seek: void;       // 引擎调这个来驱动帧
  media?: HfMediaElement;       // 音视频元素声明
}

从上到下大概是 CLI → Producer → Engine → Core 四层。

CLI 把你的 HTML 当作“剧本”，交给 Producer；Producer 再叫 Engine 把每一帧抓出来；Core 在页面里挂一个 window.__hf 对象，让 Engine Neng随时 “seek” 到任意时间点。

写 HTML 视频的必备属性

三个属性必须有：

data-start: 元素出现的起始时间

data-duration: 持续多久

data-track-index: 所属轨道索引

一步步把页面变成视频 1️⃣ 准备你的 HTML 文件

直接新建 index.html，写好结构和 GSAP 时间轴。别忘了在根元素上加上 position:relative;，否则捕获的画面会跑位。

2️⃣ 加入 GSAP 动画

// 创建全局时间轴
var tl = gsap.timeline;
tl.from;
tl.from;
tl.from;
window.__timelines = {"main": tl};

3️⃣ 用 CLI 渲染帧

npx hyperframes render --input index.html --output my-video.mp4

不对不对，这条命令其实还有hen多可选参数，比如并行 worker 数量、FPS、输出分辨率之类的，你随便玩玩就行。

4️⃣ 合并音频

AUDIO 部分其实是独立抽出来的，Engine 会把音轨单独导出成 WAV，然后再交给 FFmpeg 合并进 MP4。

实际案例：智Neng手表产品介绍短片

CIAO，各位，我刚整了个三段式的手表展示视频，总长大约十五秒。

 
  全新发布
  
心率监测
  
血氧检测

The timeline kan起来hen清晰，每个 clip dou有明确的开始和结束时间。只要改动 , 那么整个视频的节奏立刻跟着变。害，你说这不是极客福利吗？你懂的！

优势 & 局限——别抱太大期望，也别小kan它！

#优势：

- 完全基于前端技术栈，上手门槛低；

- 文本化资产易于版本控制；

- 支持 AI Agent 自动生成或修改代码；

- 并行渲染提升效率；

#局限：

- 浏览器渲染Neng力决定上限，复杂三维特效仍需专业软件；

- 对像素级精度有微小差异；

- 音频只Neng后期合成，实时同步稍显笨拙；

装逼技巧：让渲染结果百分百相同

AFAIK，只要在同样的 Docker 镜像里跑 npx hyperframes render，就Neng保证每次输出二进制相同——这点对 CI/CD 流水线超友好。

Chemical‑style CSS 毛玻璃效果示例：

.feature-card {
  background: rgba;
  backdrop-filter: blur;
  border: 1px solid rgba;
}

P.S. 小贴士合集

- 想快速预览？直接打开 index.html，用 Chrome 的 “Print to PDF” 导出也行，只是没有音频。

- Ru果想在项目里复用动画，把 GSAP timeline 写成模块化 TSX，然后在多个 HTML 中 import 同一个 adapter，即可保持统一风格。

- 别忘了在每个 .clip 上加上 class="clip", 否则 Core 不会识别时间属性哦！我差点忘记这点，一度以为是 bug ……哈哈哈。

一下——为什么你该尝试 HyperFrames？

Ciao，各位老铁，说白了这套框架就是把“写代码Zuo网站”的思路搬到了“Zuo视频”。你不用再学 AE 的奇怪快捷键，也不用担心二进制文件合不合 Git。所有东西dou是文本，你Ke以让 ChatGPT、Claude 或者 Gemini 来帮你生成动画代码，一键渲染成 MP4。咱就是说这波操作真的省事儿到飞起！Ru果你平时Yi经在玩前端，那赶紧去搞一波吧——反正玩起来也不会太费劲，还Neng顺手给老板交付一堆酷炫产品宣传片。哈哈，不对不对，其实关键是：代码即内容，内容即代码。懂得dou懂啦！祝大家玩得开心~ 🎉

---