用HTML写视频：HyperFrames如何向从未开过After Effects的人打开motion graphics的大门

HyperFrames是HeyGen开源的视频工具，把HTML、CSS和动画转换成MP4。了解如何编写网页并把它渲染成视频、motion graphics的民主化真正让谁受益，以及它的真实边界在哪里。

一句话说清HyperFrames是什么

这是HeyGen的一个开源框架，能把HTML、CSS和动画转成MP4文件。它的口号比任何解释都更准确：“Write HTML. Render video. Built for agents.”

你写一个网页，加上一些告诉系统每个元素何时开始、持续多久的属性，运行一个命令，就得到一个视频。

重要的不是技术上的新意——Remotion用React做类似的事已经好多年了。重要的是它为谁打开了门。HTML和CSS是地球上被教授得最多的语言。而更相关的是：它们也是AI代理最擅长写的语言。

真正要紧的部分：民主化不会自动发生

我想在这里停一下，因为这是我们每次遇到这种工具都会掉进的陷阱。

一项技术可及，不代表它让我们自由。它给我们的是自由的可能。差别在于：我们是学会使用这些知识，还是继续消费那个工具默认产出的东西。

用一个众所周知的例子想。当手机摄像头变好之后，并不是所有人都变成了摄影师。大多数人只是更快地拍了更多平庸的照片。真正成为摄影师的，是那些用便宜的快门访问权去学习构图、光线和timing的人——这些都是相机永远不会白送给你的东西。

代理生成的motion graphics也一样。HyperFrames替你移除了软件的障碍，但它不替你做这份工作：知道你想讲什么、每个镜头该多长、一个文案什么时候动图太多、以及为什么三秒钟的转场会毁掉一个十五秒广告的观看率。

工具让执行民主化。评判力仍然属于你，也仍然是稀缺的。

具体是怎么运作的

一个HyperFrames合成就是一个index.html文件，仅此而已。在浏览器里打开就能看到。这是官方文档里举的例子：

<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>

  <audio data-start="0" data-duration="6" data-track-index="2"
         data-volume="0.5" src="music.wav"></audio>

  <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>

如果你是从剪辑软件来的，再看一遍就能认出所有东西：data-track-index是你的时间轨上的轨道，data-start是片段开始的地方，data-duration是它持续多久。这是一条用纯文本写出来的时间线，而不是用鼠标拖出来的时间线。

引擎在无头Chrome里打开这段HTML，逐帧前进抓取每一帧，再交给FFmpeg拼成MP4。因为每一帧都是通过定位时间上的精确位置生成的，而不是实时播放，所以结果是确定性的：同一个文件永远生成同一段视频。这正是让你能自动化渲染而不会出意外的原因。

安装

首先两个前提：Node.js 22或更高和FFmpeg。如果没有，先装——Node从nodejs.org，FFmpeg从ffmpeg.org或你系统的包管理器（Mac用brew install ffmpeg，Windows用winget install ffmpeg）。

这些就绪后，整个流程是三个命令：

# 1. 创建新项目
npx hyperframes init my-video
cd my-video

# 2. 在浏览器里看结果（带实时重载）
npx hyperframes preview

# 3. 导出为MP4
npx hyperframes render

不需要全局安装任何东西：npx会现场下载并运行。如果启动时出问题，npx hyperframes doctor会检查环境并告诉你还缺什么。

要安装那些教你的AI代理使用这个框架的skills——如果你不想手写HTML，这是推荐的路径：

npx skills add heygen-com/hyperframes --full-depth

会打开一个没有任何预选的选项器；你只需要Core Skills组就够了，因为/hyperframes路由器会在你要求时安装各自的工作流。不要省略--full-depth：没有这个标志，下载到的可能是几小时前的过时版本。

以后想保持安装最新：

npx hyperframes skills update

最后，往一个已有项目里添加目录中的现成块：

npx hyperframes add flash-through-white   # 着色器转场
npx hyperframes add instagram-follow      # 社交叠层
npx hyperframes add data-chart            # 动画图表

非程序员的真正路径：skills

这里是让它对内容创作者——而不只是开发者——有趣的地方。

HyperFrames发布二十个skills——指令包——教AI代理（Claude Code、Cursor、Codex、Gemini CLI）如何用这个框架做视频。你在上一步已经装了它们，所以从这以后你的交互不是写HTML，而是描述视频。

使用/hyperframes，创建一个10秒的产品片头：标题淡入、背景视频、轻柔的环境音乐。

代理规划结构、写HTML、接上动画、加入音频、检查错误并渲染。你负责检查和修改。这恰恰是导演和剪辑师的工作模式：你决定，别人执行，最终质量取决于你要求得有多具体、判断结果有多准。

值得记住这些skills的名字，因为它们基本上就是一份格式菜单：

/hyperframes — 路由器。永远先读它；它识别你想要什么样的片子并调用正确的工作流。
/product-launch-video — 产品或网站宣传，最长约3分钟（30-90秒最佳）。
/faceless-explainer — 没有相机也没有产品，用从零生成的视觉解释一个概念。
/motion-graphics — 无旁白的短片，10秒以内：动态排字、一个动效数据、logo sting、lower-third。可导出MP4或透明叠层。
/embedded-captions — 在已有的相机视频上叠加设计好的字幕。
/talking-head-recut — 把采访或播客打包成带lower-third、数据callout、pull-quote和画中画的节目。
/music-to-video — 让视频和音频轨的节拍同步。
/slideshow — 可翻页、带reveal和导航的演示文稿，不是渲染视频。
/general-video — 其余一切：长片、多场景、sizzle reel。