mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 18:01:20 +08:00
ukimsanov
91 lines
3.4 KiB
Plaintext
91 lines
3.4 KiB
Plaintext
---
|
|
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)
|