mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-15 22:08:03 +00:00
126 lines
4.5 KiB
Plaintext
126 lines
4.5 KiB
Plaintext
---
|
|
title: "Make your first video"
|
|
description: "Go from your own source material to a reviewable HyperFrames video in Studio, then export it."
|
|
---
|
|
|
|
**You need:** an AI coding agent, Node.js, and an empty project folder.
|
|
|
|
## 1. Choose what you are starting with
|
|
|
|
<AccordionGroup>
|
|
<Accordion title="A product or website" icon="globe">
|
|
```text
|
|
/hyperframes Make a 30-second launch video for https://example.com.
|
|
It is for small design teams. Show the real product interface, focus on
|
|
how quickly a team can share a result, and end with “Try it together.”
|
|
Keep the pacing calm and premium.
|
|
```
|
|
</Accordion>
|
|
<Accordion title="Notes, a script, or an idea" icon="lightbulb">
|
|
```text
|
|
/hyperframes Turn these notes into a 45-second visual explainer for a
|
|
non-technical audience. The viewer should understand the three stages
|
|
and why the second one matters. Use diagrams and typography rather than
|
|
stock footage.
|
|
```
|
|
</Accordion>
|
|
<Accordion title="Existing footage" icon="video">
|
|
```text
|
|
/hyperframes Add clean word-level captions to this interview clip.
|
|
Keep the footage and audio unchanged. Use high contrast and emphasize
|
|
only the most important phrase in each sentence.
|
|
```
|
|
</Accordion>
|
|
<Accordion title="A pull request" icon="code-pull-request">
|
|
```text
|
|
/hyperframes Turn https://github.com/example/repo/pull/123 into a
|
|
45-second feature reveal. Lead with the user impact, then explain the
|
|
two most important implementation decisions.
|
|
```
|
|
</Accordion>
|
|
<Accordion title="A song or audio track" icon="music">
|
|
```text
|
|
/hyperframes Make a 30-second vertical promo driven by this music track.
|
|
Cut the attached images on the major beats and reserve the chorus for
|
|
the strongest product moment.
|
|
```
|
|
</Accordion>
|
|
</AccordionGroup>
|
|
|
|
If none resembles your job, use the [workflow chooser](/workflows).
|
|
|
|
## 2. Install the HyperFrames guidance
|
|
|
|
Open the project folder in your agent and run:
|
|
|
|
```bash
|
|
npx hyperframes skills update
|
|
```
|
|
|
|
This installs the core HyperFrames guidance. The `/hyperframes` router adds a specialized creation workflow when the request needs one.
|
|
|
|
<Note>
|
|
Start a fresh agent session if `/hyperframes` is not recognized after installation.
|
|
</Note>
|
|
|
|
## 3. Send the request
|
|
|
|
Paste the request you chose, attach or link the real source material, and add anything that must be accurate.
|
|
|
|
A useful first request answers:
|
|
|
|
- What should exist when the work is finished?
|
|
- Who will watch it?
|
|
- What source should the agent use?
|
|
- What format, duration, or tone matters?
|
|
- What must appear, and what must not?
|
|
|
|
Do not write a technical animation specification unless a particular motion is essential. The agent should solve the communication problem first.
|
|
|
|
## 4. Approve the creative direction
|
|
|
|
Before building a fresh project, the agent confirms the important choices. Read the response like a short creative brief:
|
|
|
|
- Is the main message correct?
|
|
- Does the audience match?
|
|
- Is the proposed format and length useful?
|
|
- Does the visual direction fit?
|
|
- Are exact claims, words, screens, and exclusions captured?
|
|
|
|
Correct misunderstandings here. Changing the direction before the build is faster than rebuilding a finished video around the wrong idea.
|
|
|
|
## 5. Review the first version in Studio
|
|
|
|
The agent starts Studio and gives you a local project link. Watch the complete video once before editing individual moments.
|
|
|
|
<Frame caption="Studio opens the real project so you can review the sequence, select visible elements, change timing, and export versions.">
|
|
<img src="/images/studio/overview.jpg" alt="HyperFrames Studio showing the video canvas, editing panels, and timeline" />
|
|
</Frame>
|
|
|
|
Check:
|
|
|
|
1. Can a new viewer understand the opening?
|
|
2. Is the main promise or idea accurate?
|
|
3. Does every scene earn its time?
|
|
4. Can text be read before it leaves?
|
|
5. Does the ending give the viewer somewhere to land?
|
|
|
|
Use Studio for a direct, visible change. Ask the agent when the change affects the story, multiple scenes, source files, or new media.
|
|
|
|
```text
|
|
Make the opening faster and reveal the product by three seconds.
|
|
Keep the current colors. Replace the final line with “Try it free.”
|
|
```
|
|
|
|
[Take the Studio tour →](/studio/tour)
|
|
|
|
## 6. Export the result
|
|
|
|
Open **Renders**, choose the format and resolution, and start the export.
|
|
|
|
- Choose **MP4** for a normal finished video.
|
|
- Choose **WebM** or **MOV** when another workflow needs transparency or a specific codec.
|
|
- Watch the exported file once, including the final frame and audio ending.
|
|
|
|
[See every export option →](/studio/export)
|