mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 18:01:20 +08:00
ukimsanov
100 lines
3.7 KiB
Plaintext
100 lines
3.7 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."
|
|
related:
|
|
- /workflows
|
|
- /go-further
|
|
- /help
|
|
---
|
|
|
|
import { QuickstartContinuationGrid } from "/snippets/quickstart-continuation-grid.jsx";
|
|
import { DocsVideo } from "/snippets/docs-video.jsx";
|
|
import { AgentAction } from "/snippets/agent-action.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.mp4"
|
|
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-quickstart-v5.jpg"
|
|
chapters={[
|
|
{ time: 0, label: "Make the request" },
|
|
{ time: 8.4, label: "Confirm the intent" },
|
|
{ time: 17, label: "Get a real project" },
|
|
{ time: 22.8, label: "Watch the first version" },
|
|
{ time: 27.8, label: "Choose how to continue" },
|
|
{ time: 35.6, label: "The result" },
|
|
]}
|
|
transcript={[
|
|
{ time: 0.2, text: "Let's make one." },
|
|
{ time: 2.2, text: "This is the whole request." },
|
|
{ time: 5.55, text: "One sentence, and a link." },
|
|
{ time: 9.2, text: "Your agent reads it back," },
|
|
{
|
|
time: 10.75,
|
|
text: "confirms what matters, and asks what's missing.",
|
|
},
|
|
{ time: 14.55, text: "You never had to write a specification." },
|
|
{ time: 17.6, text: "Then it becomes a real project." },
|
|
{ time: 19.85, text: "Scenes, media, timing. Files you own." },
|
|
{ time: 23.5, text: "And a first version you can watch." },
|
|
{ time: 28.45, text: "From here, three doors into the same project." },
|
|
{
|
|
time: 31.3,
|
|
text: "Ask the agent. Open Studio. Or use the command line.",
|
|
},
|
|
{ time: 36.55, text: "Ten seconds, from one sentence." },
|
|
{ time: 40.1, text: "Now make yours." },
|
|
]}
|
|
/>
|
|
</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>
|
|
|
|
## 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 />
|
|
|
|
<AgentAction request="Using /hyperframes, make a 10-second product intro for https://example.com." />
|
|
|
|
## What next?
|
|
|
|
<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>
|