TypeScript hyperframes 用写HTML的方式生成视频

做视频，要么学 React（比如 Remotion），要么用剪辑软件。HyperFrames 换了个思路：既然人和 AI 编程代理都会写 HTML 或 CSS，那就直接用 HTML 写视频构图，再渲染成确定性的 MP4。它由 HeyGen 开源，官方口号是 Write HTML. Render video. Built for agents.

项目基本信息

一、项目介绍

HyperFrames 是一个开源框架，把 HTML、CSS、媒体和可寻址（seekable）动画转化为确定性的 MP4 视频。视频构图就是一个带 data 属性的 HTML 文件，用 data-start、data-duration、data-track-index 声明每个元素在时间轴上的起始、持续和轨道，不需要 React，也没有专有时间轴格式。它面向人和 AI 代理：代理本来就会写 HTML，CLI 默认就是非交互式的。

二、核心优势

第一，HTML 原生。构图就是标准 HTML 文件，没有框架强制和专有格式。第二，无构建步骤。index.html 按原样播放，直接在浏览器预览。第三，基于适配器的动画。可以引入 GSAP、CSS 动画、Lottie、Three.js、Anime.js、WAAPI 或自定义运行时，实现可寻址、帧精确的动画。第四，确定性渲染。相同输入产生相同帧和输出；渲染器在 headless Chrome 中逐帧 seek，用 FFmpeg 编码，专为 CI、回归测试和自动渲染构建。第五，代理友好。代理直接写 HTML 即可，CLI 默认非交互。

三、适用场景

它适合想用已有前端知识做视频的人，免去学 React 或剪辑软件的门槛。也适合自动化内容流水线：因为输出是确定性的，可以放心放进 CI 做回归测试。通过 frame.md 把网页设计系统（design.md）转化为视频可消费的描述，代理能基于品牌规范合成视频，而不必猜测缩放或套网页外壳。它还能运行在本地 CLI、Docker、浏览器 Studio，以及 AWS Lambda 分布式渲染。

四、安装教程

本地用 npx 初始化和渲染（需要 Node.js 22 以上和 FFmpeg）：

npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render

为 Claude Code 安装版本化插件：

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

为独立技能（含 OpenCode 等）安装：

npx skills add heygen-com/hyperframes

常见报错多来自 Node 版本低于 22 或缺 FFmpeg，先确认两者就绪再渲染。

五、使用示例

写一个标准 HTML 构图文件，用 data 星号属性声明时间轴：

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
  <video class="clip" data-start="0" data-duration="6" data-track-index="0" src="intro.mp4" muted playsinline></video>
  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>
  <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 = window.__timelines || {};
    window.__timelines.launch = tl;
  </script>
</div>

保存后执行 npx hyperframes render 即可输出确定性 MP4。想加现成模块可用 npx hyperframes add flash-through-white（着色器过渡）、npx hyperframes add data-chart（动画图表）等。

六、常见问题

问：必须用 React 吗？答：不需要，构图就是标准 HTML，框架不强制 React。问：渲染确定性怎么保证？答：相同输入产生相同帧和输出，headless Chrome 逐帧 seek、FFmpeg 编码。问：支持哪些动画库？答：GSAP、CSS、Lottie、Three.js、Anime.js、WAAPI 或自定义运行时。问：环境要求？答：Node.js 22 以上与 FFmpeg。问：能跑在云端吗？答：支持 AWS Lambda 分布式渲染。

七、总结

HyperFrames 把写网页和做视频打通了：用你本来就会的 HTML 或 CSS 描述画面和时间轴，再确定性地渲染成 MP4。对人和 AI 代理都友好，尤其适合需要自动化、可回归的视频生产流水线。如果你厌倦了 React 视频框架的绑定或剪辑软件的手工操作，它值得关注。