HyperFrames logo

HyperFrames

Freemium
访问

面向 AI 智能体和开发者的开源视频创作系统,使用 HTML、CSS 和 JavaScript

什么是 HyperFrames?

HyperFrames 是一款开源视频创作系统,允许 AI agents 通过编写 HTML、CSS 和 JavaScript 来组合视频。该网站将其描述为起源于 HeyGen,并在 Apache 2.0 许可下为社区构建。

快速入门展示了两种主要使用方式:使用已安装 HyperFrames skills 的 AI 编码代理,或通过 CLI 手动创建项目。在这两种情况下,工作流都围绕构建 composition、在 Hyperframes Studio 中预览,以及渲染 MP4 等视频输出展开。

文档还提供了一系列可复用 blocks 的目录,其中包括一个 3D iPhone 和 MacBook 展示 block,它使用 GLTF 模型和实时的 HTML-in-Canvas 屏幕内容。这表明 HyperFrames 更适合用于可组合、代码驱动的视频场景,而不是封闭的纯视觉工具。

HyperFrames 能做什么?

基于代码的视频创作

HyperFrames 被描述为一种让 AI agents 通过编写 HTML、CSS 和 JavaScript 来组合视频的方式,使用熟悉的 Web 基础能力,而不是单独的可视化编辑器。

面向 agent 的工作流

快速入门文档介绍了一种 AI agent 工作流:先安装 HyperFrames skills,然后让 agent 将请求路由到合适的视频工作流。

基于 skills 的任务路由

核心 skill 集包括 composition 结构、animation adapters、creative direction、CLI 工具、media preprocessing,以及用于目录 blocks 和 components 的 registry。

项目脚手架与文件结构

手动工作流包括 `npx hyperframes init`、交互式项目向导,以及包含 `index.html`、`compositions/`、`assets/` 和 `meta.json` 的项目结构。

本地预览与实时更新

`npx hyperframes preview` 会在浏览器中打开 Hyperframes Studio,支持热重载,并在文件变化时更新 composition。

可复用的目录 blocks

网站还记录了诸如 `vfx-iphone-device` 之类的 catalog blocks,它们会安装到宿主 composition 中,并包含 GLTF 模型和 HTML-in-Canvas 内容等资源。

使用场景

“AI 辅助视频创作”

当你希望 AI agent 根据提示词起草一个视频 composition,然后通过基于代码的编辑进行完善时,可以使用 HyperFrames。

“本地手动视频项目”

当你想手动初始化项目、查看生成的文件结构,并直接在 `index.html` 和子 compositions 中工作时,可以使用 CLI 工作流。

“可复用的动效与展示场景”

当你正在构建重复出现的场景类型,例如设备展示或带有结构化资源和预定义 composition 模式的产品演示时,可以使用可复用 blocks 目录。

“在浏览器中快速迭代”

当你需要在浏览器中观察 composition 更新,并快速迭代时间轴、布局、字幕或动画时,可以使用预览与热重载循环。

常见问题

我该如何开始使用 HyperFrames?

你可以先通过 `npx skills add heygen-com/hyperframes` 安装 HyperFrames skills,然后提示 AI 编码代理,或者使用 `npx hyperframes init` 手动创建项目。

HyperFrames 支持哪些 AI 代理?

快速入门说明,安装 skills 后,HyperFrames 可与 Claude Code、Cursor、Gemini CLI、Codex、Google Antigravity 和 GitHub Copilot CLI 等 AI 编码代理配合使用。

在本地运行 HyperFrames 需要什么?

对于手动项目,文档中列出的前置条件是用于本地渲染的 Node.js 22+ 和 FFmpeg。

预览是如何工作的?

快速入门说明,`npx hyperframes preview` 会在浏览器中打开 Hyperframes Studio,并在 `index.html` 发生变化时自动更新预览。

HyperFrames compositions 使用什么格式?

源内容显示 HyperFrames 的 compositions 由 HTML、CSS、JS、`data-*` 属性以及诸如 `class="clip"` 之类的定时元素构成,但未描述单独的托管集成层。

快速信息

类别
AI 视频创作
许可证
Apache 2.0
起源
起源于 HeyGen
主要工作流
AI agent skills 或手动 CLI 项目设置
运行时要求
用于本地渲染的 Node.js 22+ 和 FFmpeg
源域名
hyperframes.heygen.com

HyperFrames 流量分析

流量数据仅供参考。

域名评分
84

HyperFrames 替代品

Orca logo

Orca

onorca.dev

Orca 是用于借助编码代理交付产品的智能体开发环境,支持在隔离工作树中并行运行多个 CLI 代理,并提供桌面端和移动端协同工作流。

blop logo

blop

blopai.com

编写、运行、聚类并修复浏览器测试的 QA 代理

RLAMA logo

RLAMA

rlama.dev

本地 AI 平台,用于构建 RAG 系统和智能代理

Kastra logo

Kastra

kastra.ai

Kastra 是面向 AI 系统的授权基础设施,可在提示词、工具调用、Shell 命令、API 请求和浏览器操作执行前进行检查,帮助团队执行策略、保留签名审计记录,并治理本地及企业级 AI 工作流。

AakarDev AI logo

AakarDev AI

aakar-ai.dev

在一个仪表板中管理 AI 供应商、项目配置、日志和分析,支持 BYOK 工作流。

Termo logo

Termo

termo.ai

Termo 是 AI 智能体平台,每个智能体运行于独立虚拟机,适合研究、自动化和开发任务。