mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-15 22:08:03 +00:00
113 lines
4.4 KiB
Plaintext
113 lines
4.4 KiB
Plaintext
---
|
|
title: "Review and edit a project in Studio"
|
|
sidebarTitle: "Studio overview"
|
|
description: "Understand an existing HyperFrames project, make the right kind of change, and export a version."
|
|
---
|
|
|
|
HyperFrames Studio is the visual workspace for a project that an agent or teammate has already created.
|
|
|
|
Use it to review the story, play the built result, make direct visual changes, ask the agent for broader revisions, and export finished versions. You do not need to understand the project's HTML architecture to start.
|
|
|
|
<Frame caption="The Studio workspace: project navigation, canvas, Inspector, playback, and timeline remain connected to the same project files.">
|
|
<img src="/images/studio/overview.jpg" alt="HyperFrames Studio showing the canvas, Inspector, playback controls, and timeline" />
|
|
</Frame>
|
|
|
|
## Open the project
|
|
|
|
From the HyperFrames project folder, run:
|
|
|
|
```bash
|
|
npx hyperframes preview
|
|
```
|
|
|
|
Keep the terminal process running and open the local URL it prints.
|
|
|
|
## First, understand the two views
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Storyboard: review the plan" icon="table-cells-large" href="/studio/storyboard">
|
|
Check the sequence, direction, status, narration, and agent feedback before focusing on individual pixels.
|
|
</Card>
|
|
<Card title="Preview: review the built result" icon="play" href="/studio/tour">
|
|
Play the video and work with the canvas, Inspector, timeline, Code, Assets, Catalog, Variables, and Renders.
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
They are two views of the same project. Switching views does not create a separate version.
|
|
|
|
## The safest review order
|
|
|
|
<Steps>
|
|
<Step title="Review the storyboard">
|
|
Confirm that the sequence and intended message still make sense.
|
|
</Step>
|
|
<Step title="Watch the complete result once">
|
|
Resist fixing the first imperfect detail immediately. Notice where the story becomes unclear, slow, unreadable, or visually repetitive.
|
|
</Step>
|
|
<Step title="Choose one visible task">
|
|
Use the pages below for the specific change instead of learning every Studio control.
|
|
</Step>
|
|
<Step title="Run a quick check">
|
|
Resolve visible warnings or copy the generated message to your agent when the fix requires source work.
|
|
</Step>
|
|
<Step title="Export a named version">
|
|
Keep useful iterations rather than overwriting the only file you can compare.
|
|
</Step>
|
|
</Steps>
|
|
|
|
## What do you want to change?
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Text, layout, or design" icon="pen-ruler" href="/studio/canvas">
|
|
Select, move, resize, rotate, crop, and style something you can see.
|
|
</Card>
|
|
<Card title="Timing or clip order" icon="timeline" href="/studio/timeline">
|
|
Move, trim, split, align, and organize clips.
|
|
</Card>
|
|
<Card title="Animation" icon="wand-magic-sparkles" href="/studio/animation">
|
|
Adjust keyframes, easing, motion paths, or recorded movement.
|
|
</Card>
|
|
<Card title="Media or a reusable visual" icon="photo-film" href="/studio/assets-and-blocks">
|
|
Import a file, reuse a project asset, or add something from the Catalog.
|
|
</Card>
|
|
<Card title="Captions or variables" icon="closed-captioning" href="/studio/captions">
|
|
Correct transcript timing and text, or update reusable project values.
|
|
</Card>
|
|
<Card title="Export a version" icon="download" href="/studio/export">
|
|
Choose a format and resolution, render, and review the output.
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
## Studio or agent?
|
|
|
|
```mermaid
|
|
flowchart TD
|
|
A["Can you point at the exact thing to change?"] -->|Yes| B["Start in Studio"]
|
|
A -->|No| C["Describe the desired outcome to the agent"]
|
|
B --> D{"Does the change affect several scenes or source files?"}
|
|
D -->|No| E["Make the direct edit"]
|
|
D -->|Yes| C
|
|
```
|
|
|
|
| Change | Good place to start |
|
|
| --- | --- |
|
|
| Move a title or adjust its color | Studio |
|
|
| Trim a clip or split it at the playhead | Studio |
|
|
| Make the opening explain the product sooner | Agent |
|
|
| Add a completely new scene with new media | Agent |
|
|
| Fix a warning you do not understand | Copy it to the agent from Studio |
|
|
| Export another resolution of the same layout | Studio |
|
|
| Redesign the layout for another aspect ratio | Agent, then review in Studio |
|
|
|
|
## Finish safely
|
|
|
|
Before sharing:
|
|
|
|
1. Play the entire project from the beginning.
|
|
2. Check the final frame and audio ending.
|
|
3. Run the available lint or project check.
|
|
4. Export a version with a useful name.
|
|
5. Watch the exported file once.
|
|
|
|
If something blocks the task, [start from the visible symptom](/help).
|