---
title: "What is HyperFrames?"
sidebarTitle: "What HyperFrames is"
description: "See what an AI agent can make with ordinary web technology."
related:
  - /quickstart
  - /examples
  - /go-further
---

import { DocsVideo, ShowcaseWall } from "/snippets/docs-video.jsx";
import { LiveReferenceProject } from "/snippets/live-reference-project.jsx";

<div className="hf-docs-video-frame">
  <DocsVideo
    title="What is HyperFrames?"
    src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-introduction-v5.mp4"
    poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-introduction-v5.jpg"
    chapters={[
      { time: 0, label: "What it is" },
      { time: 6.6, label: "Why agents can build it" },
      { time: 16, label: "Real films, made as web pages" },
      { time: 31.7, label: "The editable project" },
      { time: 40.8, label: "Studio and render" },
      { time: 48.8, label: "The whole idea" },
    ]}
    transcript={[
      { time: 0.45, text: "So — what exactly is HyperFrames?" },
      { time: 3.96, text: "It turns HTML into video." },
      {
        time: 6.61,
        text: "And that matters, because your agent already writes HTML, CSS and JavaScript. There's no new language for it to learn.",
      },
      { time: 16, text: "Every film you're watching right now is a web page." },
      {
        time: 19.67,
        text: "The layouts, the typography, the interfaces, the animations, the transitions, the effects — all of it authored as HTML, CSS and JavaScript by an AI agent.",
      },
      {
        time: 31.76,
        text: "The footage, the images, the narration, the music, the sound — those are real files, assembled into that same editable project.",
      },
      { time: 40.83, text: "Open it in Studio. Move a clip. Change a word." },
      {
        time: 44.56,
        text: "Then one command renders every frame, and hands you a file.",
      },
      {
        time: 48.89,
        text: "That's the whole idea. A request. An agent. An editable project. A video.",
      },
    ]}
  />
</div>

HyperFrames is an open-source framework that turns HTML into video. You make the request; an AI agent builds an editable project; HyperFrames plays or renders it.

## What can it make?

Every tile below is a finished HyperFrames film. Open one to watch it with sound.

<ShowcaseWall />

## Three things to know

**Agent-built.** You describe the video; the agent writes the HTML, CSS, and JavaScript. You do not need to write code for this path.

**Editable.** The result is a project folder, not a flattened black box. An agent, Studio, and your own tools can work on the same files.

**Reliable render.** HyperFrames asks the project for each exact frame instead of
depending on live playback, so a slow machine does not drop moments from the
finished video.

## Change the project yourself

This is the same real HTML project used in the first-video walkthrough. Change
its words or accent, then press Play.

<LiveReferenceProject
  src="https://static.heygen.ai/hyperframes-oss/docs/reference-project/live/index-v2.html"
  poster="https://static.heygen.ai/hyperframes-oss/docs/reference-project/live/poster-v2.jpg"
/>

## Make one

<Card title="Make your first video" icon="play" href="/quickstart" horizontal arrow>
  Install the skills, make one short request, and choose how you want to continue.
</Card>

[Go further →](/go-further) · [Build on HyperFrames →](/developers)