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.
81 lines
2.9 KiB
Plaintext
81 lines
2.9 KiB
Plaintext
---
|
|
title: "Make your first video"
|
|
description: "Install the HyperFrames skills, make one short request, and continue with your agent, Studio, or the CLI."
|
|
---
|
|
|
|
import { QuickstartContinuationGrid } from "/snippets/quickstart-continuation-grid.jsx";
|
|
import { DocsVideo } from "/snippets/docs-video.jsx";
|
|
|
|
<div className="hf-docs-video-frame">
|
|
<DocsVideo
|
|
title="A beginner creates a first HyperFrames video from one short request, then continues with an agent, Studio, or the CLI."
|
|
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-quickstart-v5-v2.mp4"
|
|
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-quickstart-v5.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<Note>
|
|
HyperFrames is free and open-source, and local rendering does not use HeyGen credits. Your coding
|
|
agent and any optional hosted, voice, avatar, or generated-media services may have their own
|
|
costs.
|
|
</Note>
|
|
|
|
## The short way: hand it to your agent
|
|
|
|
If you already have a coding agent open in a folder, paste this and skip the
|
|
rest of the page. It installs the skills, makes the video, and opens the
|
|
preview — you only change the URL.
|
|
|
|
```text
|
|
Set this folder up for HyperFrames and make me a video.
|
|
|
|
1. Run: npx hyperframes skills update
|
|
2. Then, using /hyperframes, make a 10-second product intro for https://example.com
|
|
3. Open the local preview when it is done and tell me the project folder.
|
|
```
|
|
|
|
Swap `https://example.com` for the page you want the video to show. Everything
|
|
below is the same thing done by hand, if you would rather see each step.
|
|
|
|
## 1. Install the skills
|
|
|
|
Run this in your project folder:
|
|
|
|
```bash
|
|
npx skills add heygen-com/hyperframes --full-depth
|
|
```
|
|
|
|
Choose **Core Skills** in the picker. Keep `--full-depth` so the installer uses the current repository version. Then open or restart your coding agent in that folder.
|
|
|
|
## 2. Ask for the video
|
|
|
|
```text
|
|
Using /hyperframes, make a 10-second product intro for https://example.com.
|
|
```
|
|
|
|
Replace `https://example.com` with the real page you want the video to show. The agent will propose
|
|
a direction and ask for anything important that is missing. You do not need to write a production
|
|
specification.
|
|
|
|
## 3. Continue from the first version
|
|
|
|
The agent leaves you with an editable project folder and opens its local preview.
|
|
To reopen that preview later, run `npx hyperframes preview` inside the project
|
|
folder. Watch the first version once and check the story, facts, readable text,
|
|
and sound; it is not a guaranteed final cut. All three paths below work with
|
|
the same project.
|
|
|
|
<QuickstartContinuationGrid />
|
|
|
|
## Related topics
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Choose a specific workflow" icon="route" href="/workflows">
|
|
Product launch, explainer, captions, recut, pull request, music, motion graphic, or
|
|
presentation.
|
|
</Card>
|
|
<Card title="Go further" icon="arrow-right" href="/go-further">
|
|
Direct the agent, edit in Studio, build richer projects, and finish with confidence.
|
|
</Card>
|
|
</CardGroup>
|