Files
hyperframes/docs/studio/index.mdx
T

108 lines
3.7 KiB
Plaintext

---
title: "Review and edit a project in Studio"
sidebarTitle: "Studio overview"
---
import { StudioExplorer } from "/snippets/StudioExplorer.jsx";
<StudioExplorer />
## Open the project
From the HyperFrames project folder, run:
```bash
npx hyperframes preview
```
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).