Remotion 最强竞品！用 HTML 写视频，AI 自动成片

0 次

ihunter

2026/07

Remotion 最强竞品！用 HTML 写视频，AI 自动成片 - 今日头条

很多前端开发者、AI 工程师都有一个共同困扰：想快速做产品演示、数据可视化、短视频钩子，却必须去学 PR、AE 这类专业剪辑软件；想做批量自动化视频，传统工具又不支持代码化、不兼容 AI 工作流。

现在，一款专为 AI 智能体设计的开源视频渲染框架 Hyperframes 给出了全新方案：只写 HTML，就能渲染出电影级视频。无需 React、无需专有 DSL、无需复杂配置，HTML 怎么写，视频就怎么长。

01 项目简介

Hyperframes 是一款开源视频渲染框架，允许开发者使用 HTML 定义视频 composition，实时预览，并最终渲染为 MP4。

框架通过 MCP 协议原生对接 AI 智能体，从结构设计到 CLI 命令，全部为 agent 工作流深度优化。

核心 slogan 非常直白：

Write HTML. Render video. Built for agents.

它不依赖任何前端框架，不强制打包构建，直接用 HTML + data 属性描述视频，确定性渲染，可复现、可批量、可嵌入自动化流水线。

02 快速上手，零门槛启动

方式一：使用 AI 编码智能体（推荐）

方案 1：全局安装 Hyperframes 技能包

npx skills add heygen-com/hyperframes

同时可配套安装 GSAP 官方 AI 技能：

npx skills add greensock/gsap-skills

安装后，你的 AI 工具（Claude Code、Cursor、Gemini CLI、Codex 等）就会自动学会如何编写 composition、调用 CLI、使用 GSAP 动画。

在 Claude Code 中会注册专属斜杠命令：

/hyperframes-compose：编写视频结构、创建视频内容
/hyperframes-captions：字幕相关创作
/gsap-core、/gsap-timeline 等：GSAP 动画、时间线相关操作

如果你使用 Claude Design，可以下载官方指南文件并附加到对话，AI 会直接生成可用初稿，之后在任意编码智能体中迭代优化即可。

Codex 可通过插件方式稀疏安装：

codex plugin marketplace add heygen-com/hyperframes --sparse .codex-plugin --sparse skills --sparse assets

Cursor 则提供了专用插件，可从插件市场安装，或本地侧载。

方案 2：通过框架内置 CLI 一键安装技能

# 一键安装Hyperframes+GSAP全套AI技能（init初始化项目时会自动执行）
npx hyperframes skills

# 单独为指定AI工具安装技能
npx hyperframes skills --claude
npx hyperframes skills --cursor

可直接复制的提示词示例

你可以把下面任意一段丢给 AI，直接生成可用视频。

冷启动（直接描述需求）
使用 /hyperframes-compose，创建一个 10 秒产品介绍，包含淡入标题、背景视频和背景音乐。
热启动（把现有内容转视频）
用 /hyperframes-compose 将这份 PDF 总结成 45 秒推介视频。用 /hyperframes-compose 把这份 CSV 做成动画柱状图竞速视频。
特定格式（短视频场景）
用 /hyperframes-compose 制作 9:16 抖音风格钩子视频，带弹性字幕并与 TTS 配音同步。
迭代修改（像跟剪辑师沟通一样）
标题放大两倍，切换深色模式，结尾加淡出。在 0:03 处加入姓名和头衔的下三分之一栏。

AI 会自动完成脚手架、动画、轨道、渲染全流程。

方式二：手动创建项目

npx hyperframes init my-video
cd my-video
npx hyperframes preview # 浏览器预览（热重载）
npx hyperframes render # 渲染成 MP4

hyperframes init 初始化项目时会自动执行技能安装命令，因此你随时可以把项目交给 AI 继续迭代。

环境硬性要求：Node.js ≥ 22、本地预装 FFmpeg

03 选择理由

HTML 原生：composition 就是带 data 属性的普通 HTML，无框架、无 DSL
AI 优先：CLI 非交互设计，智能体可直接调用，原生基于 MCP 协议对接 AI 智能体
确定性渲染：相同输入必定得到相同输出，专为自动化流水线设计
Frame Adapter 模式：可自由接入 GSAP、Lottie、CSS、Three.js 等动画 runtime

04 与 Remotion 对比

Hyperframes 的设计受 Remotion 启发，HeyGen 团队也曾在生产中深度使用 Remotion。两者都使用无头 Chrome、都支持确定性渲染，但核心差异在于：开发者主要编写什么。


对比项	Hyperframes	Remotion
编写方式	HTML + CSS + GSAP	React 组件 (TSX)
构建步骤	无，index.html 直接运行	需要打包构建
帧动画控制	帧级精准定位控制	渲染时按系统实际时钟播放
HTML/CSS 直通	原生粘贴即用，直接叠加动画	全部需要改写为 JSX 语法
分布式渲染	目前仅支持单机本地渲染	支持 Lambda 云端分布式，生产级成熟
开源协议	Apache 2.0 完全开源商用无限制	源码可见但非开源，商业使用需付费授权

简单说：

想要低门槛、HTML 原生、AI 智能体友好、免费商用→ Hyperframes
想要成熟云端分布式渲染、深度 React 技术栈生态→ Remotion

05 核心使用方式

Hyperframes 的核心非常干净：用 HTML + data 属性描述视频结构，视频轨道属性官方标准为 data-track，原文 data-track-index 为别名写法。

官方标准示例代码：

<div id="stage" data-composition-id="my-video" data-start="0" data-width="1920" data-height="1080">
  <video
    id="clip-1"
    data-start="0"
    data-duration="5"
    data-track="0"
    src="intro.mp4"
    muted
    playsinline
  ></video>
  <img id="overlay" class="clip" data-start="2" data-duration="3" data-track="1" src="logo.png" />
  <audio
    id="bg-music"
    data-start="0"
    data-duration="9"
    data-track="2"
    data-volume="0.5"
    src="music.wav"
  >
</div>

你只需要定义核心属性：

data-start：元素开始播放时间
data-duration：元素持续展示时长
data-track：轨道层级（官方标准字段，data-track-index 兼容别名）
data-volume：音频音量

写完代码可在浏览器实时预览，一键调用命令渲染 MP4。

06 50 + 组件库快速提升质感

Hyperframes 内置大量预制块和组件，包括社交覆盖层、转场、数据可视化、电影级效果等。

组件安装标准命令：

npx hyperframes add flash-through-white # 白闪转场
npx hyperframes add instagram-follow # 社交关注挂件
npx hyperframes add data-chart # 动画图表

07 完整包结构

Hyperframes 是一套完整工具链，包含多个官方维护包：

hyperframes：CLI 工具，提供创建、预览、代码检查、渲染全功能
@hyperframes/core：类型定义、解析器、生成器、代码检查器、运行时、帧适配器
@hyperframes/engine：可寻址页面转视频捕获引擎（底层基于 Puppeteer + FFmpeg）
@hyperframes/producer：完整渲染流水线（画面捕获 + 视频编码 + 音频混音）
@hyperframes/studio：浏览器端可视化视频编辑器 UI
@hyperframes/player：可嵌入网页的 Web Component 播放器
@hyperframes/shader-transitions：WebGL 硬件加速转场库

08 AI 技能体系

Hyperframes 提供配套专用 AI 技能，让 AI 编码智能体掌握框架专属规范，分为两大技能集：

Hyperframes 核心技能集


技能名称	教学内容
hyperframes-compose	HTML 视频结构编写、clip 类规范、data 属性、时间线注册、渲染约束
hyperframes-captions	视频字幕生成、字幕同步规范
hyperframes-registry	组件库安装 hyperframes add 相关操作
website-to-hyperframes	网页 URL 一键转视频 composition