Findings24Findings24
HyperFrames logo

HyperFrames

认领

HyperFrames 是一款面向 AI agent 和开发者的开源视频创作系统，支持用 HTML、CSS 和 JavaScript 生成视频，并可通过 agent 工作流或 CLI 在本地预览与渲染。

AI视频剪辑AI智能体开发AI开发者工具
访问网站
HyperFrames preview

概述

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 被描述为一种让 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 更新，并快速迭代时间轴、布局、字幕或动画时，可以使用预览与热重载循环。

Pros and Cons

Pros

  • 允许 AI agents 使用 HTML、CSS 和 JavaScript 生成并编辑视频 compositions。
  • 同时支持 agent 辅助和基于 CLI 的手动工作流。
  • 通过带热重载的 Hyperframes Studio 提供预览循环。
  • 包含文档化的 skills 和 catalog blocks，有助于标准化 composition 结构并复用常见模式。
  • 明确说明为 Apache 2.0 开源。

Cons

  • 这里展示的文档是不完整的，因此公开页面中并未完全说明某些功能、集成和平台细节。
  • 手动使用需要本地前置条件，例如 Node.js 22+ 和 FFmpeg，这会给尚未安装这些组件的用户增加设置工作。
  • 这些页面未提供定价信息或完整的支持集成列表。

FAQ

我该如何开始使用 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"` 之类的定时元素构成，但未描述单独的托管集成层。

Quick Facts

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