mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-10-30 09:16:55 +00:00
Ular Kimsanov
86dba83972
* docs(studio-app): name the Windows app's words, keys and settings folder The app says PC where a Mac says Mac and takes Ctrl where a Mac takes Cmd; its settings live in %APPDATA%\HyperFrames. Cut out object here needs the Mac image engine (Apple silicon, macOS 14+); Remove background runs on any computer. * docs(guides): split picture and video cut out requirements Pictures cut out on Apple silicon with macOS 14+ or Intel with macOS 13.3+ (imageModels.mjs DARWIN_FLOOR); video cut out needs Apple silicon (imageIpc.mjs models.video checks arm64).
120 lines
7.3 KiB
Plaintext
120 lines
7.3 KiB
Plaintext
---
|
|
title: "Find your way around a project"
|
|
sidebarTitle: "The project screen"
|
|
description: "Every part of a Studio app project: the chat and its @, # and / menus, the Script panel that edits video like a document, Media, Captions, Inspirations and Layers."
|
|
---
|
|
|
|
import { HoverVideo } from "/snippets/hover-video.jsx";
|
|
|
|
import { DocsVideo } from "/snippets/docs-video.jsx";
|
|
|
|
A project has three columns: the chat with your agent on the left, the preview in the middle, and panels on the
|
|
right. The timeline opens under the preview with **Show timeline**.
|
|
|
|
## The chat box: @, # and /
|
|
|
|
Three keys open menus right where you type.
|
|
|
|
<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/at-menu-v2.mp4" poster="/public/images/studio-app/spots/at-menu-v2.jpg" hasAudio={false} label="Typing @ opens the menu of things to add" />
|
|
|
|
**`@` adds something to your message.** The menu groups everything the agent can use: **Media** you added,
|
|
**Scenes & brand kit**, **Inspirations** (moments from real videos), **Captions** styles, **Voices**, other
|
|
**Projects**, **Tools**, or **Add files from your Mac** (**your PC** on Windows). Press **Tab** to jump between groups. Whatever you pick shows as a chip
|
|
above your words, so the agent knows exactly which file or style you mean.
|
|
|
|
<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/hash-tools-v2.mp4" poster="/public/images/studio-app/spots/hash-tools-v2.jpg" hasAudio={false} label="Typing # opens HyperFrames tools" />
|
|
|
|
**`#` picks a tool** for this request: **Storyboard**, **Brand kit**, **HeyGen Voice 1**, **Remove background**,
|
|
**HeyGen Video 1**, **Reference video** or **Create assets** (some accounts also see **Podcast edit** and **Computer
|
|
use**). Use it when
|
|
you want a specific job done the specific way ("#Remove background on the presenter, then put the title behind her").
|
|
The HeyGen ones bill your HeyGen plan when it covers them, otherwise the HeyGen API key in **Settings**.
|
|
|
|
<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/slash-menu-v2.mp4" poster="/public/images/studio-app/spots/slash-menu-v2.jpg" hasAudio={false} label="Typing / opens commands and skills" />
|
|
|
|
**`/` runs a command or turns on a skill.** **/clear** starts a fresh chat (earlier messages stay above) and
|
|
in Claude Code, **/compact** shortens a long one. Below them are ready-made video formats (founder take, AI breakdown reel, cards
|
|
behind you, behind-head captions and more) and any skills you have installed: picking one turns it on for the project.
|
|
|
|
<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/skills-menu-v2.mp4" poster="/public/images/studio-app/spots/skills-menu-v2.jpg" hasAudio={false} label="The Skills menu in the chat header" />
|
|
|
|
The chat header shows which agent, model and effort the next request uses (click to change), and **Skills** lists
|
|
what the agent can use: HyperFrames' own (always on), **Talking-head formats** and **Video workflows** that work only
|
|
when picked, and **Your skills** from Claude Code or Codex.
|
|
|
|
<div style={{ clear: "both" }} />
|
|
|
|
## Script: edit the video like a document
|
|
|
|
Open **Script** at the top of the right panel (on some accounts it opens from a clip's menu instead). Every word
|
|
spoken in your video appears as text. The audio is sent to HeyGen to transcribe it, so this needs your HeyGen sign-in
|
|
on a plan that includes it, or a HeyGen API key in **Settings**.
|
|
|
|
Select words (click the first, Shift-click the last), then choose **Cut** or press <kbd>⌫</kbd>. The words stay in
|
|
the script, struck through, and the cut waits under **Pending video edits** above the chat box with anything else you
|
|
staged. Choose **Send 1 edit** (the count grows as you stage more) and the agent applies them all; the video gets shorter once it's done. To drop a
|
|
cut before sending, delete its row in **Pending video edits**. To bring back words already cut, select them, choose
|
|
**Restore**, and send that too.
|
|
|
|
<DocsVideo
|
|
title="Cut a sentence in the script, then send it to the agent"
|
|
src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/script-demo-v2.mp4"
|
|
poster="/public/images/studio-app/script-demo-v2.jpg"
|
|
aspect="16 / 10"
|
|
autoPlay
|
|
loop
|
|
/>
|
|
|
|
With words selected, the bar offers:
|
|
|
|
- **Comment**: a note on those words for the agent.
|
|
- **Cut** (or **Restore** on cut words).
|
|
- **Fix words**: correct what the transcript heard. The audio stays the same.
|
|
- **Add**: a **Zoom in**, a **B-roll shot** or a **Title card** on those words.
|
|
- **Make clip** (podcast projects): cut the words into a vertical clip of their own.
|
|
- **Ask**: ask your agent about those words.
|
|
|
|
When the agent spots filler or repeated takes, the top of the script shows how many cuts it suggests and how much
|
|
shorter they'd make the video, with **Keep all** and **Cut all**. Click a suggested cut to see why, and keep or cut
|
|
just that one.
|
|
|
|
## Media, Captions, Inspirations, Layers
|
|
|
|
The row of icons at the top of the right panel, **All files**, **Captions**, **Inspirations**, **Layers** (and
|
|
**Reviews** where review is on), switches what the panel shows:
|
|
|
|
<div className="hf-shelf">
|
|
<div>
|
|
<HoverVideo className="hf-spot hf-spot-inline" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/captions-panel-tight-v2.mp4" poster="/public/images/studio-app/spots/captions-panel-tight-v2.jpg" hasAudio={false} label="The Captions panel" />
|
|
<p><strong>Captions:</strong> 91 caption styles. Click one to use it in the chat, then say where it goes.</p>
|
|
</div>
|
|
<div>
|
|
<HoverVideo className="hf-spot hf-spot-inline" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/inspirations-panel-tight-v2.mp4" poster="/public/images/studio-app/spots/inspirations-panel-tight-v2.jpg" hasAudio={false} label="The Inspirations panel" />
|
|
<p><strong>Inspirations:</strong> moments from real videos (motion graphics, A-roll cuts, mobile ads, shaders), with ideas for whatever you selected.</p>
|
|
</div>
|
|
<div>
|
|
<HoverVideo className="hf-spot hf-spot-inline" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/layers-panel-tight-v2.mp4" poster="/public/images/studio-app/spots/layers-panel-tight-v2.jpg" hasAudio={false} label="The Layers panel" />
|
|
<p><strong>Layers:</strong> every element in the video, top to bottom; pick one to select it in the preview.</p>
|
|
</div>
|
|
</div>
|
|
|
|
**Media** lists the project's files by folder. Add one to the chat to talk about it ("use this as the background"),
|
|
and use the plus button to bring in files from your computer.
|
|
|
|
## Framey
|
|
|
|
Framey, the small green character by the preview, shows what your agent is doing and tells you when a video is ready
|
|
or needs you. Change how it looks in **Settings** > **Framey**.
|
|
|
|
## The preview tools
|
|
|
|
Under the preview: **Select** to click any element (right-click it for **Ask Framey**, layer order, **Cut out object
|
|
here** on footage, on a Mac with Apple silicon), **Draw** to circle what should change, and **Comment** to leave a note at a moment. Changes stack
|
|
up and go to the agent together; see [edit a video with the agent](/studio-app/edit-with-the-agent).
|
|
|
|
## Related topics
|
|
|
|
- [Edit a video with the agent](/studio-app/edit-with-the-agent)
|
|
- [Remove a background](/guides/remove-background)
|
|
- [Use your brand kit](/studio-app/brand-kits)
|