不用学任何剪辑软件,一句话创作电影级视频

项目简介

编写 HTML，渲染视频。为智能体而生。

Hyperframes 是一个开源视频渲染框架，让你能够创建、预览和渲染基于 HTML 的视频合成内容 —— 对 AI 智能体提供一流支持。

快速开始

选项 1：使用 AI 编码智能体（推荐）

安装 Hyperframes 技能，然后描述你想要的视频：

npx skills add heygen-com/hyperframes

这会教你的智能体（Claude Code、Cursor、Gemini CLI、Codex 等）如何正确编写合成内容和 GSAP 动画。在 Claude Code 中，技能会注册为斜杠命令 —— 使用 /hyperframes 来创作合成内容，/hyperframes-cli 执行 CLI 命令，/gsap 获取动画帮助。

试试这些示例提示

复制以下任意一条给你的智能体即可开始。使用 /hyperframes 前缀可以显式加载技能上下文，确保第一次就能得到正确输出。

冷启动 —— 直接描述需求：

Using /hyperframes，创建一个 10 秒的产品介绍视频，包含淡入标题、背景视频和背景音乐。

热启动 —— 将现有内容转为视频：

查看这个 GitHub 仓库 https://github.com/heygen-com/hyperframes，并使用 /hyperframes 向我解释它的用途和架构。

使用 /hyperframes 将附加的 PDF 总结成一个 45 秒的推介视频。

使用 /hyperframes 将这个 CSV 转为动画柱状图竞速视频。

特定格式：

使用 /hyperframes 制作一个 9:16 的 TikTok 风格钩子视频，主题是 [topic]，带弹跳字幕并与 TTS 旁白同步。

迭代修改（像和视频剪辑师对话一样）：

把标题放大 2 倍，切换到深色模式，并在结尾添加淡出效果。

在 0:03 秒处添加一个下三分之一栏，显示我的姓名和职位。

智能体会负责脚手架搭建、动画制作和渲染。更多提示模式请参考提示词指南。

选项 2：手动创建项目

npx hyperframes init my-videocd my-videonpx hyperframes preview      # 在浏览器中实时预览（热重载）npx hyperframes render       # 渲染为 MP4

hyperframes init 会自动安装技能，你随时可以交给 AI 智能体继续开发。

环境要求： Node.js >= 22，FFmpeg

为什么选择 Hyperframes？

HTML 原生 —— 合成内容就是带 data- 属性的普通 HTML 文件，无需 React，也无需专有 DSL。
AI 优先 —— 智能体本来就懂 HTML。CLI 默认非交互式，专为智能体驱动的工作流设计。
确定性渲染 —— 输入相同，输出完全一致。适合自动化流水线。
Frame Adapter 模式 —— 可以自由选择动画运行时（GSAP、Lottie、CSS、Three.js 等）。

工作原理

用带 data- 属性的 HTML 定义你的视频：

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

在浏览器中即时预览，支持本地或 Docker 中渲染为 MP4。

组件目录

提供 50+ 现成可用的区块和组件 —— 社交覆盖层、着色器转场、数据可视化、电影级特效等：

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

完整目录请访问：hyperframes.heygen.com/catalog

文档

完整文档地址：hyperframes.heygen.com/introduction（包含快速开始、指南、API 参考、组件目录）

主要包（Packages）

包名	描述
hyperframes	CLI 工具（创建、预览、检查、渲染）
@hyperframes/core	类型、解析器、生成器、linter、运行时、Frame Adapter
@hyperframes/engine	可寻址的页面转视频捕获引擎（Puppeteer + FFmpeg）
@hyperframes/producer	完整渲染流水线（捕获 + 编码 + 音频混音）
@hyperframes/studio	基于浏览器的合成内容编辑器 UI
@hyperframes/player	可嵌入的 `<hyperframes-player>` Web Component
@hyperframes/shader-transitions	WebGL 着色器转场库

技能（Skills）

Hyperframes 内置了专门教 AI 智能体的技能（通用文档覆盖不到的框架特定模式）：

npx skills add heygen-com/hyperframes

技能名称	教学内容
hyperframes	HTML 合成创作、字幕、TTS、音频响应动画、转场
hyperframes-cli	CLI 命令：init、lint、preview、render、transcribe、tts、doctor
hyperframes-registry	通过 `hyperframes add` 安装区块和组件
gsap	GSAP 动画 API、时间线、缓动、ScrollTrigger、插件等

项目地址

https://github.com/heygen-com/hyperframes

扫码加入技术交流群，备注「开发语言-城市-昵称」

合作请注明

如果你觉得这篇文章不错，别忘了点赞、在看、转发给更多需要的小伙伴哦！我们下期再见！