ukimsanov
f2bd52650d
Navigation: Start here now holds exactly the four entry points a person can be sent - what it is, make one, choose a workflow, and the Studio overview. The three pages that were sitting in it went where they belong: the project tour is conceptual so it moved to Learn, authentication is configuration so it moved to Developers, and the hosted AI-chat route is a creation surface so it moved to Create with an agent. Width: the theme capped the article shell at 72rem and reserved 28rem of every wide viewport for the contents rail, leaving the reading column at ~664px on a 1600px screen - narrower than the 16:9 video the pages are supposed to show. Raised the shell and returned 9rem from the gutter, taking the column to roughly 950px. Running prose is held near 80 characters because longer lines measurably hurt reading; tables, cards, code, and media use the full width. Added .hf-wide for visuals that should escape the measure entirely. Components: the quickstart source chooser is now Tabs, which is what parallel variants of one instruction want, and the help symptoms are visible sections with their own anchors so support can link a symptom directly instead of the hub. Wrote the doctrine into AGENTS.md - one component per job, cards never point at anchors on their own page, no diagram that restates adjacent prose, and the rules for custom React snippets (named exports, no third-party packages, no CDN).
143 lines
5.3 KiB
Plaintext
143 lines
5.3 KiB
Plaintext
---
|
|
title: "Make your first video"
|
|
description: "Go from your own source material to a reviewable HyperFrames video in Studio, then export it."
|
|
---
|
|
|
|
The goal of this guide is not to finish installation. It is to reach a first video you can watch, improve, and export.
|
|
|
|
**You need:** an AI coding agent, Node.js, and a folder where the agent can create the project. Most first projects take a few minutes to set up, plus the time needed to plan and build the actual video.
|
|
|
|
## 1. Choose what you are starting with
|
|
|
|
Use the closest example. You can change its wording before sending it.
|
|
|
|
<Tabs>
|
|
<Tab title="A product or website">
|
|
```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.
|
|
```
|
|
</Tab>
|
|
<Tab title="Notes or an idea">
|
|
```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.
|
|
```
|
|
</Tab>
|
|
<Tab title="Existing footage">
|
|
```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.
|
|
```
|
|
</Tab>
|
|
<Tab title="A 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.
|
|
```
|
|
</Tab>
|
|
<Tab title="A song">
|
|
```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.
|
|
```
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
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. If you want to get better at this one thing, read [Give your agent a useful brief](/guides/prompting).
|
|
|
|
## 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)
|
|
|
|
## You are done when…
|
|
|
|
You have a video that plays in Studio or an exported file you can watch. Installation alone is not the finish line.
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Choose another workflow" icon="route" href="/workflows">
|
|
Make a product video, explainer, recut, PR video, motion graphic, music video, or presentation.
|
|
</Card>
|
|
<Card title="Get unstuck" icon="life-ring" href="/help">
|
|
Start with the visible symptom when Studio, media, animation, or export is not behaving.
|
|
</Card>
|
|
</CardGroup>
|