将HTML/CSS渲染为MP4视频

将代码转化为高质量的 MP4 视频，实现自动化视频创作。

详细介绍

HyperFrames

编写 HTML，渲染视频，为 AI 代理而生。

HyperFrames 是一个开源框架，能将 HTML、CSS、媒体资源和可寻址动画转化为确定性的 MP4 视频。你可以通过本地 CLI 使用它，也可以通过 AI 编码代理加载技能来使用，或者将其作为托管创作工作流背后的渲染核心。

适用场景

HyperFrames 可用于创建多种视频内容，包括：

产品发布视频与功能公告

GitHub PR 讲解（带动画代码 diff、旁白和字幕）

数据可视化、图表竞赛和地图动画

社交视频（含动态字幕、叠加层和背景音乐）

文档转视频、PDF 转视频、网站导览讲解

可复用的动态图形，用于自动化内容流水线

效果预览

设计系统模板 frame.md 可将你的设计规范转换为 AI 代理能够直接用于视频创作的格式。以下是一些已提供的设计模板效果：

你可以在 hyperframes.dev/design 浏览和混搭所有这些设计模板。

核心能力

HyperFrames 提供了 19 个按需加载的技能，涵盖路由、创作工作流和领域能力。以下是一张完整的组件栈表：

组件
状态
说明

CLI
可用
初始化、预览、检查、渲染本地视频项目

Core / Engine / Producer
可用
解析合成、驱动无头 Chrome、编码视频、混音

Catalog
可用
可复用的区块和组件，用于过渡、叠加层、字幕、图表、地图和特效

Agent skills
可用
教会 AI 编码代理视频生产的模式

Studio
可用，持续演进
用于预览和编辑合成的浏览器界面

AWS Lambda 渲染
可用
部署分布式渲染栈，从本地或 CI 驱动渲染

hyperframes.dev
可用
社区在线试验场，用于预览、迭代、分享和渲染 HTML 原生视频项目

frame.md
可用
将你的设计系统倒置为镜头服务的格式——一个 AI 代理可以从中创作视频的 DESIGN.md 超集

此外，HyperFrames 还具有以下特性：

HTML 原生 ：合成文件就是带数据属性的 HTML，无需 React，没有专有时间线格式。

对 AI 代理友好 ：代理已经能写 HTML，CLI 默认非交互式。

确定性 ：相同输入产生相同帧、相同输出，适合 CI、回归测试和自动化渲染。

无构建步骤 ： index.html 合成文件可直接播放，浏览器中即可预览。

适配器式动画 ：支持 GSAP、CSS 动画、Lottie、Three.js、Anime.js、WAAPI 或自定义运行时。

开源 ：Apache 2.0 许可，无按渲染次数收费或商业使用门槛。

工作方式

用户提供视频描述（prompt）、URL、GitHub PR 链接、音频文件等输入。

AI 代理（如 Claude Code、Cursor、Gemini CLI、Codex）或本地 CLI 使用 HyperFrames 技能来规划视频、编写 HTML、添加可寻址动画、引入媒体、检查语法、预览效果，最后渲染输出。

渲染器在无头 Chrome 中逐帧捕获，并通过 FFmpeg 编码为 MP4 视频。

以下是一个简单的 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>

预览和渲染：

npx hyperframes preview # 在浏览器中预览，支持实时重载
npx hyperframes render # 渲染为 MP4

你需要提供

使用 AI 代理 ：一个文字描述，例如“创建一个 10 秒的产品介绍，包含淡入标题、背景视频和微弱的背景音乐”，以及一个支持技能的代理（如 Claude Code、Cursor、Gemini CLI、Codex）。

使用本地 CLI ：Node.js 22+ 和 FFmpeg 安装环境。此外，需要准备 HTML 文件、媒体文件和动画脚本。

你会获得

一个确定性的 MP4 视频文件，帧与输入完全一致。

对于 slideshow 工作流，会得到一个可导航的演示文稿（非视频）。

使用示例

以下是一个典型的 AI 代理提示词：

Using /hyperframes , create a 10-second product intro with a fade-in title, a background video, and subtle background music.

代理将依次执行规划、编写 HTML、添加媒体和动画、检查、预览并最终渲染。

选型说明

技能选择指南

HyperFrames 提供了 19 个技能，按需加载。首先阅读 /hyperframes 路由技能，它会根据你的需求选择合适的工作流。以下是各技能及其适用场景：

路由技能

技能
使用场景

/hyperframes
任何制作/创建/编辑/动画/渲染视频、动画或动态图形的请求。先读此技能，它是能力地图和意图路由器，会确认创作需求并分配工作流。

创作工作流

技能
使用场景

/product-launch-video
任何网站——营销/发布/推广产品（从 URL、摘要或脚本），或网站导览/展示/社交片段，使用网站自身素材。最长约 3 分钟，最佳 30–90 秒。

/faceless-explainer
解释任意文本中的主题/概念——无产品、无 URL、无网站抓取；所有视觉由 LLM 生成（排版/抽象/图表/数据可视化）。

/pr-to-video
GitHub PR（PR URL、 owner/repo#N 引用或“这个 PR”）→ 变更日志/功能揭示/修复/重构讲解，通过 gh CLI 读取。

/embedded-captions
为已有的人物讲解视频添加字幕/副标题（原视频不变）——逐字导轨、嵌入主体背后的高潮场景，或纯电影式嵌入。

/talking-head-recut
为已有的人物讲解/访谈/播客视频包装设计好的图形叠加层——下三分之一、数据标注、动态标题、引用、侧边栏、画中画。

/motion-graphics
短小的、无旁白的、设计驱动的动态图形（约 10 秒以下）——动态文字、统计/图表冲击、Logo 片头、下三分之一、动画推文/标题。输出 MP4 或透明叠加层。

/music-to-video
一首音乐曲目（音频文件，或从视频中提取音频，或根据情绪摘要生成）→ 节拍同步的视频——歌词、幻灯片或动态促销；音乐驱动节奏。

/slideshow
演示文稿/推介 deck/交互式 deck——离散幻灯片、片段揭示、分支、热点导航、演示模式。输出是可导航的 deck，不是渲染视频。

/general-video
其他所有情况——较长或多场景作品、品牌/宣传片、标题卡、静态循环、自由组合。输入和长度无关的通用工作流，也是协作模式（完整工具箱共创）的所在地。

/remotion-to-hyperframes
将现有的 Remotion（React）合成源码移植到 HyperFrames HTML。单向迁移，而非创作。

领域技能（按需加载）

技能
覆盖范围

/hyperframes-core
合成合约—— data-* 时间属性、 class="clip" 、轨道、子合成、变量、框架拥有的媒体播放、确定性规则。

/hyperframes-animation
所有动画知识——原子运动规则、场景蓝图、过渡、运行时适配器（GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU）。

/hyperframes-keyframes
跨运行时的可寻址关键帧编写——GSAP 时间线、CSS 关键帧、Anime.js、WAAPI、FLIP、路径、蒙版、SVG 变形/绘制、3D 深度——以及 hyperframes keyframes 诊断工具用于渲染后的运动检查。

/hyperframes-creative
非动画的创意方向—— frame.md / design.md 、调色板、排版、旁白、节拍规划、音频响应式视觉、合成模式。

/media-use
媒体操作系统——将任何媒体需求（背景音乐、音效、图片、图标、Logo、语音、调色、LUT）解析为冻结的本地文件或可粘贴区块 + 台账记录；当目录找不到时通过 TTS/音乐/图像模型生成；转录、加字幕、去背景，跨项目复用资产。统一音频引擎 + 清单追踪。

/hyperframes-cli
CLI 开发循环—— init 、 lint 、 check 、 snapshot 、 preview 、 render 、 publish 、 doctor ，以及 HeyGen 托管的云渲染（ cloud render ）和 AWS Lambda 渲染（ lambda deploy / render / progress ）。

/hyperframes-registry
通过 hyperframes add 安装和连接注册表区块和组件到合成中。创作新区块或组件以向上游贡献。

/figma
导入 Figma 资源、令牌、组件和故事板部分→重构为运动（帧作为状态读取，而非幻灯片）（REST/CLI）以及 Motion 动画（MCP）和着色器（MCP 源/原生导出）到合成中。

与 Remotion 的对比

HyperFrames 受 Remotion 启发，两者都使用无头 Chrome 和 FFmpeg 渲染视频。主要区别在于创作模型：

特性
HyperFrames
Remotion

创作方式
HTML + CSS + 可寻址动画
React 组件

构建步骤
无需， index.html 可直接播放
需要打包器

代理交接
纯 HTML 文件
JSX / React 项目

库时钟动画
通过适配器实现可寻址、帧精确
需要小心处理时钟动画模式

分布式渲染
本地和 AWS Lambda 渲染路径
Remotion Lambda，成熟的云渲染器

许可证
Apache 2.0
源码可用 Remotion 许可证

注意事项

前置条件 ：如果使用本地 CLI，需要安装 Node.js 22+ 和 FFmpeg。

AI 代理 ：技能需要与支持 skills 的 AI 编码代理配合使用，如 Claude Code、Cursor、Gemini CLI、Codex。

确定性 ：渲染结果由输入精确决定，适合 CI/CD 和回归测试。

开源 ：基于 Apache 2.0 许可证，无按渲染次数收费或商业使用门槛。

限制 ： /slideshow 工作流输出的是可导航的演示文稿，而非视频文件。

更多详情请参阅官方文档： hyperframes.heygen.com 。

试试这样做

  • 使用 /hyperframes 创建一个 10 秒的产品介绍视频，包含淡入标题、背景视频和背景音乐。
  • 使用 /product-launch-video 为我的网站 URL 生成一个 60 秒的营销推广视频。
  • 使用 /faceless-explainer 根据我提供的文本内容，制作一个关于人工智能概念的解释性视频。

作者：heygen-com 自媒体人 / å¼€å‘è€ ｜ GitHub Stars 38K ｜ 标签：视频 自动化 已认证 开源许可: Apache

来源：colaos.ai ｜ Skill ID：hyperframes