mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-08-31 02:41:44 +00:00
ukimsanov
158d0fea1f
Thirty-two published videos were the raw render output. One 20-second catalog preview was 60 MB at 25 Mbps — Blu-ray bitrate for a screen capture in a docs page. Nothing autoplays, so no page shipped that silently, but a reader who pressed play paid for it. Re-encoded at 1280 wide, CRF 28, faststart, keeping audio where it existed. Measured PSNR against the originals at ~38.5 dB, which is visually identical — the first check I ran returned nothing and I mistook that for a pass, so this number comes from a filter that actually worked. Worth correcting one thing I said earlier: the catalog is not systemically over-encoded. 190 videos, 0.36 GB, about 1.9 MB each. Six were over 10 MB. I found two monsters and generalised from them. Pages carrying more than 8 MB of video: 26 before, and the heaviest went from 140 MB to under 15 MB. The durable fix is in generate-catalog-previews.ts, which had no delivery encode at all — it published the render master directly. It has a web pass now, so the next preview is born small instead of being cleaned up later.
46 lines
1.6 KiB
Plaintext
46 lines
1.6 KiB
Plaintext
---
|
|
title: "What is HyperFrames?"
|
|
sidebarTitle: "What HyperFrames is"
|
|
description: "See what an AI agent can make with ordinary web technology."
|
|
---
|
|
|
|
import { DocsVideo, ShowcaseWall } from "/snippets/docs-video.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-v2.mp4"
|
|
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-introduction-v5.jpg"
|
|
/>
|
|
</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.
|
|
|
|
## 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>
|
|
|
|
## Related topics
|
|
|
|
- [Watch more finished HyperFrames work](/examples)
|
|
- [Go further with an existing project](/go-further)
|
|
- [Build on HyperFrames as a developer](/developers)
|