AI开源社区

菜单

欣淇
发布于 2026-05-12 / 1 阅读
0
0

🎬 HyperFrames：17.5k Stars，用 HTML 写视频，AI Agent 也能玩

🎬 HyperFrames：17.5k Stars，用 HTML 写视频，AI Agent 也能玩

项目地址：https://github.com/heygen-com/hyperframes | ⭐ 17,470 | 🛠 TypeScript | 作者：HeyGen

老实说，视频制作在开发者眼里一直是个黑箱——你要么学 Premiere Pro，要么啃 Remotion 的 React 组件。HyperFrames 的解决思路很简单：你写 HTML，它给你视频。

一、为什么是 HTML？

HyperFrames 的核心判断是：AI Agent 已经会说 HTML 了。React 组件需要构建步骤、JSX 语法、bundle 工具链，但 HTML 就是纯文本 + 标签，Agent 随手就能生成。

HyperFrames vs Remotion 的核心区别：

  • 写法：HyperFrames 用 HTML + CSS + GSAP，Remotion 用 React 组件（TSX）
  • 构建步骤：HyperFrames 不需要，Remotion 需要 bundler
  • 许可证：HyperFrames 是 Apache 2.0 完全开源，Remotion 是源码可用但非开源，商用有限制
  • 渲染：两者都是确定性的，同一输入 = 同一输出

    • 💡 HyperFrames 的灵感来自 Remotion，但赌的是另一条路——让 Agent 写 HTML 比写 React 门槛低得多。

    最骚的操作是它把帧适配器（Frame Adapter）模式玩出了花——GSAP、Anime.js、Lottie、Three.js、CSS 动画，随便你挑，全部可 seek、可预热、可确定帧输出。

    二、一行命令开始

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

    需要 Node.js >= 22 和 FFmpeg。一个命令拉一个项目，预览、导出无缝切换。

    三、跟 AI Agent 配合

    这才是真正的亮点。装个 skills 插件，你的 Agent 就能写视频了：

    npx skills add heygen-com/hyperframes

    然后直接跟 Claude Code、Cursor 或 Codex 说：

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

    Agent 会帮你搭框架、写动画、调渲染。你还能说「标题放大两倍」「改成暗色模式」「在 3 秒处加个底部字幕栏」——跟视频编辑器对话一样。

    视频内容用 HTML + data 属性定义：

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

    每个元素通过 data-start、data-duration、data-track-index 控制时间轴位置，预览就是直接打开 HTML 文件。

    四、内置 50+ 组件库

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

    从转场特效到数据可视化，全部开箱即用。完整目录在 hyperframes.heygen.com/catalog。

    五、踩坑提醒

  • Node.js 版本：必须 >= 22，低版本装不上依赖
  • FFmpeg：渲染必备，没装会静默失败
  • Git LFS：如果你 clone 仓库做开发，先装 Git LFS，否则 test 目录的 MP4 基准文件拿不到

    • 总结

  • 用 HTML 写视频，不需要 React、不需要构建工具
  • AI Agent 原生支持——Agent 写 HTML 零门槛
  • Apache 2.0 完全开源，商用无限制
  • 50+ 预制组件，从转场到图表直接用
  • 帧适配器模式，GSAP/Lottie/Three.js 随便选

    • 🎬 HyperFrames: 17.5k Stars, Write HTML, Get Video — Built for AI Agents

    Project: https://github.com/heygen-com/hyperframes | ⭐ 17,470 | 🛠 TypeScript | By: HeyGen

    Let's be honest — video production has always been a black box for developers. You either learn Premiere Pro or wrestle with Remotion's React components. HyperFrames takes a simpler approach: you write HTML, it renders a video.

    Why HTML?

    The core bet is simple: AI agents already speak HTML. React components need build steps, JSX syntax, and bundler toolchains. HTML is just plain text with tags — any agent can generate it on the fly.

    Key differences vs Remotion:

  • Authoring: HyperFrames uses HTML + CSS + GSAP, Remotion uses React (TSX)
  • Build step: HyperFrames has none, Remotion requires a bundler
  • License: HyperFrames is Apache 2.0 (OSI-approved fully open source), Remotion is source-available with paid tiers for commercial use
  • Rendering: Both are deterministic — same input, same output

    • The killer feature is the Frame Adapter pattern — GSAP, Anime.js, Lottie, Three.js, CSS animations, pick your runtime. All of them are seekable, pre-warmable, and produce deterministic frame output.

    Quick Start

    npx hyperframes init my-video
cd my-video
npx hyperframes preview      # browser preview with live reload
npx hyperframes render       # export to MP4

    Requires Node.js >= 22 and FFmpeg. One command scaffolds a project, preview opens it in the browser, render spits out an MP4.

    AI Agent Integration

    This is where it shines. Install the skills plugin and your agent can write videos:

    npx skills add heygen-com/hyperframes

    Then just tell Claude Code, Cursor, or Codex:

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

    The agent handles scaffolding, animation, and rendering. You can iterate like you're talking to a video editor: "Make the title 2x bigger, swap to dark mode, add a fade-out."

    Video compositions use HTML with data attributes:

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

    Each element controls its position on the timeline via data-start, data-duration, and data-track-index. Preview is just opening an HTML file.

    Built-in Component Library (50+)

    npx hyperframes add flash-through-white   # shader transition
npx hyperframes add instagram-follow      # social overlay
npx hyperframes add data-chart            # animated data chart

    From transitions to data visualizations, all ready to use. Browse the full catalog at hyperframes.heygen.com/catalog.

    Gotchas

  • Node.js: Must be >= 22, older versions won't work
  • FFmpeg: Required for rendering, failure is silent without it
  • Git LFS: If cloning the repo for development, install Git LFS first for the MP4 baseline test files

    • Summary

  • Write HTML, get video — no React, no build tools
  • Native AI agent support, zero learning curve for agents
  • Apache 2.0 fully open source, no commercial restrictions
  • 50+ pre-built components from transitions to charts
  • Frame adapter pattern supports GSAP, Lottie, Three.js, CSS

    • 🦀 DeepSeek TUI：2...
    🚀 Agent TARS：字节跳...

    评论