ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-10-30 09:16:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(studio): the browser editor in six pages, named the browser editor (#6379)

Browse Source 
* docs(studio): the browser editor in six pages, named the browser editor

* docs(studio): mute where the editor has it, and no solo control

The audio pages still described a solo control and a group-row mute that
the editor does not render. Muting is the speaker button on an audio
track (Mute track / Unmute track), the same toggle on a selected clip,
and the Muted switch; a group is silenced through its members' tracks.
The audio reference drops its solo section for the same reason.
This commit is contained in:
Ular Kimsanov
2026-10-26 06:24:53 +00:00
committed by GitHub
parent afdad4ea38
commit 0390f3f908
56 changed files with 1104 additions and 1437 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/changelog.mdx
+3 -3
View File
@@ -5174,9 +5174,9 @@ what people hit first when they used it, and documents the whole system.
- **Audio:** The audio effects system is documented. There are new pages for
[mixing and presets](/studio/audio-effects), the [voiceover
carve](/studio/voiceover-carve), [groups, mute and
solo](/studio/audio-groups), and [automation
lanes](/studio/audio-automation), plus a [full
carve](/studio/audio-effects#make-music-sit-under-narration), [groups, mute and
solo](/studio/audio-effects#group-tracks), and [automation
lanes](/studio/audio-effects#automate-over-time), plus a [full
reference](/reference/audio-effects) covering every effect, parameter range,
preset, and attribute ([0eca7b1e0](https://github.com/heygen-com/hyperframes/commit/0eca7b1e0aef831bbab1265395f942378468afc0), [#3420](https://github.com/heygen-com/hyperframes/pull/3420)).
docs/concepts/compositions.mdx
+1 -1
View File
@@ -245,7 +245,7 @@ And the source file both cards share:
[Variables](/concepts/variables) covers the types, the bindings that need no
script, CLI overrides, and which value wins. If you are building tooling on
`@hyperframes/core`, `extractCompositionMetadata()` reads the same
`data-composition-variables` array — that is how Studio builds its editing UI.
`data-composition-variables` array — that is how the browser editor builds its editing UI.
## Load a composition's own files from its script
docs/concepts/data-attributes.mdx
+3 -3
View File
@@ -17,7 +17,7 @@ a start, a duration, and a track:
| ------------------ | ------------------------------------------------ |
| `data-start` | When the element enters the composition timeline |
| `data-duration` | How long its timeline slot lasts |
| `data-track-index` | Which Studio lane displays it (optional; the render ignores it) |
| `data-track-index` | Which browser editor lane displays it (optional; the render ignores it) |
Add `class="clip"` to timed DOM and image elements. The runtime keys visibility
off `data-start` rather than the class, but the shared `.clip` rule is what gives
@@ -26,11 +26,11 @@ audio has no visual lifecycle.
## Tracks are not layers
Tracks are the rows Studio draws. They do not decide which element is in front,
Tracks are the rows the browser editor draws. They do not decide which element is in front,
and they do not schedule anything. Use CSS `z-index` for paint order.
Two clips on one track may overlap; the render composites both. Separate tracks
keep an intentional overlap, such as a crossfade, readable in Studio:
keep an intentional overlap, such as a crossfade, readable in the browser editor:
```html
<video
docs/concepts/index.mdx
+7 -7
View File
@@ -16,7 +16,7 @@ project.
flowchart TD
S["Your project folder<br/>HTML, CSS, media"]
A["Agent<br/>story and structure"] <--> S
T["Studio<br/>what you can point at"] <--> S
T["Browser editor<br/>what you can point at"] <--> S
C["CLI<br/>check, preview, render"] <--> S
K["SDK and Player<br/>inside your own product"] <--> S
S --> R["renders/final.mp4"]
@@ -24,26 +24,26 @@ flowchart TD
## The source is the project
The agent, Studio, CLI, SDK, and Player do not create separate versions of the
The agent, the browser editor, CLI, SDK, and Player do not create separate versions of the
video. They work with the same project files.
| What you want to change | Best place to start |
| ---------------------------------------------------- | ------------------- |
| Story, structure, or several scenes | Ask the agent |
| Text, layout, timing, or animation you can see | Studio |
| Text, layout, timing, or animation you can see | The browser editor |
| Preview, checks, snapshots, rendering, or automation | CLI |
| A composition inside your own product | SDK or Player |
<div style={{ maxWidth: "42rem", margin: "1.5rem auto" }}>
<Frame caption="The same editable project open in Studio, with its source, canvas, controls, and timeline.">
<Frame caption="The same editable project open in the browser editor, with its source, canvas, controls, and timeline.">
<img
src="https://static.heygen.ai/hyperframes-oss/docs/images/studio/overview-v1.jpg"
alt="A HyperFrames project open in Studio with the source tree, canvas, controls, and timeline"
alt="A HyperFrames project open in the browser editor with the source tree, canvas, controls, and timeline"
/>
</Frame>
</div>
Studio writes supported edits back into the source. An agent can continue from
The browser editor writes supported edits back into the source. An agent can continue from
those files, Git can track them, and the renderer sees the same result.
## What the agent creates
@@ -116,7 +116,7 @@ Timed elements carry their start, duration, and track in HTML:
```
This image starts at two seconds, remains for three seconds, and appears on
track one. Animation timelines are paused and seekable, so Studio, the Player,
track one. Animation timelines are paused and seekable, so the browser editor, the Player,
and the renderer can request an exact moment without playing from the
beginning.
docs/concepts/variables.mdx
+4 -4
View File
@@ -40,10 +40,10 @@ normal source edit when the structure itself needs to change.
</div>
</div>
## Use variables in Studio
## Use variables in the browser editor
Studio can create and bind variables, preview overrides, and copy the reviewed
values into a render command. Follow [Use variables and templates](/studio/variables)
The browser editor can create and bind variables, preview overrides, and copy the reviewed
values into a render command. Follow [Use variables and templates](/studio/assets-and-blocks#use-variables)
for that complete workflow.
## Advanced: declare the approved inputs
@@ -72,7 +72,7 @@ Supported declared types are:
| `font` | A font-family choice |
| `image` | An image path or image value |
The type lets Studio show the right control and lets rendering catch invalid
The type lets the browser editor show the right control and lets rendering catch invalid
values.
### Say what a slot means, not where it sits
docs/docs.json
+52 -41
View File
@@ -147,54 +147,20 @@
]
},
{
"tab": "Studio",
"tab": "Browser editor",
"icon": "palette",
"groups": [
{
"group": "Start in Studio",
"pages": [
"studio/index"
]
},
{
"group": "Edit",
"group": "Browser editor",
"pages": [
"studio/index",
"studio/canvas",
"studio/timeline",
"studio/animation",
"studio/captions"
]
},
{
"group": "Audio",
"pages": [
"studio/audio-effects",
"studio/voiceover-carve",
"studio/audio-groups",
"studio/audio-automation"
]
},
{
"group": "Build and reuse",
"pages": [
"studio/assets-and-blocks",
"studio/variables",
"studio/slideshows"
]
},
{
"group": "Finish and recover",
"pages": [
"studio/export",
"studio/troubleshooting"
]
},
{
"group": "Reference",
"pages": [
"studio/source",
"studio/shortcuts"
]
}
]
},
@@ -1058,7 +1024,7 @@
"header": "Build",
"items": [
{
"label": "Studio",
"label": "Browser editor",
"href": "/studio"
},
{
@@ -1158,7 +1124,7 @@
},
{
"source": "/guides/video-editor-cheatsheet",
"destination": "/studio/shortcuts"
"destination": "/studio/index#keyboard-shortcuts"
},
{
"source": "/guides/timeline-editing",
@@ -1215,12 +1181,12 @@
},
{
"source": "/guides/keyframes",
"destination": "/studio/animation",
"destination": "/studio/canvas#animate-with-keyframes",
"permanent": true
},
{
"source": "/studio/lint-and-agent",
"destination": "/studio/source",
"destination": "/studio/canvas#edit-the-source",
"permanent": true
},
{
@@ -1347,6 +1313,51 @@
"source": "/prompting/overlays-and-lower-thirds",
"destination": "/prompting/captions-catalog#overlays-and-lower-thirds",
"permanent": true
},
{
"source": "/studio/animation",
"destination": "/studio/canvas#animate-with-keyframes",
"permanent": true
},
{
"source": "/studio/audio-automation",
"destination": "/studio/audio-effects#automate-over-time",
"permanent": true
},
{
"source": "/studio/audio-groups",
"destination": "/studio/audio-effects#group-tracks",
"permanent": true
},
{
"source": "/studio/captions",
"destination": "/studio/assets-and-blocks#edit-captions",
"permanent": true
},
{
"source": "/studio/shortcuts",
"destination": "/studio/index#keyboard-shortcuts",
"permanent": true
},
{
"source": "/studio/slideshows",
"destination": "/studio/export#build-a-slideshow",
"permanent": true
},
{
"source": "/studio/source",
"destination": "/studio/canvas#edit-the-source",
"permanent": true
},
{
"source": "/studio/variables",
"destination": "/studio/assets-and-blocks#use-variables",
"permanent": true
},
{
"source": "/studio/voiceover-carve",
"destination": "/studio/audio-effects#make-music-sit-under-narration",
"permanent": true
}
],
"integrations": {
docs/guides/captions-and-recuts.mdx
+1 -1
View File
@@ -138,6 +138,6 @@ It replaces the full transcript in the existing captions and keeps the caption c
## Related topics
- [Edit captions in Studio](/studio/captions)
- [Edit captions in the browser editor](/studio/assets-and-blocks#edit-captions)
- [Work with voice, music, sound, and captions](/guides/voice-and-audio)
- [Change the spoken edit with a custom video](/guides/general-video)
docs/guides/design-tools.mdx
+2 -2
View File
@@ -84,10 +84,10 @@ npx hyperframes check
npx hyperframes preview
```
Then watch it move in [Studio](/studio) — stills cannot show timing.
Then watch it move in [the browser editor](/studio) — stills cannot show timing.
## Related topics
- [Use the Figma integration](/guides/figma)
- [Work on the project in Studio](/studio)
- [Work on the project in the browser editor](/studio)
- [Choose where to create](/guides/choose-creation-path)
docs/guides/export-and-share.mdx
+8 -8
View File
@@ -1,10 +1,10 @@
---
title: "Render a video to MP4"
sidebarTitle: "Render"
description: "Review the project, run its checks, render through an agent, Studio, or the CLI, and deliver the right file or link."
description: "Review the project, run its checks, render through an agent, the browser editor, or the CLI, and deliver the right file or link."
---
Finish the same editable project through your agent, Studio, or the command
Finish the same editable project through your agent, the browser editor, or the command
line. The route can change; the quality gate does not.
## 1. Approve the project, not one good frame
@@ -20,7 +20,7 @@ before spending time on small visual details.
## 2. Run the project checks
Run the checks in Studio, ask your agent to run them, or use:
Run the checks in the browser editor, ask your agent to run them, or use:
```bash
npx hyperframes lint
@@ -48,14 +48,14 @@ Use the agent when a failed check may require a source change or when you want
one person to manage the complete finish. The `/hyperframes` skill waits for
render approval after the final preview.
### Use Studio
### Use the browser editor
Open **Export**, choose the destination's format and size, and start the render.
The Renders panel shows progress and keeps completed files available to
download.
<div style={{ maxWidth: "42rem", margin: "1.5rem auto" }}>
<Frame caption="Studio checking and rendering the same project shown in its editor.">
<Frame caption="The browser editor checking and rendering the same project shown in its editor.">
<video
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-check-render-loop-v2.mp4"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-check-render-loop-v2.jpg"
@@ -93,7 +93,7 @@ Higher output resolution does not add detail to low-resolution media. A higher
frame rate creates more frames; it does not improve motion authored for a lower
cadence.
Use [Studio export](/studio/export) for its visible controls or the
Use [export in the browser editor](/studio/export) for its visible controls or the
[rendering reference](/guides/rendering) for formats, Docker, batch output, and
advanced CLI behavior.
@@ -153,11 +153,11 @@ npx hyperframes check
```
Use [Troubleshooting](/guides/troubleshooting) for project and render failures,
or [Studio troubleshooting](/studio/troubleshooting) when the problem is in the
or [Browser editor troubleshooting](/studio/troubleshooting) when the problem is in the
editor or its render queue.
## Related topics
- [Export and manage renders in Studio](/studio/export)
- [Export and manage renders in the browser editor](/studio/export)
- [Use advanced rendering options](/guides/rendering)
- [Diagnose a project or render failure](/guides/troubleshooting)
docs/guides/faceless-explainer.mdx
+1 -1
View File
@@ -189,7 +189,7 @@ the agent picks the palette. If you have colors, name them.
- The ending lands the sentence you wanted the viewer to remember.
Ask the agent when the teaching sequence or evidence must change. Use
Studio for a precise visual, timing, or animation correction.
the browser editor for a precise visual, timing, or animation correction.
<Card title="Finish and share" icon="circle-check" href="/guides/export-and-share">
Check the final project, render through your preferred surface, and review the file.
docs/guides/figma.mdx
+1 -1
View File
@@ -161,5 +161,5 @@ Every import records where it came from (`fileKey`, `nodeId`, `version`) in `.me
## Related topics
- [Bring a design into a project](/guides/design-tools)
- [Work on the imported project in Studio](/studio)
- [Work on the imported project in the browser editor](/studio)
- [Manage project media](/guides/media)
docs/guides/general-video.mdx
+2 -2
View File
@@ -51,7 +51,7 @@ If one source already determines the job—a product URL, article, pull request,
## Keep feedback useful
Review the story before polishing motion. Use Studio for direct changes you can
Review the story before polishing motion. Use the browser editor for direct changes you can
point to. Ask the agent when feedback affects several scenes, source files,
media, or the overall narrative.
@@ -70,4 +70,4 @@ Before export, confirm:
## Related topics
- [What do you want to make?](/workflows)
- [Edit the built project in Studio](/studio)
- [Edit the built project in the browser editor](/studio)
docs/guides/gsap-animation.mdx
+3 -3
View File
@@ -10,13 +10,13 @@ GSAP is the primary animation runtime for HyperFrames compositions. You author t
<DocsVideo
title="GSAP keyframes on screen, and the ease curve being shaped in Studio"
title="GSAP keyframes on screen, and the ease curve being shaped in the browser editor"
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/gsap-keyframes-demo-v2.mp4"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/gsap-keyframes-demo-v1.jpg"
/>
The code in that clip is the real thing — a `gsap.to()` with a `keyframes` array,
and the same motion being reshaped by dragging the ease curve in Studio rather
and the same motion being reshaped by dragging the ease curve in the browser editor rather
than guessing numbers.
## Minimal contract
@@ -155,6 +155,6 @@ Check the first frame, the moving state, and the end state. A timeline that look
## Related topics
- [Edit animation and keyframes in Studio](/studio/animation)
- [Edit animation and keyframes in the browser editor](/studio/canvas#animate-with-keyframes)
- [Understand deterministic rendering](/concepts/determinism)
- [Use the HTML composition schema](/reference/html-schema)
docs/guides/hyperframes-vs-remotion.mdx
+2 -2
View File
@@ -134,7 +134,7 @@ every time. See [Frame adapters](/concepts/frame-adapters) and
[Deterministic rendering](/concepts/determinism).
Both projects ship a visual editor and both save changes back to source.
[HyperFrames Studio](/studio) edits the same DOM the renderer captures. Remotion
[The HyperFrames browser editor](/studio) edits the same DOM the renderer captures. Remotion
Studio edits React compositions. They are not interchangeable, and neither
replaces editing the source for real structural changes.
@@ -167,7 +167,7 @@ close to a composition.
It is built for an AI agent to author. The [agent skills](/guides/skills)
encode the framework's rules, so the agent writes valid compositions instead of
guessing, and a human can then edit the same file in Studio.
guessing, and a human can then edit the same file in the browser editor.
And Apache 2.0 means no seat count and no license review.
docs/guides/mcp.mdx
+3 -3
View File
@@ -36,7 +36,7 @@ Use the [local Quickstart](/quickstart) when you need:
- full project files;
- local rendering;
- direct Studio and source editing;
- direct editing in the browser editor and in the source;
- custom automation or deployment;
- precise debugging and validation.
@@ -133,8 +133,8 @@ before starting repeated or long renders.
- Rendering runs on HeyGen infrastructure. Use the local path when you need local rendering or self-hosting.
- The exact tool list and result presentation depend on the deployed server and the chat host.
- Hosted output does not give you the same local project folder, Studio surface, or debugging access as the local path.
- Precise source and pixel-level editing belongs in the local project and Studio.
- Hosted output does not give you the same local project folder, browser editor surface, or debugging access as the local path.
- Precise source and pixel-level editing belongs in the local project and the browser editor.
## Troubleshooting
docs/guides/media.mdx
+2 -2
View File
@@ -35,7 +35,7 @@ same job, keep the clearer one.
## Bring it into the project
In Studio, open **Assets**, choose **Import media**, or drop files into the
In the browser editor, open **Assets**, choose **Import media**, or drop files into the
panel. Preview the file before placing it on the timeline. You can also ask the
agent to capture a website, prepare supplied footage, generate a derivative, or
copy an approved file into the project.
@@ -98,5 +98,5 @@ in the archived version.
## Related topics
- [Use assets and Catalog items in Studio](/studio/assets-and-blocks)
- [Use assets and Catalog items in the browser editor](/studio/assets-and-blocks)
- [Finish, render, and share](/guides/export-and-share)
docs/guides/motion-blur.mdx
+5 -5
View File
@@ -1,6 +1,6 @@
---
title: "Motion Blur"
description: "Smear fast-moving elements along their path, in Studio preview and in renders. Off until you turn it on."
description: "Smear fast-moving elements along their path, in the browser editor preview and in renders. Off until you turn it on."
---
Motion blur gives fast-moving elements a real shutter smear. For each frame, HyperFrames reads where every mover was across the shutter interval and blurs it along that path. A box sliding across the frame leaves a streak instead of a sharp copy at one position.
@@ -22,7 +22,7 @@ It is **opt-in**. Nothing blurs until you add `data-motion-blur="on"` to the com
</div>
```
That is all. The same attribute drives Studio preview and `hyperframes render`.
That is all. The same attribute drives the browser editor preview and `hyperframes render`.
| Attribute | Default | Meaning |
| --- | --- | --- |
@@ -32,9 +32,9 @@ That is all. The same attribute drives Studio preview and `hyperframes render`.
| `data-motion-blur-events` | off | `on` runs timeline callbacks (`onUpdate` and similar) while blur looks for movers and at each sample. Needed when the motion is set from a callback, such as a `render(t)` function, which blur cannot otherwise see. |
| `data-motion-blur-tier` | `auto` | `capture` or `filter` forces one of the two ways blur is drawn (below). |
## In Studio
## In the browser editor
The **Blur** tab in Studio's right dock sets it with one control: **Off**, **Subtle** or **Strong**. Subtle is the default blur (240° shutter, samples sized to the smear). Strong opens the shutter to 720° and the samples to 64. The panel writes the attributes above to the composition root, so a render uses the same setting, and Undo works. Subtle and Strong also turn on `data-motion-blur-events`, so motion set from a `render(t)` callback is found. Off removes `data-motion-blur` and `data-motion-blur-events` and leaves the other attributes where they are.
The **Blur** tab in the browser editor's right dock sets it with one control: **Off**, **Subtle** or **Strong**. Subtle is the default blur (240° shutter, samples sized to the smear). Strong opens the shutter to 720° and the samples to 64. The panel writes the attributes above to the composition root, so a render uses the same setting, and Undo works. Subtle and Strong also turn on `data-motion-blur-events`, so motion set from a `render(t)` callback is found. Off removes `data-motion-blur` and `data-motion-blur-events` and leaves the other attributes where they are.
## What it blurs
@@ -84,7 +84,7 @@ In the page, `window.__hfMotionBlur.report()` returns `state`, `tier`, `reason`,
- **Render time.** On an 8 s test composition with four whips, a render took 9.8 s with capture, 5.2–5.4 s with the filter tier and 5.3–5.9 s with no blur (two runs each, including startup). Capture adds a second paint per blurred frame; the filter tier adds almost nothing.
- **Editing.** With capture the root is wrapped only while playing or rendering; paused, it is plain DOM, so click-to-select works. The filter tier never wraps anything.
- **Capture only.** Blurred preview can run at half the frame rate on heavy compositions, and a `<video>` drawn through the capture looks about 2–3% darker in Studio preview than in normal playback. Renders are not affected.
- **Capture only.** Blurred preview can run at half the frame rate on heavy compositions, and a `<video>` drawn through the capture looks about 2–3% darker in the browser editor preview than in normal playback. Renders are not affected.
- **Preview and render.** A browser without HTML in Canvas previews with the filter tier. A render then uses capture where the composition needs it, so a spin or zoom looks softer in that preview than in the render. Force one tier with `data-motion-blur-tier` for an exact match.
- **Worker count.** Output is not bit-identical between worker counts (around 60 dB PSNR), about the size of the difference chunking already causes.
- **Not handled.** Pose errors under CSS `zoom`, `position: fixed` and `foreignObject`; a very short Web Animations API animation that falls between scan samples; a large see-through mover (a full-frame translucent sweep), which is left sharp while its fast children still blur. With capture, a mover is drawn above the static content, so a static element that should cover a mover does not.
docs/guides/motion-graphics.mdx
+1 -1
View File
@@ -141,5 +141,5 @@ music and sound, no narration, the motion carrying all of it.
## Related topics
- [Edit animation and keyframes in Studio](/studio/animation)
- [Edit animation and keyframes in the browser editor](/studio/canvas#animate-with-keyframes)
- [Create a longer narrated video](/guides/general-video)
docs/guides/music-to-video.mdx
+2 -2
View File
@@ -119,7 +119,7 @@ A clause from a longer film prompt that makes the cuts follow the real beats, re
- Important images and text remain long enough to understand.
- The ending reaches a musical landing or forms a deliberate loop.
For direct timing control, use the [Studio timeline](/studio/timeline) to refine
For direct timing control, use the [browser editor timeline](/studio/timeline) to refine
cuts, holds, and the ending against the beat markers. Ask the agent when the
section, media plan, or overall treatment must change.
@@ -129,5 +129,5 @@ section, media plan, or overall treatment must change.
## Related topics
- [Edit cuts and holds on the Studio timeline](/studio/timeline)
- [Edit cuts and holds on the browser editor timeline](/studio/timeline)
- [Work with voice, music, sound, and captions](/guides/voice-and-audio)
docs/guides/rendering.mdx
+3 -3
View File
@@ -5,7 +5,7 @@ description: "Check a project and render MP4, MOV, WebM, GIF, or PNG output."
import { DocsVideo } from "/snippets/docs-video.jsx";
Studio is the simplest place to export a project. Use the command line when an agent, script, CI job, or advanced delivery workflow needs to control the render.
The browser editor is the simplest place to export a project. Use the command line when an agent, script, CI job, or advanced delivery workflow needs to control the render.
<DocsVideo
title="One command turns the project into an MP4"
@@ -119,7 +119,7 @@ lock that fixed-length segments depend on. Cloud rendering (`lambda`,
## Input video codecs
Studio, preview, `check`, and published projects normally create cached browser
The browser editor, preview, `check`, and published projects normally create cached browser
proxies for local video that Chrome cannot decode reliably, including common
HEVC and ProRes inputs. The original file stays in the project and remains the
render source.
@@ -353,5 +353,5 @@ Keep the first exact error rather than only the final “render failed” messag
## Related topics
- [Compare local, hosted, and self-managed rendering](/deploy/overview)
- [Render and export from Studio](/studio/export)
- [Render and export from the browser editor](/studio/export)
- [Diagnose a failed render](/guides/troubleshooting)
docs/guides/slideshow.mdx
+3 -3
View File
@@ -39,7 +39,7 @@ presenting, make a [video](/workflows) instead: a deck can't be exported as one
- **Branches and hotspots** for optional detail, so the main story still works if nobody opens them.
- **Speaker notes** that help the presenter instead of repeating the slide.
To change order, notes, reveals or branches by hand, use the [Slideshow panel](/studio/slideshows) in the browser
To change order, notes, reveals or branches by hand, use the [Slideshow panel](/studio/export#build-a-slideshow) in the browser
editor.
## Prompts that work
@@ -75,6 +75,6 @@ final slide's last reveal is shown.
## Related topics
- [Build and revise a slideshow in the browser editor](/studio/slideshows)
- [Use variables and templates](/studio/variables)
- [Build and revise a slideshow in the browser editor](/studio/export#build-a-slideshow)
- [Use variables and templates](/studio/assets-and-blocks#use-variables)
- [Make a video instead](/workflows)
docs/guides/troubleshooting.mdx
+6 -6
View File
@@ -1,9 +1,9 @@
---
title: "Troubleshooting"
description: "Solve common Studio, project, media, animation, preview, and rendering problems."
description: "Solve common browser editor, project, media, animation, preview, and rendering problems."
---
Start with the symptom you can see. Keep the exact error and note whether the problem happens in Studio, validation, or only in the final render.
Start with the symptom you can see. Keep the exact error and note whether the problem happens in the browser editor, validation, or only in the final render.
## Start here
@@ -22,7 +22,7 @@ Start with the symptom you can see. Keep the exact error and note whether the pr
```
</Step>
<Step title="Inspect the visible result">
Open Studio or capture important frames:
Open the browser editor or capture important frames:
```bash
npx hyperframes snapshot --at 0,3,8
@@ -33,8 +33,8 @@ Start with the symptom you can see. Keep the exact error and note whether the pr
</Step>
</Steps>
For selection, canvas, timeline, autosave, and Studio-only failures, use
[Studio troubleshooting](/studio/troubleshooting).
For selection, canvas, timeline, autosave, and editor-only failures, use
[Browser editor troubleshooting](/studio/troubleshooting).
## Project and environment problems
@@ -315,5 +315,5 @@ Do not include secrets, private media, or access tokens.
## Related topics
- [Start with the shortest recovery path](/help)
- [Recover from a Studio-only problem](/studio/troubleshooting)
- [Recover from a editor-only problem](/studio/troubleshooting)
- [Share useful product feedback](/guides/feedback)
docs/guides/vfx-chain.mdx
+3 -3
View File
@@ -80,9 +80,9 @@ Same backend, same `(u_t, params)` → byte-identical `.hf-vfx-out` pixels. A
kernel may read only `(u_size, u_t, u_fps, params, u_src)` — no `Math.random`,
no clock, no state carried between paints. That's what makes `data-vfx-chain`
safe to seek anywhere in a render, including backwards, and still get the same
frame you'd get scrubbing forward to it in Studio.
frame you'd get scrubbing forward to it in the browser editor.
## Studio and browser support
## The browser editor and browser support
`self` and `backdrop` capture depend on `drawElementImage`, the same
experimental Chromium API [HTML in Canvas](/guides/html-in-canvas) uses. In a
@@ -107,7 +107,7 @@ a chain by hand:
box.** A GSAP `transform: scale()` or rotation on the host does not affect
`.hf-vfx-out`'s resolution.
- **A chain repaints on seek, not on every animation-frame tick.** Every render
path seeks per frame, so this only matters for Studio scrubbing-free
path seeks per frame, so this only matters for browser editor scrubbing-free
playback, where a chain does not repaint between seeks.
- **Known conflict with page-side shader transitions.** A composition running
both `@hyperframes/shader-transitions`' page-side compositing and a
docs/guides/video-components.mdx
+1 -1
View File
@@ -34,7 +34,7 @@ with **+** or drop it into the chat.
In the browser editor (`npx hyperframes preview`), open **Assets**, choose **Import media** or drop the file into the
panel, then drag it onto the timeline. Images, SVG, MP4, WebM and MOV work.
<Frame caption="Current Studio, changing the real project: inspect the source, change Fit and Position, crop on the canvas, then import another local asset.">
<Frame caption="The browser editor today, changing the real project: inspect the source, change Fit and Position, crop on the canvas, then import another local asset.">
<video
autoPlay
loop
docs/guides/voice-and-audio.mdx
+2 -2
View File
@@ -60,7 +60,7 @@ captions or a tighter cut, see [Captions and recuts](/guides/captions-and-recuts
Read the transcript before it goes on screen: names, product terms and numbers are where recognition slips. Keep
lines short and broken on meaning, keep them off faces and buttons, and emphasize the two or three words that carry
the point. To adjust them by hand, open [Captions](/studio/captions) in the browser editor.
the point. To adjust them by hand, open [Captions](/studio/assets-and-blocks#edit-captions) in the browser editor.
## Repeat music inside a slot
@@ -86,7 +86,7 @@ Watch once with sound and once muted, then listen once without watching.
- The music ends on purpose, not at the end of the file.
To dip the music only where the voice sits instead of turning it all down, use a
[voiceover carve](/studio/voiceover-carve).
[voiceover carve](/studio/audio-effects#make-music-sit-under-narration).
Music can start after narration begins: the dip then starts at the right level for that moment, and speech that has
already ended doesn't make a new dip.
docs/help.mdx
+8 -8
View File
@@ -6,13 +6,13 @@ description: "Start with what you can see, try the smallest useful fix, and get
Find the symptom that looks like yours below.
## Studio will not open
## The browser editor will not open
The browser never opens, the page is unreachable, or the project does not load.
1. Open a terminal in the HyperFrames project folder.
2. Run `npx hyperframes preview`.
3. Keep that process running while Studio is open.
3. Keep that process running while the browser editor is open.
4. Use the local URL printed in the terminal.
If the command cannot find a project, check that you are inside the project folder rather than its parent.
@@ -23,7 +23,7 @@ A change is missing, playback looks old, or the preview is blank. Preview's Code
editor and visual controls save automatically. If you edited the project in another
application, save that file first.
1. Wait for the project refresh, then reload Studio once.
1. Wait for the project refresh, then reload the browser editor once.
2. Check the terminal for a build or runtime error.
3. Run the project checks:
@@ -43,7 +43,7 @@ Selection, canvas controls, timing, or an Inspector field is unavailable.
- Check whether the visual lives inside a nested composition.
- Ask the agent when the change affects source structure rather than one visible element.
[Open Studio troubleshooting →](/studio/troubleshooting)
[Open Browser editor troubleshooting →](/studio/troubleshooting)
## Media is missing or black
@@ -72,12 +72,12 @@ Run `npx hyperframes check`, then give your agent the smallest affected scene an
## Render failed or differs from preview
Export stops, produces the wrong result, or disagrees with Studio.
Export stops, produces the wrong result, or disagrees with the browser editor.
1. Preserve the complete render error.
2. Run `npx hyperframes check`.
3. Confirm fonts and media are local and load before capture.
4. Check the affected timestamp in Studio.
4. Check the affected timestamp in the browser editor.
5. Try the normal MP4 preset before changing codecs or advanced flags.
The [complete troubleshooting guide](/guides/troubleshooting) covers codec, browser, FFmpeg, GPU, HDR, and deployment-specific failures.
@@ -97,7 +97,7 @@ What happened instead:
Exact error:
Where it happens: Studio / lint / check / render
Where it happens: the browser editor / lint / check / render
Does it happen every time?
@@ -127,5 +127,5 @@ Add a screenshot or short recording when the failure is visual. Never paste acce
## Related topics
- [Troubleshoot a project, preview, or render](/guides/troubleshooting)
- [Recover from a Studio problem](/studio/troubleshooting)
- [Recover from a browser editor problem](/studio/troubleshooting)
- [Finish and share a video](/guides/export-and-share)
docs/introduction.mdx
+1 -1
View File
@@ -26,7 +26,7 @@ Every tile below is a finished HyperFrames film. Open one to watch it with sound
**Agent-built.** You describe the video; the agent writes the HTML, CSS, and JavaScript. You do not need to write code for this path.
**Editable.** The result is a project folder, not a flattened black box. An agent, Studio, and your own tools can work on the same files.
**Editable.** The result is a project folder, not a flattened black box. An agent, the browser editor, and your own tools can work on the same files.
**Reliable render.** HyperFrames asks the project for each exact frame instead of
depending on live playback, so a slow machine does not drop moments from the
docs/packages/studio.mdx
+35 -6
View File
@@ -1,13 +1,17 @@
---
title: "@hyperframes/studio"
description: "React components and hooks used to build the HyperFrames Studio editing interface."
description: "For developers: the React components and hooks behind the HyperFrames browser editor. Looking for the Studio app? See Get the Studio app."
---
`@hyperframes/studio` contains the React application, editor components, player,
timeline, and hooks that power HyperFrames Studio.
<Note>
Looking for the **HyperFrames Studio app**, the one you download to make videos? It's here:
[Get the Studio app](/studio-app). This page is for developers building on the editor's code.
</Note>
Most people should not install this package directly. To open a project in the
complete Studio application, run:
`@hyperframes/studio` contains the React application, editor components, player, timeline, and hooks behind the
HyperFrames browser editor.
To open a project in the browser editor, you don't need this package:
```bash
npx hyperframes preview
@@ -23,7 +27,7 @@ npm install @hyperframes/studio react react-dom zustand
<Warning>
The exported components are building blocks, not a drop-in embedded editor. Components such as
`EditorShell`, `NLEPreview`, `Timeline`, `PropertyPanel`, and `FileTree` require project state,
callbacks, or Studio contexts. Use `StudioApp` when you need the complete application, or inspect
callbacks, or Studio contexts. Use `StudioApp` when you need the whole editor, or inspect
the component types before composing a custom host.
</Warning>
@@ -107,6 +111,31 @@ export default {
};
```
## Preview guides in your own app
Host apps can compose the same rulers, safe margins, grid, and snap toolbar that
Studio uses over their own preview iframe. The provider owns the iframe geometry
and shared preferences, so the host supplies its current iframe element and chooses the
parts to render:
```tsx
import {
GridOverlay,
PreviewGuides,
PreviewOverlayProvider,
SnapToolbar,
} from "@hyperframes/studio";
function Preview({ iframe }: { iframe: HTMLIFrameElement | null }) {
return (
<PreviewOverlayProvider iframe={iframe}>
<PreviewGuides />
<GridOverlay />
<SnapToolbar />
</PreviewOverlayProvider>
);
}
```
## Related topics
<CardGroup cols={2}>
docs/prompting/color-grading.mdx
+4 -4
View File
@@ -478,13 +478,13 @@ is going somewhere ([motion](/prompting/motion)); a title that has landed holds
The distinction that trips people up: the **HTML-in-Canvas blocks are not CSS**. The device mockups, liquid-glass stages, and `vfx-*` blocks render live DOM into WebGL textures via the experimental `drawElementImage` API — which needs a Chrome flag. The [HTML-in-Canvas guide](/guides/html-in-canvas) documents the real behavior:
- **Rendering enables CanvasDrawElement automatically** (`--enable-features=CanvasDrawElement`), including inside Docker. That is enough for CanvasDrawElement-only blocks. Liquid-glass blocks that combine it with WebGPU still need a compatible browser such as Brave or Chrome Canary configured through `PRODUCER_HEADLESS_SHELL_PATH`; the bundled headless shell cannot run that combination.
- **Live preview in the Studio needs the flag turned on manually** (`chrome://flags/#canvas-draw-element` → *Enabled* → restart). Without it, these blocks fall back rather than showing the effect in preview.
- **Live preview in the browser editor needs the flag turned on manually** (`chrome://flags/#canvas-draw-element` → *Enabled* → restart). Without it, these blocks fall back rather than showing the effect in preview.
- The blocks **feature-detect and degrade gracefully**, so a browser without the flag won't crash — it just won't show the WebGL treatment.
The Effects components above have none of this — they're plain CSS and animate everywhere, preview included. So if you need something visible in Studio preview today with zero setup, prefer the CSS Effects; the HTML-in-Canvas group is where the flag caveat lives.
The Effects components above have none of this — they're plain CSS and animate everywhere, preview included. So if you need something visible in the browser editor preview today with zero setup, prefer the CSS Effects; the HTML-in-Canvas group is where the flag caveat lives.
<Warning>
Don't promise a stakeholder a live Studio preview of a liquid-glass or device block without confirming the Chrome flag is enabled on that machine — the rendered MP4 is unaffected, but the in-browser preview may fall back. See the [HTML-in-Canvas guide](/guides/html-in-canvas).
Don't promise a stakeholder a live the browser editor preview of a liquid-glass or device block without confirming the Chrome flag is enabled on that machine — the rendered MP4 is unaffected, but the in-browser preview may fall back. See the [HTML-in-Canvas guide](/guides/html-in-canvas).
</Warning>
#### Where to go next
@@ -496,7 +496,7 @@ The Effects components above have none of this — they're plain CSS and animate
This clause from a [longer HyperFrames film](/prompting/capstone#the-prompt-word-for-word) produced the shot below. You can lift the wording for your own video:
> Inside: frosted-glass inspector panels (real translucency — blur over what's behind; the product's Studio design language) hover above the wire carrying live values (`ease: power3.out`, a color token, an fps readout) […] Glass surfaces use the file's `--glass-*` tokens with real backdrop blur.
> Inside: frosted-glass inspector panels (real translucency — blur over what's behind; the product's the browser editor design language) hover above the wire carrying live values (`ease: power3.out`, a color token, an fps readout) […] Glass surfaces use the file's `--glass-*` tokens with real backdrop blur.
<DocsVideo
title="Capstone region surface"
docs/prompting/design-systems.mdx
+2 -2
View File
@@ -140,7 +140,7 @@ many fills.
There are seven variable types: `string`, `number`, `color`, `boolean`, `enum`,
`font`, and `image`. Each one validates differently at render time. In
[Studio](/packages/studio), `boolean`, `enum`, `color`, and `number` each get
the [browser editor](/studio), `boolean`, `enum`, `color`, and `number` each get
their own control, while `string`, `font`, and `image` use a plain text input.
You don't write the JSON yourself. But naming the type in the prompt removes a
@@ -153,7 +153,7 @@ guess:
The engine rationale: an `enum` with declared options is checked against that
list at render time, so `enum-out-of-range` gets caught. A `number` can carry
`min`, `max`, `step`, and a `unit` label, which is what gives Studio a real
`min`, `max`, `step`, and a `unit` label, which is what gives the browser editor a real
slider instead of a bare text box. Say "editable" and you leave the agent to
pick a type. A mistyped value then surfaces much later.
docs/prompting/editing-existing-videos.mdx
+5 -5
View File
@@ -23,7 +23,7 @@ Every timeline verb resolves to a `data-*` attribute or an inline style. This is
| "the audio bed is too loud" | Level | `data-volume` |
<Note>
The mental model the Studio timeline uses: **move** changes when a clip *starts*, **right trim** changes when it *ends*, and **front trim** only exists for media clips — a `<video>` or `<audio>` can skip into its own content, but a GSAP-driven `<div>` can't start halfway through its animation. See [Studio timeline](/studio/timeline) for the full clip-type breakdown. One more surface the map can't show: retiming a scene that spans the whole composition also needs the root's `data-duration` bumped — the root governs total length, so a longer child never renders past it.
The mental model the browser editor timeline uses: **move** changes when a clip *starts*, **right trim** changes when it *ends*, and **front trim** only exists for media clips — a `<video>` or `<audio>` can skip into its own content, but a GSAP-driven `<div>` can't start halfway through its animation. See [browser editor timeline](/studio/timeline) for the full clip-type breakdown. One more surface the map can't show: retiming a scene that spans the whole composition also needs the root's `data-duration` bumped — the root governs total length, so a longer child never renders past it.
</Note>
## Trim, move, and restack
@@ -57,7 +57,7 @@ Bound moves by the composition's length — a 4-second clip moved to 0:08 in a 1
## Split a scene
The Studio timeline exposes move and trim as drag gestures but does **not** yet offer split, slip, slide, ripple, or roll. You can still split by directing the agent, because it edits the HTML directly — a split is just one clip becoming two with adjusted `data-start` / `data-duration`:
The browser editor timeline can move, trim and split clips, and ripple-delete on the main track; it has no slip, slide or roll yet. You can also split by directing the agent, because it edits the HTML directly — a split is just one clip becoming two with adjusted `data-start` / `data-duration`:
> Split scene 2 at 0:04 so I can drop a transition between the two halves.
@@ -88,13 +88,13 @@ Change one scene's feel per render so you can attribute what helped. If a scene
## Adjust a keyframe
Individual animation properties are editable — the value, the ease, the timing of any tween. You can direct these by prompt, or edit them yourself in the Studio Design Panel; either way they resolve to the same GSAP code.
Individual animation properties are editable — the value, the ease, the timing of any tween. You can direct these by prompt, or edit them yourself in the browser editor Design Panel; either way they resolve to the same GSAP code.
> The title slides in from too far — change its entrance to travel 40px, not 200.
> Give the add-to-cart item an arc instead of a straight diagonal, like it's being tossed into the cart.
State the property target absolutely (`Move X = 40`, `arc curviness ≈ 1.5`). [Animation and keyframes](/studio/animation) covers what's editable, motion paths, and gesture recording.
State the property target absolutely (`Move X = 40`, `arc curviness ≈ 1.5`). [Animation and keyframes](/studio/canvas#animate-with-keyframes) covers what's editable, motion paths, and gesture recording.
<Tip>
For an element-specific edit, the Design Panel's clipboard icon copies structured context — the element's id, position, size, and current animation — ready to paste into your prompt. It gives the agent exact spatial context instead of a vague "the title."
@@ -134,7 +134,7 @@ Visual tweaks — color, size, weight, position of a single element — are wher
<CardGroup cols={2}>
<Card title="Iterating" href="/prompting/overview#iterate-toward-the-look">One variable per edit, absolute targets, freeze what works</Card>
<Card title="Motion words" href="/prompting/motion#words-for-how-motion-feels">Pacing and easing words that retime the *feel* of a scene</Card>
<Card title="Studio timeline" href="/studio/timeline">Move, trim, split, and navigate clips</Card>
<Card title="Browser editor timeline" href="/studio/timeline">Move, trim, split, and navigate clips</Card>
<Card title="Data attributes" href="/concepts/data-attributes">The `data-*` timing contract</Card>
</CardGroup>
docs/prompting/media-and-audio.mdx
+1 -1
View File
@@ -188,7 +188,7 @@ case, straight off an iPhone or a screen recorder. The framework probes the
asset and builds a bounded H.264 proxy automatically, cached under
`.transcode-cache/`.
`preview`, `play`, Studio, and published player pages use that proxy for
`preview`, `play`, the browser editor, and published player pages use that proxy for
playback. A render always decodes the original file, so nothing about final
quality or color is touched. `snapshot` also reads frames from the original with
FFmpeg, so it makes no proxy unless you pass `--proxy`.
docs/public/images/studio/editor-overview-v2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 260 KiB

docs/reference/audio-effects.mdx
+4 -13
View File
@@ -4,7 +4,7 @@ sidebarTitle: "Audio effects"
description: "The four audio attributes, every effect and parameter, automation targets, the voiceover carve, audio groups, and how preview and render stay identical."
---
Use this reference when Studio controls are not enough: you need to write a mix
Use this reference when browser editor controls are not enough: you need to write a mix
into HTML, know a parameter's exact range, automate a knob, or understand why
something behaves differently in the render than in preview. For everyday use
start with [Mix audio and apply effects](/studio/audio-effects), and for what to
@@ -66,7 +66,7 @@ labelled Reduce Mud, and a bypassed limiter.
read, so a chain that parses is always safe to realise.
- `id` is a stable handle. Automation addresses nodes by id, never by position,
so reordering a chain cannot re-point a lane at a different effect. A node
with no id loads fine but cannot be automated. Studio hands out the first free
with no id loads fine but cannot be automated. The browser editor hands out the first free
`n1`, `n2`, …
- `label` replaces the effect's own name in the rack. Write one whenever a node
is doing a named job — two `peaking` nodes otherwise show the same row twice
@@ -485,31 +485,22 @@ member classified voice or unknown that this run did not analyse is *not* a
reason to fall back: picking up a clip that starts playing later is the whole
point of naming the group.
Track choice is by name first, using the same classifier Studio's picker uses, so
Track choice is by name first, using the same classifier the browser editor's picker uses, so
the two cannot disagree: an id or filename that looks like music (`music`, `bgm`,
`bed`, `score`…) is the bed, and everything else playing over it that is not
SFX-shaped is a voice. Needs `ffmpeg` on `PATH` and `@hyperframes/core`
installed in the project.
## Groups, mute, and solo
## Groups and mute
A group sums its members through one bus, and the bus carries the group's own
volume, FX chain, and automation. In the render each group is sub-mixed into a
single track at full composition length before entering the main mix, so a
group-level effect hears the sum rather than each member separately.
**Mute and solo are not symmetric, on purpose.**
| Control | Where it lives | Reaches the export |
| --- | --- | --- |
| Mute | `data-hidden` on the group element or the clip | **Yes** — muted members are dropped from the rendered mix |
| Solo ("hear only this") | Studio session state | **No** — it never reaches the engine |
Solo is a listening tool. An element is audible while any solo is active only if
it is itself soloed or its own group is soloed; a group bus is never itself
attenuated by solo, so a soloed member's path out stays open. A group that is not
soloed while one of its members is shows as half-lit — the display-only signal
that some of what is under it still plays.
## Preview and render
docs/reference/color-grading.mdx
+3 -3
View File
@@ -4,14 +4,14 @@ sidebarTitle: "Color grading"
description: "Persist, automate, animate, and spatially isolate media color grading."
---
Use this reference when Studio controls are not enough: you need to write a
Use this reference when browser editor controls are not enough: you need to write a
grade into HTML, apply it from automation, animate a supported property, or
limit an effect to a composited region. For visual correction and everyday
Studio use, start with [Color grading](/guides/media-effects#fix-and-grade-the-color).
browser editor use, start with [Color grading](/guides/media-effects#fix-and-grade-the-color).
## Persist a grade
Studio and the CLI store the resolved grade in `data-color-grading`:
The browser editor and the CLI store the resolved grade in `data-color-grading`:
```html
<video
docs/reference/html-schema.mdx
+6 -6
View File
@@ -97,12 +97,12 @@ unbounded animation, and timeline-free compositions need an explicit duration.
| `id` | Yes | Stable identifier for timing, editing, and animation |
| `data-start` | Yes | Start in seconds or a relative timing expression |
| `data-duration` | Yes for DOM and nested-composition clips; optional for image (3 s default), video and audio (source length) | Visible slot length in seconds |
| `data-track-index` | No | Studio timeline lane, display only. The render never reads it and it does not prevent overlap |
| `data-track-index` | No | browser editor timeline lane, display only. The render never reads it and it does not prevent overlap |
| `class="clip"` | Recommended for authored timed DOM and image elements | Layout and tooling convention. Visibility is keyed off `data-start`, but the shared `.clip` rule supplies the full-frame box |
`data-track-index` does not control paint order. Use CSS `z-index` for
front-to-back layering. Two clips on the same track may overlap in time; the
lane is a Studio display row, not a scheduling constraint.
lane is a browser editor display row, not a scheduling constraint.
Negative `z-index` values are valid CSS, but an opaque ancestor background can
cover the clip if its parent does not create a stacking context. Add
@@ -131,10 +131,10 @@ Audio has no visual lifecycle.
| Attribute | Applies to | Meaning |
| --- | --- | --- |
| `data-media-start` / `data-playback-start` | Video, audio, nested composition | Offset into the source file, used by trim and split. Two groups of readers disagree, so the right name depends on the element. **Read only `data-media-start`:** the timing compiler, the HTML parser, `hyperframes validate` (which only inspects `<audio>`), and the engine's audio mixer (which feeds ffmpeg `-ss`). **Read `data-playback-start` first, falling back to `data-media-start`:** the runtime player, Studio (which also writes it), and `hyperframes snapshot`. Because the audio mixer reads only `data-media-start`, a `<video>` authored with just `data-playback-start` renders a trimmed picture over untrimmed audio. Set the name by kind: **`<video>` / `<audio>` → `data-media-start`**; **nested composition → `data-playback-start`** — composition hosts are inspected only by the playback-start-first readers (the media-start-only ones are all `<video>`/`<audio>`-scoped). `data-media-start` still works there as a fallback, but `data-playback-start` is the canonical name Studio writes and normalises to for new composition hosts, so the other name works until an edit rewrites it (it is the [child-timeline offset](/concepts/compositions)). |
| `data-media-start` / `data-playback-start` | Video, audio, nested composition | Offset into the source file, used by trim and split. Two groups of readers disagree, so the right name depends on the element. **Read only `data-media-start`:** the timing compiler, the HTML parser, `hyperframes validate` (which only inspects `<audio>`), and the engine's audio mixer (which feeds ffmpeg `-ss`). **Read `data-playback-start` first, falling back to `data-media-start`:** the runtime player, the browser editor (which also writes it), and `hyperframes snapshot`. Because the audio mixer reads only `data-media-start`, a `<video>` authored with just `data-playback-start` renders a trimmed picture over untrimmed audio. Set the name by kind: **`<video>` / `<audio>` → `data-media-start`**; **nested composition → `data-playback-start`** — composition hosts are inspected only by the playback-start-first readers (the media-start-only ones are all `<video>`/`<audio>`-scoped). `data-media-start` still works there as a fallback, but `data-playback-start` is the canonical name the browser editor writes and normalises to for new composition hosts, so the other name works until an edit rewrites it (it is the [child-timeline offset](/concepts/compositions)). |
| `data-playback-rate` | Video, audio, nested composition | Playback multiplier from `0.1` to `10`. A `rate` lane in `data-automation` overrides it; see [Speed ramps](/reference/speed-ramps) |
| `data-volume` | Video and audio | Static gain. `1` is 0 dB, `0` is silence, and values above `1` boost up to `3.98` (+12 dB). Multiplies any volume lane, and on a clip it applies ahead of the clip's audio effects |
| `data-fade-in` / `data-fade-out` | Video and audio | Clip-edge fades in seconds: gain rises 0 → 1 over the first `data-fade-in` seconds and falls 1 → 0 over the last `data-fade-out` seconds of the clip. Linear, anchored to the clip's own edges (a fade-out follows a later trim), and multiplied on top of `data-volume` and any volume lane. Fades that together exceed the clip are scaled to meet inside it. Studio drags them from the dots at an audio clip's top corners or types them in the inspector's Fade rows |
| `data-fade-in` / `data-fade-out` | Video and audio | Clip-edge fades in seconds: gain rises 0 → 1 over the first `data-fade-in` seconds and falls 1 → 0 over the last `data-fade-out` seconds of the clip. Linear, anchored to the clip's own edges (a fade-out follows a later trim), and multiplied on top of `data-volume` and any volume lane. Fades that together exceed the clip are scaled to meet inside it. The browser editor drags them from the dots at an audio clip's top corners or types them in the inspector's Fade rows |
| `data-has-audio="true"` | Video | Declares that the video contributes audio |
Video and audio may omit `data-duration` when their intrinsic duration is known
@@ -148,7 +148,7 @@ the assembled project because render-time frame injection targets those IDs.
## Color grading and media effects
Studio and the CLI store color correction, grading, finishing controls, LUTs,
The browser editor and the CLI store color correction, grading, finishing controls, LUTs,
and media effects on an image or video with `data-color-grading`:
```html
@@ -172,7 +172,7 @@ art treatments. Run
machine-readable surface instead of hard-coding an old effect list.
The grading pipeline applies to real `<img>` and `<video>` elements. It does
not grade a complete HTML scene. Use Studio or
not grade a complete HTML scene. Use the browser editor or
[`media-treatment`](/packages/cli#media-treatment) for normal authoring; see
[Color Grading](/guides/media-effects#fix-and-grade-the-color) and [Media Effects](/guides/media-effects)
for the workflow and current SDR/HDR boundary.
docs/reference/lint-rules.mdx
+9 -9
View File
@@ -20,7 +20,7 @@ Severities:
Source: `packages/lint/src/rules/structure.ts`.
The five codes marked **Warning or error** are warnings when the CLI lints a project, and errors when Studio
The five codes marked **Warning or error** are warnings when the CLI lints a project, and errors when the browser editor
lints the file it is editing.
### `nested_structure_needs_subcomposition`
@@ -100,7 +100,7 @@ Source: `packages/lint/src/rules/composition.ts`.
**Error.** The legacy `data-layer` attribute is used.
**Fix:** Replace it with `data-track-index`, the canonical name Studio and the linter read.
**Fix:** Replace it with `data-track-index`, the canonical name the browser editor and the linter read.
### `duplicate_composition_id`
@@ -214,7 +214,7 @@ stylesheet links in `<head>`, so those styles never apply in preview, snapshot o
### `timed_element_missing_clip_class`
**Warning.** An element has timing attributes but no `class="clip"`. The runtime still times it, but Studio and the clip-ownership rules use `.clip` to recognise it, so it is harder to edit and to lint.
**Warning.** An element has timing attributes but no `class="clip"`. The runtime still times it, but the browser editor and the clip-ownership rules use `.clip` to recognise it, so it is harder to edit and to lint.
**Fix:** Add `class="clip"` to the element.
@@ -324,9 +324,9 @@ To fade or hide something yourself, animate it on the timeline, or toggle a clas
### `studio_missing_editable_id`
**Warning.** A timeline-visible element has no `id`, so Studio cannot target it stably for timeline and canvas edits.
**Warning.** A timeline-visible element has no `id`, so the browser editor cannot target it stably for timeline and canvas edits.
**Fix:** Add a stable, human-readable id such as `id="hero-title"` to elements that agents or Studio should edit.
**Fix:** Add a stable, human-readable id such as `id="hero-title"` to elements that agents or the browser editor should edit.
### `timeline_id_mismatch`
@@ -406,7 +406,7 @@ Source: `packages/lint/src/rules/gsap.ts`.
### `gsap_group_selector_keyframes`
**Warning.** A GSAP tween targets several elements with shared keyframes, so editing one element's keyframes in Studio changes all of them.
**Warning.** A GSAP tween targets several elements with shared keyframes, so editing one element's keyframes in the browser editor changes all of them.
**Fix:** Replace the group selector with individual `tl.to()` calls per element.
@@ -614,7 +614,7 @@ wrapper or an element with a CSS background. The shader runtime only grades real
### `media_crossorigin_breaks_preview`
**Error.** The element has `crossorigin`, which forces a CORS-checked fetch; if the host omits CORS headers, the load fails silently in Studio preview (blank media) while renders still work.
**Error.** The element has `crossorigin`, which forces a CORS-checked fetch; if the host omits CORS headers, the load fails silently in the browser editor preview (blank media) while renders still work.
**Fix:** Remove `crossorigin` unless you read the media back through canvas, WebGL or WebAudio from a host known to send CORS headers.
@@ -698,7 +698,7 @@ wrapper or an element with a CSS background. The shader runtime only grades real
### `video_muted_with_declared_audio`
**Error.** A `<video>` declares `data-has-audio="true"` but also carries `muted`, so Studio preview silences the audio the declaration promises.
**Error.** A `<video>` declares `data-has-audio="true"` but also carries `muted`, so the browser editor preview silences the audio the declaration promises.
**Fix:** Remove `muted` if the video should be audible, or drop `data-has-audio` and use `data-volume="0"` for silent visual video.
@@ -750,7 +750,7 @@ Source: `packages/lint/src/rules/captions.ts`.
### `caption_transcript_not_inline`
**Error.** A captions composition loads its transcript with `fetch()`, but the Studio caption editor needs an inline `var TRANSCRIPT = [...]` array to detect and edit captions.
**Error.** A captions composition loads its transcript with `fetch()`, but the browser editor caption editor needs an inline `var TRANSCRIPT = [...]` array to detect and edit captions.
**Fix:** Embed the transcript inline as `var TRANSCRIPT = [...]` with JSON-quoted keys.
docs/reference/speed-ramps.mdx
+4 -4
View File
@@ -1,7 +1,7 @@
---
title: "Speed ramps"
sidebarTitle: "Speed ramps"
description: "Change a clip's playback speed over time with a rate lane in data-automation. One curve drives the preview, the render and Studio."
description: "Change a clip's playback speed over time with a rate lane in data-automation. One curve drives the preview, the render and the browser editor."
---
A speed ramp changes how fast a `<video>` or `<audio>` clip plays while it
@@ -49,11 +49,11 @@ while keeping pitch, so the sound follows the ramp closely rather than exactly.
## Presets
Studio's **Speed preset** menu draws a ready curve over the clip: Montage,
the browser editor's **Speed preset** menu draws a ready curve over the clip: Montage,
Hero, Bullet, Jump cut, Flash in and Flash out. An agent can write the same
points by hand.
## Editing in Studio
## Editing in the browser editor
Select a clip and open its Media section. The **Speed** slider sets the
constant rate. The **A** toggle next to it automates speed, which shows a rate
@@ -64,6 +64,6 @@ lane on the clip in the timeline that you edit like the volume lane.
- Only `<video>` and `<audio>` clips carry a rate lane.
- Speeds outside `0.1` to `10` are clamped.
- The viewer's own transport speed is a separate control that multiplies with
the clip's speed, and it is narrower: the Studio speed menu offers `0.25` to
the clip's speed, and it is narrower: the browser editor speed menu offers `0.25` to
`2`, the player's menu offers up to `4`, and the runtime clamps a transport
request to `0.1` to `5`.
docs/sdk/guides/timing-and-animation.mdx
+1 -1
View File
@@ -292,7 +292,7 @@ For lower-level operations — individual keyframe mutations (`addGsapKeyframe`,
<Card title="GSAP Animation Guide" icon="wand-magic-sparkles" href="/guides/gsap-animation">
Authoring GSAP timelines in composition HTML.
</Card>
<Card title="Animation in Studio" icon="film" href="/studio/animation">
<Card title="Animation in Studio" icon="film" href="/studio/canvas#animate-with-keyframes">
Keyframe authoring patterns and best practices.
</Card>
</CardGroup>
docs/studio/animation.mdx
-151
View File
@@ -1,151 +0,0 @@
---
title: "Edit animation and keyframes"
sidebarTitle: "Animation and keyframes"
description: "Read existing motion, add and retime keyframes, record gestures, shape paths, and handle generated animation."
---
Animation changes a property over time. A keyframe records an important value
at a particular moment; Studio draws editable keyframes as diamonds on the
timeline.
<div className="not-prose my-7 max-w-2xl overflow-hidden rounded-xl border border-zinc-200 bg-zinc-950 dark:border-zinc-800">
<video
className="aspect-video w-full object-cover"
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-animation-keyframe-loop-v1.mp4#t=0.1"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-animation-keyframe-loop-v1.jpg"
autoPlay
muted
loop
playsInline
preload="metadata"
/>
<div className="px-3 py-2 text-sm text-zinc-600 dark:text-zinc-400">
Select an element, place the playhead, and add a keyframe.
</div>
</div>
## Start by reading the existing movement
1. Select the animated element on the canvas, in Layers, or on the timeline.
2. Expand its animation properties.
3. Move the playhead across the existing diamonds.
4. Play from before the movement until after it ends.
Identify the actual problem before editing: the movement may start too late,
take too long, travel along the wrong route, or accelerate in the wrong way.
Those need different changes.
## Add or change a keyframe
Move the playhead to the moment you want to define. Use the keyframe control in
the timeline toolbar, or press **K** while the selected element supports
keyframes. Then change the property that should animate.
To change existing motion:
- drag a diamond earlier or later to retime it;
- change the property value at that keyframe;
- press **Delete** to remove a selected keyframe.
`K` is context-sensitive: with a canvas element selected it adds or removes a
keyframe at the playhead, starting an animation on a static element; with
nothing selected it remains the playback stop shortcut.
## Use auto-keyframe deliberately
Auto-keyframe starts enabled. While it is on, a supported canvas or Inspector
change at the current playhead time is recorded as animation.
This is useful when you want to pose the element at two moments:
1. move the playhead to the first moment and set the first value;
2. move to the second moment and set the next value;
3. play through the movement Studio created between them.
Turn auto-keyframe off before correcting a layout value that should remain
constant throughout the clip.
## Retime before redesigning
Moving keyframes closer together makes the change happen faster. Moving them
farther apart gives the viewer more time to follow it.
Judge the edit inside the scene. A movement that looks smooth by itself can
still arrive too late for the narration or overlap the next action.
## Shape the easing
Easing controls how a value accelerates and slows between keyframes.
- Use a hold when the value should change without interpolation.
- Start with an easing preset when you want a familiar acceleration pattern.
- Use the speed curve when the preset is close but the start, stop, or
overshoot still feels wrong.
Do not choose easing from the curve alone. Play the entrance, readable hold,
and exit together.
## Shape a motion path
Position keyframes can expose a path over the canvas.
- Drag a point to change the route.
- Adjust a segment when the movement should curve.
- Keep a straight route when direct movement is clearer.
- Use auto-rotate only when the element should face its direction of travel.
- Hold **Option/Alt** while dragging the element to move the complete path.
Add path points only when they make the intended route easier to control.
## Record a movement you can perform
Gesture recording is useful when the motion is easier to demonstrate than to
describe.
1. Select the element.
2. Choose **Record gesture** or press **R**.
3. Move the pointer to perform the motion.
4. Press **R** again to stop.
5. Play the result and refine the generated keyframes.
During recording, drag captures position and scroll captures depth. The
built-in shortcuts panel lists modifiers for rotation, 3D rotation, opacity,
and scale.
Recorded motion is a starting performance, not automatic polish. Simplify a
noisy path and retime it against the rest of the scene.
## Edit animation created by an agent or helper
Studio can display motion whose values were generated by a loop, helper, or
runtime expression, but it cannot always rewrite that source safely.
- **Unroll to edit** rewrites supported helper- or loop-generated motion as
explicit tweens that Studio can edit.
- **Computed value. Edit it in the Code tab.**: the value must be changed
in source.
- When the intent is easier to state than the implementation, copy the element
context to your agent and describe the result you want preserved.
```text
Keep the same curved route, but make the movement finish with the voiceover
instead of two beats later.
```
## Review the finished motion
- The motion should reveal, direct attention, show change, or connect states.
- Important text needs enough still time to be read.
- Several unrelated movements should not compete in the same moment.
- Check the transition into and out of the scene.
- Run the project preview at the intended frame rate before approving it.
For source-level GSAP behavior and the seekable timeline contract, use the
[developer animation guide](/guides/gsap-animation). For every implemented
keyboard action, use [Studio shortcuts](/studio/shortcuts).
## Related topics
- [Edit timing on the timeline](/studio/timeline)
- [Edit the frame](/studio/canvas)
- [Use Studio keyboard shortcuts](/studio/shortcuts)
docs/studio/assets-and-blocks.mdx
+99 -12
View File
@@ -1,6 +1,7 @@
---
title: "Use Assets and Catalog"
description: "Import project media, reuse existing files, and add ready-made visuals."
title: "Captions, assets and variables"
description: "In the browser editor: import and reuse media, add Catalog visuals, restyle caption words, and turn values into variables for templates."
sidebarTitle: "Captions, assets and variables"
---
Use **Assets** for media files. Use **Catalog** for reusable visual scenes and components.
@@ -40,14 +41,10 @@ If a large video is still preparing a preview or proxy, wait for that process be
## Add a Catalog item
1. Open **Catalog**.
2. Browse or search for the visual you need.
3. Preview the result.
4. If the item supports direct insertion, choose **Add** to place it at the current time.
5. Otherwise, copy the generated prompt into your agent chat.
6. Replace sample content and match the project’s timing and design.
Not every Catalog item can be inserted directly. Some are patterns that an agent adapts to the current composition.
Open **Catalog**, search or pick a category (**Captions**, **Code Animations**, **VFX**, **Transitions**, **Effects**)
and preview what you need. Choose **Add** where it's offered to place it at the playhead, or **Ask agent** to copy a
ready request for your agent, which adapts the item to your composition. Then swap the sample content for yours and
match the project's timing and look.
Browse the full [Catalog](/catalog) when you want to compare categories and individual examples.
@@ -56,8 +53,98 @@ Browse the full [Catalog](/catalog) when you want to compare categories and indi
your story.
</Tip>
## Edit captions
When a composition has captions, the editor switches to caption editing: click a word on the frame, or find it in the
caption track under the preview.
<Frame caption="A selected word connects the canvas, caption rail, and the controls that the browser editor currently saves.">
<img
src="https://static.heygen.ai/hyperframes-oss/docs/images/studio-captions-panel-v1.jpg"
alt="HyperFrames browser editor with one caption word selected, word blocks in the caption rail, and position and transform controls"
/>
</Frame>
### What you can change here
Select a word (Shift-click for more), then drag, resize or rotate it on the frame. Arrow keys nudge it by 1 pixel,
Shift + arrow by 10. Color, opacity, font size, weight and family are in the panel. These edits are saved for you, in
`caption-overrides.json`, a moment after you make them.
### What to ask the agent for
Wording, timing, how words are grouped into lines and the caption style itself live in the caption source, not in
the editor. Ask your agent ("break the captions into two-word groups", "fix the spelling of HeyGen") or change the
source.
Then watch once with sound and once muted: names and numbers right, nothing covering a face or a button, and the last
caption clearing cleanly. For reusable styles, browse [caption components](/catalog/components/caption-highlight).
## Use variables
Variables let one project produce many versions without rebuilding its layout or animation.
<Frame caption="The current Variables panel previews values beside the real composition.">
<img
src="https://static.heygen.ai/hyperframes-oss/docs/images/studio-variables-panel-v1.jpg"
alt="HyperFrames browser editor showing a composition beside the Variables panel with Title, Subtitle, and Background inputs"
/>
</Frame>
### Create one reusable input
The quickest path starts from the canvas:
1. Select the element.
2. Open **Variables** in the right panel.
3. Bind the text, media source, text color, background, or font property.
4. Create a new variable or choose a compatible existing one.
Before binding to an existing variable, the browser editor shows its saved default, using the font name or image URL for object values.
For a value that is not tied to the selected element, click **Add variable**. The browser editor supports string, number, color, boolean, enum, font, and image variables. Number variables can include minimum, maximum, and step values; enums can define their allowed options.
Name the input by meaning—`customerName`, `headline`, or `brandColor`—rather than by its position in the design.
### Preview without changing the template
Change a value in the Variables panel to preview that version immediately. The preview is an override: it does not replace the saved default.
The panel tells you whether you are previewing defaults or custom values. Use **Reset** to clear all preview overrides. When a scalar preview should become the new default, use **Set default**.
Use **Edit** to change a variable's label, description, or saved default. For font and image objects, **Default** edits the font name or image URL. Saving keeps the font source, image alt text and fit, and any other stored metadata, including when you change only the label or description.
<Note>
Variables from other compositions are listed separately. You can edit their declarations, but
their values are not live-previewed in the active composition.
</Note>
### Hand the project off
At the bottom of the panel, **Use this template** can copy either:
- the effective values as JSON;
- a ready-to-run `npx hyperframes render ... --variables ...` command.
This keeps the values you just reviewed attached to the render request instead of asking the next person to reconstruct them.
### Test the fallback
A useful template survives realistic variation. Before handing it off, test:
- long and short names or headlines;
- image aspect ratios;
- color contrast;
- number formatting;
- missing optional values.
For the schema, HTML bindings, and batch-render examples, read [Variables](/concepts/variables).
## Related topics
- [Work with media](/guides/media)
- [Work with media](/guides/video-components)
- [Browse the Catalog](/catalog)
- [Turn values into reusable variables](/studio/variables)
- [Add captions to a video](/guides/captions-and-recuts)
- [Voice, sound and captions](/guides/voice-and-audio)
- [Understand the variables contract](/concepts/variables)
- [Render variable-driven versions](/guides/rendering#batch-and-cloud-work)
docs/studio/audio-automation.mdx
-119
View File
@@ -1,119 +0,0 @@
---
title: "Automate a parameter over time"
sidebarTitle: "Automation lanes"
description: "Draw an envelope on a track's volume or an effect's knob, shape a selection, and know which parameters can move at all."
---
A static setting cannot say "quieter while the interview is on screen" or "fade
out over the last three seconds". An automation lane can: it is a set of points on
one parameter, and the value moves between them.
Lanes work on a track's own **volume** and on any supported effect parameter, and
a [group](/studio/audio-groups) has lanes of its own that apply to its whole bus.
## Show a track's lanes
Use the `∿` toggle on the track or group row. It shows a count when lanes already
exist, and it is independent of the row's expand caret — showing a group's members
does not open its lanes.
To start automating an effect parameter, automate it from the parameter's own
control in the rack. A parameter with a lane shows as **Automated**, and its
static control is disabled: the lane owns the value from then on.
## Draw and edit an envelope
Work directly on the lane:
- **Add a point** on the lane at the time you want it.
- **Drag a point** to move it in time or value.
- **Type an exact value** rather than dragging, when the number matters. A volume
lane can go above unity — the ceiling is +12 dB, not 1.
- **Bend a segment** by dragging its curve, so the value holds and then moves late
rather than travelling evenly.
- **Select a time range** to work on several points at once.
With a range selected, right-click it for the shape and cleanup menu:
| Item | Does |
| --- | --- |
| **Ramp up** / **Ramp down** | Replaces the selection with a single move in one direction |
| **Swell** | Rises and returns |
| **Dip** | Falls and returns — the shape most ducking wants |
| **Simplify** | Removes redundant points while keeping the shape. Needs at least three points in the selection |
A selection can also be **copied and pasted** onto another lane, and **retimed** by
stretching its edges — useful when narration moves and its ducking should move
with it.
## Two things that surprise people
**A track lane's times are relative to its clip.** A bed starting at 8 s has its
first point at composition time 8. Move the clip and its envelope moves with it.
**A group lane's times are composition time.** A group has no start of its own,
so its lanes are measured from the beginning of the video. If you are automating
a group bus, read the times as absolute.
**A lane holds its first value backwards** to the start of the clip, and its last
value forward to the end. So a bed that begins before the voice needs an explicit
"no cut" point at the start, or it begins already ducked. This is the single most
common automation mistake.
## Not every knob can move
A parameter can only be automated if the audio engine can schedule it directly.
Three kinds cannot:
| These | Cannot be automated because |
| --- | --- |
| Compressor, limiter, gate, bitcrush, pitch shift | They are configured whole rather than knob-by-knob — **no parameter on any of them can move** |
| Saturation's type, threshold, and oversample | They rebuild the distortion curve; only its output stage can move |
| Reverb's size and damping | They regenerate the room; its wet and dry levels can move |
**A lane on one of those is silently inert** — it stores fine and never does
anything. Pitch shift is the one that catches people out, because a rising pitch
sounds like something a lane should do: it cannot, and the lane will not report
it. To make a compressor's behaviour change over time, automate a `gain` stage
*before* it instead: that changes how hard the compressor is driven, which
is most of what automating its threshold would have done.
To fade a whole preset in or out, automate the preset itself rather than its
parts — its nodes share no single parameter, so the preset as a unit is the only
handle that works.
The [effect registry](/reference/audio-effects#effect-registry) marks every
parameter that can move.
## What should happen
- The value moves between your points, in preview and in the render identically.
- A parameter with a lane reads **Automated** and its static control is disabled.
- A [carve](/studio/voiceover-carve) writes lanes of its own, and they are
ordinary lanes: you can edit them afterwards like any others.
## Common problems
**The lane does nothing.** Either the parameter is one of those above, or the
effect it pointed at is gone. A lane whose effect was deleted is dropped silently
rather than reported.
**A newly added effect arrives already "Automated".** A lane left behind by a
deleted effect can be inherited by the next effect that takes the same internal
id. Remove the stale lane.
**The volume lane is ignored.** A `volume` lane and a timeline tween on the same
track's volume conflict; the lane wins. Pick one.
**The envelope is right but the level is wrong.** A tween's values are absolute
and replace a track's own gain rather than scaling it. Check whether the track
also carries a static level.
**The bed ducks before anyone speaks.** The first point is holding backwards. Add
a point at the clip's start.
## Related topics
- [Mix audio and apply effects](/studio/audio-effects)
- [Make music sit under narration](/studio/voiceover-carve)
- [Audio effects implementation](/reference/audio-effects#data-automation)
docs/studio/audio-effects.mdx
+329 -16
View File
@@ -1,10 +1,10 @@
---
title: "Mix audio and apply effects"
sidebarTitle: "Effects and presets"
description: "Open a track's effect rack, fix a voice with one preset, and add individual effects in an order that works."
title: "Mix audio"
sidebarTitle: "Audio"
description: "In the browser editor: effects and presets on a track, music that sits under narration, groups, muting, and automation over time."
---
Studio carries a full mixer. Every audio track has an effect rack: filters that
The browser editor carries a full mixer. Every audio track has an effect rack: filters that
decide which frequencies it may occupy, dynamics that decide how its level
behaves, character effects that change the shape of the waveform, and space
effects that put it somewhere.
@@ -13,7 +13,9 @@ Everything you do here is written into the composition's HTML. There is no
separate session file, so a mix survives being handed to someone else, committed,
or rendered on another machine.
## Open a track's effect rack
## Effects and presets
### Open a track's effect rack
Select an audio clip on the timeline. The right panel shows an **Audio FX**
section for it, listing the chain from top to bottom in signal order and ending
@@ -26,7 +28,7 @@ You can also reach it without the panel: the **FX** button on an audio track's
timeline header opens a shelf of presets, with **Open rack ›** at the bottom. The
button shows a count when the track already has effects.
## Fix a voice with one preset
### Fix a voice with one preset
Presets are the fastest honest answer to "this voice sounds wrong". Each one is
an ordinary chain you could have built by hand — open it and the individual
@@ -39,11 +41,11 @@ Start from the symptom rather than the effect list:
| Hum or thump underneath | `rumble-cut`, or a high-pass at 80 Hz |
| Boomy, chesty, too close to the mic | **Tame Boominess** |
| Muffled, like it is behind cardboard | **Reduce Mud** |
| Words hard to make out | **Add Clarity**, or [carve the music](/studio/voiceover-carve) |
| Words hard to make out | **Add Clarity**, or [carve the music](/studio/audio-effects#make-music-sit-under-narration) |
| Harsh and tiring over a whole listen | **Soften Harshness** |
| Some words much louder than others | **Evenness** on a compressor, or **Even Out Levels** |
| Room tone audible between sentences | `room-gate` |
| Voice and music fighting each other | [A carve on the music](/studio/voiceover-carve) — not an EQ on either |
| Voice and music fighting each other | [A carve on the music](/studio/audio-effects#make-music-sit-under-narration) — not an EQ on either |
| Dry, recorded nowhere | `room-tight` or `room-natural` |
| Just "amateur" | `voice-clean` |
@@ -69,7 +71,7 @@ tuned to be distinguishable from one another, so do not stack two. `chipmunk`,
`giant`, and `monster` shift pitch, so they change who is speaking rather than
what they are speaking through.
## Add a single effect
### Add a single effect
Use **+ effect** in the rack. The menu groups effects the way you would reach for
them, in four families:
@@ -103,7 +105,7 @@ look identical and you cannot tell the mud cut from the clarity lift.
Bypass a node instead of deleting it while you are deciding — it stays in the
chain, out of the signal path, so you can compare without losing the settings.
## Use the one-knob controls
### Use the one-knob controls
Five effects have no single parameter that could honestly be their face — a
compressor's threshold means nothing without its ratio. Those show one derived
@@ -124,7 +126,7 @@ up. Tightness and Crush are not, because neither has a trim to move.
Editing a parameter underneath one of these knobs is allowed and simply moves the
knob — the chain stores the mechanism, not the knob position.
## Even out a drifting take
### Even out a drifting take
**Even Out Levels** measures the track's own speaking passages and writes a gain
envelope. Its target is that track's own 80th percentile rather than an absolute
@@ -132,17 +134,17 @@ level, so an already-even track is left alone. Use it when passages drift over a
whole take; use a compressor's **Evenness** when the problem is word-to-word
dynamics. **Remove levelling** takes it back off.
## What should happen
### What should happen
- Preview is what the render will sound like: both build the same graph from the
same attributes.
- A chain Studio cannot read plays **dry** in preview so the composition stays
- A chain the browser editor cannot read plays **dry** in preview so the composition stays
workable — but it **fails the render** rather than shipping a track that sounds
plausible and is wrong. If preview sounds unprocessed, suspect the chain.
- Reverb and delay make a track **longer** than its source. A bed with reverb no
longer ends exactly at its clip length; that is expected.
## Common problems
### Common problems
**Nothing sounds different.** Check the node is not bypassed, then check you are
looking at **Audio FX** rather than the visual **Effects** section.
@@ -161,8 +163,319 @@ first; lifting the top of a muddy voice makes it muddy *and* harsh.
between phrases and leaves the noise beneath speech untouched — a source with
audible hiss needs a better source.
## Make music sit under narration
Music under narration is the most common audio problem in a video, and the
obvious fix is the wrong one.
Turning the whole music track down works, and it costs the music all of its
presence for as long as anyone is talking — the bed goes limp through the entire
voiceover. But a voice does not need the whole spectrum. It needs the few bands it
actually occupies. A **carve** takes only those out of the music, so the bed keeps
its low end and its top: still music, while the voice stays intelligible.
### When to use it
Whenever a music bed plays under speech. It is not a polish step to reach if
there is time — place both tracks, carve, and listen.
Skip it only when there is no narration for the music to sit under: a music video,
a title card, a montage cut to the track.
### Carve a bed
The carve is a module at the top of the **music** track's rack, not a separate
tool. Select the music clip, open its **Audio FX** section, and the module asks
you to pick the voices this bed should make room for.
A bed with exactly one candidate voice above it is **already carved**, at the
default strength, because that is what a bed under narration wants. Several
candidates leaves the picker waiting rather than guessing which one is the voice.
<Warning>
The carve belongs on the **music**, never on the voice. It names the tracks it
makes room for, the same way a sidechain compressor does — you select the track
that gets quieter and pick what makes it quieter. A voice carved against itself
is a bug, not a subtle mix choice.
</Warning>
### Set the strength
One control does the whole job. It derives how deep to cut, how many bands, how
wide they are, how far the level may drop, and how far under the voice to aim —
because those move together in any real mix.
| Strength | What you get |
| --- | --- |
| Default (0.25) | A 6 dB dip in three bands — audible without sounding like a hole |
| Around 0.5 | The dip reaches 10 dB, where a carve starts being heard as an effect |
| Higher | Deliberate territory for a loud bed under a quiet voice |
| 0 | Spectral only — one band, no level matching at all |
**Switch the carve off** keeps the settings and stops the carve, which is
different from clearing it: a bed with one candidate voice would otherwise be
carved again by default the moment it was re-evaluated.
### What it writes
Ordinary effects. Open the rack after carving and you will find a few `peaking`
filters and a `gain` stage — nothing hidden, nothing proprietary.
Two things follow from that:
- **The envelopes are editable.** The carve always follows the speech, so every
value becomes an automation lane you can adjust by hand afterwards. Silence
leaves the music alone; a loud passage pushes the carve to full depth. There is
no fixed-depth mode, because a fixed dip thins the bed through every pause.
- **Re-carving is safe.** The nodes a carve writes are tagged as its own, so
running it again at a new strength replaces exactly those and leaves every
effect and lane you built by hand where it was.
Inside a carved bed the signal runs through the dips first, then the level match,
then anything you added yourself — which is why a limiter you place stays the last
ceiling.
### Point it at a group, not at clips
If narration arrives as several clips, [group them](/studio/audio-effects#group-tracks) and
carve against the group.
A carve pointed at individual clips has to list every one of them, and it stays
right only until the next edit: add a fourth narration clip and it plays outside
the carve's awareness, so the music silently fails to duck under it. A carve
pointed at a group resolves membership every time the analysis runs, so a clip
added later is covered without touching the carve.
The browser editor does this for you when you pick a second ungrouped voice — it creates a
group behind them and points the carve at that instead.
### What should happen
- The voice is legible without the bed sounding hollowed out.
- The music comes **back up between phrases** rather than staying flat.
- The bed keeps its bass and its top end. A carve that removed those would just
be a filter.
### Common problems
**The music sounds notched or hollow.** Strength is too high. Come back toward
the default. This is the one failure mode with an obvious sound.
**The voice is still buried.** A carve cannot fix a bed that is simply louder than
the voice — spectral room does not solve a level problem. Compare the two tracks'
actual loudness first. Machine-generated speech commonly arrives far below a
mastered music track, and that gap is arithmetic rather than taste.
**The bed starts out already ducked.** A lane holds its first value backwards to
the start of its clip. A bed that begins before the voice needs an explicit "no
cut" point at its start.
**The music pumps.** The level envelope releases slowly on purpose, because music
that snaps back the instant a word ends sounds like a machine doing it. If it
still pumps, the gaps between phrases are shorter than the release — lower the
strength rather than fighting the envelope.
**Nothing was carved.** The picker leaves itself alone when several tracks could
be the voice. Name the voice explicitly.
## Group tracks
Five narration clips usually want one set of effects and one fader —
not five copies that drift apart as you edit. A group gives them that: its members
sum through a single bus, and the bus carries the group's own volume, effects, and
automation.
### When to use a group
- **Narration in several clips.** One rack for the whole voice, and one thing for
a [carve](/studio/audio-effects#make-music-sit-under-narration) to point at.
- **More than a couple of sound effects.** One place to turn all of them down is
worth more than precise individual levels you will never revisit.
- **Anything you want to turn up or down as a unit** — an ambience layer, a music stem.
A single clip does not need a group. Its own rack is already one place.
### Create a group
On an audio track holding more than one ungrouped clip, the **FX** button offers
to group them first: it reads "Group these clips to add effects to all of them".
Choose **Group**.
The browser editor creates a group behind those clips and points anything that needed it — a
carve, for instance — at the group rather than at the individual clip ids.
### Read a group row
A group gets its own timeline row, carrying:
| Control | Does |
| --- | --- |
| Caret | Shows or hides the member rows beneath it |
| `▤` and name | The group glyph and its label |
| Count | How many members it holds |
| **FX** | Opens the group's own rack, applying to the summed bus |
| `∿` | Shows or hides [the group's own automation lanes](/studio/audio-effects#automate-over-time) |
The caret and the `∿` toggle are independent: showing a group's members does not
open their automation lanes, and opening the group's lanes does not expand its
members.
A group-level effect hears the **sum** of its members, not each one separately.
That is the point of a bus — one compressor across a whole voiceover behaves
differently from five compressors on five clips, and usually better.
### Mute a track or a clip
On an audio track, the speaker button where a visual track has its eye mutes the
track: **Mute track** and **Unmute track**. For a selected clip, the same toggle sits
at the top of its properties, and the media section has a **Muted** switch.
A group row has no mute of its own; to silence a whole group, mute its members'
tracks. Muted audio is left out of the render, so unmute anything you want in the
export.
### Membership lives on the member
Worth knowing because it explains most surprises: each clip records which group it
belongs to, rather than the group listing its members. Delete a clip and it simply
disappears from the group; nothing dangles.
Groups are **audio only** and do not nest. A group marker on a video clip is
ignored.
### What should happen
- The group row appears with the members collapsed beneath it, and the
grouping offer disappears from that track's **FX** button.
- Effects added to the group apply to everything under it at once.
- Muting the group silences all members, in preview and in the render.
### Common problems
**The group's effects do nothing.** Check that the members actually carry the
group, rather than that the group appears to list them.
**Nothing happened when I grouped clips.** Grouping resolves the clips it was
given against the timeline's current rows. If the track is collapsed, or its clips
live inside a nested composition, expand it and try again.
**Clips inside a nested composition are not offered grouping.** They arrive as
separate rows rather than as one track holding several clips, so the grouping
offer does not appear. Group them in the composition that owns them.
**A track was missing from the export.** Check whether it is muted: muted audio is
left out of the render.
## Automate over time
A static setting cannot say "quieter while the interview is on screen" or "fade
out over the last three seconds". An automation lane can: it is a set of points on
one parameter, and the value moves between them.
Lanes work on a track's own **volume** and on any supported effect parameter, and
a [group](/studio/audio-effects#group-tracks) has lanes of its own that apply to its whole bus.
### Show a track's lanes
Use the `∿` toggle on the track or group row. It shows a count when lanes already
exist, and it is independent of the row's expand caret — showing a group's members
does not open its lanes.
To start automating an effect parameter, automate it from the parameter's own
control in the rack. A parameter with a lane shows as **Automated**, and its
static control is disabled: the lane owns the value from then on.
### Draw and edit an envelope
Work directly on the lane:
- **Add a point** on the lane at the time you want it.
- **Drag a point** to move it in time or value.
- **Type an exact value** rather than dragging, when the number matters. A volume
lane can go above unity — the ceiling is +12 dB, not 1.
- **Bend a segment** by dragging its curve, so the value holds and then moves late
rather than travelling evenly.
- **Select a time range** to work on several points at once.
With a range selected, right-click it for the shape and cleanup menu:
| Item | Does |
| --- | --- |
| **Ramp up** / **Ramp down** | Replaces the selection with a single move in one direction |
| **Swell** | Rises and returns |
| **Dip** | Falls and returns — the shape most ducking wants |
| **Simplify** | Removes redundant points while keeping the shape. Needs at least three points in the selection |
A selection can also be **copied and pasted** onto another lane, and **retimed** by
stretching its edges — useful when narration moves and its ducking should move
with it.
### Two things that surprise people
**A track lane's times are relative to its clip.** A bed starting at 8 s has its
first point at composition time 8. Move the clip and its envelope moves with it.
**A group lane's times are composition time.** A group has no start of its own,
so its lanes are measured from the beginning of the video. If you are automating
a group bus, read the times as absolute.
**A lane holds its first value backwards** to the start of the clip, and its last
value forward to the end. So a bed that begins before the voice needs an explicit
"no cut" point at the start, or it begins already ducked. This is the single most
common automation mistake.
### Not every knob can move
A parameter can only be automated if the audio engine can schedule it directly.
Three kinds cannot:
| These | Cannot be automated because |
| --- | --- |
| Compressor, limiter, gate, bitcrush, pitch shift | They are configured whole rather than knob-by-knob — **no parameter on any of them can move** |
| Saturation's type, threshold, and oversample | They rebuild the distortion curve; only its output stage can move |
| Reverb's size and damping | They regenerate the room; its wet and dry levels can move |
**A lane on one of those is silently inert** — it stores fine and never does
anything. Pitch shift is the one that catches people out, because a rising pitch
sounds like something a lane should do: it cannot, and the lane will not report
it. To make a compressor's behaviour change over time, automate a `gain` stage
*before* it instead: that changes how hard the compressor is driven, which
is most of what automating its threshold would have done.
To fade a whole preset in or out, automate the preset itself rather than its
parts — its nodes share no single parameter, so the preset as a unit is the only
handle that works.
The [effect registry](/reference/audio-effects#effect-registry) marks every
parameter that can move.
### What should happen
- The value moves between your points, in preview and in the render identically.
- A parameter with a lane reads **Automated** and its static control is disabled.
- A [carve](/studio/audio-effects#make-music-sit-under-narration) writes lanes of its own, and they are
ordinary lanes: you can edit them afterwards like any others.
### Common problems
**The lane does nothing.** Either the parameter is one of those above, or the
effect it pointed at is gone. A lane whose effect was deleted is dropped silently
rather than reported.
**A newly added effect arrives already "Automated".** A lane left behind by a
deleted effect can be inherited by the next effect that takes the same internal
id. Remove the stale lane.
**The volume lane is ignored.** A `volume` lane and a timeline tween on the same
track's volume conflict; the lane wins. Pick one.
**The envelope is right but the level is wrong.** A tween's values are absolute
and replace a track's own gain rather than scaling it. Check whether the track
also carries a static level.
**The bed ducks before anyone speaks.** The first point is holding backwards. Add
a point at the clip's start.
## Related topics
- [Make music sit under narration](/studio/voiceover-carve)
- [Automate a parameter over time](/studio/audio-automation)
- [Audio effects implementation](/reference/audio-effects)
docs/studio/audio-groups.mdx
-105
View File
@@ -1,105 +0,0 @@
---
title: "Group tracks, mute, and solo"
sidebarTitle: "Groups, mute, and solo"
description: "Give several audio clips one set of effects, one fader, and one mute — and know which of mute and solo reaches the export."
---
Five narration clips usually want one set of effects, one fader, and one mute —
not five copies that drift apart as you edit. A group gives them that: its members
sum through a single bus, and the bus carries the group's own volume, effects, and
automation.
## When to use a group
- **Narration in several clips.** One rack for the whole voice, and one thing for
a [carve](/studio/voiceover-carve) to point at.
- **More than a couple of sound effects.** One place to turn all of them down is
worth more than precise individual levels you will never revisit.
- **Anything you want to mute as a unit** — an ambience layer, a music stem.
A single clip does not need a group. Its own rack is already one place.
## Create a group
On an audio track holding more than one ungrouped clip, the **FX** button offers
to group them first: it reads "Group these clips to add effects to all of them".
Choose **Group**.
Studio creates a group behind those clips and points anything that needed it — a
carve, for instance — at the group rather than at the individual clip ids.
## Read a group row
A group gets its own timeline row, carrying:
| Control | Does |
| --- | --- |
| Caret | Shows or hides the member rows beneath it |
| `▤` and name | The group glyph and its label |
| Count | How many members it holds |
| Mute | Silences every member at once |
| **Hear only this** | Solo — listens to this group while you work |
| **FX** | Opens the group's own rack, applying to the summed bus |
| `∿` | Shows or hides [the group's own automation lanes](/studio/audio-automation) |
The caret and the `∿` toggle are independent: showing a group's members does not
open their automation lanes, and opening the group's lanes does not expand its
members.
A group-level effect hears the **sum** of its members, not each one separately.
That is the point of a bus — one compressor across a whole voiceover behaves
differently from five compressors on five clips, and usually better.
## Mute and solo are not symmetric
This is the part worth remembering:
| Control | What it does | In the export |
| --- | --- | --- |
| Mute | Silences a clip or a whole group | **Included** — muted audio is dropped from the render |
| **Hear only this** | Listens to one thing while you work | **Ignored** — solo never reaches the render |
So **mute is a mix decision and solo is a listening tool**. You can leave a solo
active, render, and get the full mix — which is deliberate, because a forgotten
solo silently shipping a one-track export would be much worse.
A group that is not soloed while one of its members is appears **half-lit**: the
display-only signal that some of what is under it still plays.
## Membership lives on the member
Worth knowing because it explains most surprises: each clip records which group it
belongs to, rather than the group listing its members. Delete a clip and it simply
disappears from the group; nothing dangles.
Groups are **audio only** and do not nest. A group marker on a video clip is
ignored.
## What should happen
- The group row appears with the members collapsed beneath it, and the
grouping offer disappears from that track's **FX** button.
- Effects added to the group apply to everything under it at once.
- Muting the group silences all members, in preview and in the render.
## Common problems
**The group's effects do nothing.** Check that the members actually carry the
group, rather than that the group appears to list them.
**Nothing happened when I grouped clips.** Grouping resolves the clips it was
given against the timeline's current rows. If the track is collapsed, or its clips
live inside a nested composition, expand it and try again.
**Clips inside a nested composition are not offered grouping.** They arrive as
separate rows rather than as one track holding several clips, so the grouping
offer does not appear. Group them in the composition that owns them.
**A soloed track was missing from the export.** It was not — solo cannot affect a
render. Look for a mute.
## Related topics
- [Make music sit under narration](/studio/voiceover-carve)
- [Automate a parameter over time](/studio/audio-automation)
- [Audio effects implementation](/reference/audio-effects#groups-mute-and-solo)
docs/studio/canvas.mdx
+206 -90
View File
@@ -1,43 +1,32 @@
---
title: "Edit the frame"
sidebarTitle: "Edit the frame"
description: "Select the right element, change its content or design, arrange layers, and verify the result in motion."
title: "Edit on the canvas"
sidebarTitle: "Canvas, motion and code"
description: "In the browser editor: select and change what you see, animate it with keyframes, and edit the code or hand it to your agent."
---
Use this workflow when you can point to the thing that needs to change in the
current frame.
import { DocsVideo } from "/snippets/docs-video.jsx";
For anything you can point at in the current frame.
<Frame caption="A selected headline exposes canvas handles and the Design controls that apply to it.">
<img
src="https://static.heygen.ai/hyperframes-oss/docs/images/studio/canvas-v1.jpg"
alt="HyperFrames Studio with a headline selected on the canvas and its Design controls open"
alt="HyperFrames browser editor with a headline selected on the canvas and its Design controls open"
/>
</Frame>
## 1. Pause where the element is visible
## Select it
Move the playhead to a frame where you can judge the element and its
surroundings. If it enters or exits, pause after the movement has settled.
Pause where the element is fully visible and click it. If the wrong thing gets selected (or it's hidden, off-frame or
inside a group), pick it in the **Layers** tab instead. The selection is the same in the preview, the panels and the
timeline.
Click the element on the canvas. When the wrong item is selected, open
**Inspector → Layers** and choose it there. Layers is also the reliable way to
find something that is hidden, outside the frame, or inside a group.
## Change it
The selection stays connected across the canvas, Inspector, and timeline.
On the preview: drag inside the selection to move it, drag a handle to resize, use the rotation control, crop an image
or video without moving its box, nudge with the arrow keys. Guides show when it snaps.
## 2. Change only what is wrong
Use the canvas for spatial edits:
- drag inside the selection to move it;
- drag a handle to resize it;
- use the rotation control for supported elements;
- crop an image or video to change the visible area without moving its box;
- use arrow keys for a small nudge;
- watch the guides when the element snaps to the frame or another element.
Open **Design** for exact properties. The sections shown depend on the selected
element.
For exact values, use **Design**. Its sections depend on what you selected:
| Need | Look in Design |
| -------------------------------------------------------- | -------------- |
@@ -50,86 +39,213 @@ element.
| Change timing or animation | Motion |
| Apply a look or media effect | Effects |
Do not change content, layout, style, timing, and motion at once. Make one kind
of edit, play it, then decide whether another edit is still needed.
## 3. Work with overlaps and groups
Layers shows the visual structure of the current composition. Dragging a layer
changes its stacking order when the wrong item covers another. Timeline tracks
organize time; they are not automatically the same as visual stacking order.
Group elements that should move and remain organized together. Use
**Command/Ctrl + G** to group and **Command/Ctrl + Shift + G** to ungroup.
A nested composition is a reusable scene inside another composition. Open the
nested composition when the change should affect that scene itself. Stay in
the parent when you only need to change where or when the scene appears.
## 4. Decide whether the edit should animate
Auto-keyframe starts enabled in the timeline toolbar.
- Turn it **off** for a correction that should stay constant for the clip.
- Leave it **on** when changing the property at the current playhead time
should create motion.
After an animated edit, look for the new keyframe diamond and play through the
complete movement. Use [Animation and keyframes](/studio/animation) when you
need to retime or shape it.
Make one kind of change at a time, play it, then decide on the next.
<Warning>
A position change made at one frame can look like a normal layout fix while becoming an unintended
animation during playback. Check auto-keyframe before dragging.
**Auto-record manual edits as keyframes** is on by default, so moving something at one frame can quietly become an
animation. Turn it off in the timeline toolbar for a fix that should hold for the whole clip.
</Warning>
## 5. Replace media without breaking the scene
## Layers, groups and nested scenes
Select the image, video, or audio element and replace its source from **Media**
or **Assets**. Then check:
Drag in **Layers** to change what sits in front. Timeline tracks are about time, not stacking. Group things that move
together with **⌘G** (ungroup **⌘⇧G**). Open a nested scene to change the scene itself; stay in the parent to change
only where or when it appears.
- crop and fit;
- visible duration;
- playback start, rate, loop, and volume when those controls apply;
- the transition into and out of the clip.
## Replace media
A new file can have a different aspect ratio or duration even when the source
path changes successfully.
Select the image, video or audio and swap the file from **Media** in Design or from **Assets**. Then check the crop,
the length, and the cut in and out: a new file can have another shape or duration.
## 6. Play the result, not just the frame
## Check it playing
Play from before the edit until after it. Check that:
Play from before the edit to after it: still readable at the final size, not covering anything important, entrances
and exits still working, text readable over every background it crosses. ⌘Z undoes.
- the element stays readable at the final output size;
- it does not cross or cover another important element;
- its entrance and exit still work;
- text remains readable over every background it crosses;
- undo returns the project to the expected state if the change was wrong.
## When it isn't editable here
## When Studio cannot edit it safely
Some generated, nested, or source-controlled elements do not expose every
property for direct editing. In order:
1. select the exact parent or child in Layers;
2. open the nested composition;
3. check whether Design exposes the property;
4. use **Ask agent** or copy the selected context;
5. edit the source only when you understand the project structure.
Ask the agent for a broad change instead of forcing it through several manual
edits:
Some generated or nested elements don't expose every property. Try selecting the exact parent or child in Layers, or
open the nested scene. Otherwise choose **Ask agent about this element** in Design (it copies the element and your
request for your agent), or ask for the bigger change directly:
```text
Keep this scene's content, but rebuild its layout so the product remains
readable at mobile-video size.
Keep this scene's content, but rebuild its layout so the product stays readable at phone size.
```
Use [the timeline](/studio/timeline) when the problem is when something happens,
or [Animation and keyframes](/studio/animation) when the problem is how it moves.
## Animate with keyframes
A keyframe is a value at a moment; the motion is what happens between two of them. Keyframes show as diamonds on
the timeline.
<div className="not-prose my-7 max-w-2xl overflow-hidden rounded-xl border border-zinc-200 bg-zinc-950 dark:border-zinc-800">
<video
className="aspect-video w-full object-cover"
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-animation-keyframe-loop-v1.mp4#t=0.1"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-animation-keyframe-loop-v1.jpg"
autoPlay
muted
loop
playsInline
preload="metadata"
/>
<div className="px-3 py-2 text-sm text-zinc-600 dark:text-zinc-400">
Select an element, place the playhead, and add a keyframe.
</div>
</div>
### Read the motion first
Select the element, expand its animation lanes on the timeline, and play from before the move to after it. Name the
real problem first: it starts late, takes too long, takes the wrong route, or speeds up the wrong way. Each needs a
different fix.
### Add, move or delete keyframes
Put the playhead on the moment, choose **Add keyframe at playhead** (or press **K** with the element selected), and
change the property. Drag a diamond to retime it (closer together is faster), change its value, or press **Delete**.
With **Auto-record manual edits as keyframes** on (the default), any change you make at the playhead becomes a
keyframe. That's the quick way to pose two moments: set the first, move the playhead, set the second, play. Turn it
off for a fix that should hold the whole clip.
### Easing and paths
- **Easing** is how it speeds up and slows down between keyframes. Start from a preset; use the speed curve when the
start or the stop still feels wrong; use a hold for a jump with no in-between. Judge it playing, not from the curve.
- **Paths:** position keyframes draw a route on the preview. Drag a point to change it, bend a segment to curve it,
hold **Option** while dragging the element to move the whole path. Turn on auto-rotate only when the element
should face where it's going.
### Record a gesture
When a move is easier to perform than describe: select the element, press **R** (**Record a gesture**), move the
pointer, press **R** again. Drag records position, scroll records depth; the shortcuts panel lists the keys for
rotation, opacity and scale. Treat it as a first take: simplify the path and retime it.
### Motion the agent wrote
Some motion comes from a loop or helper in the code. **Unroll to edit** turns supported cases into ordinary keyframes.
When a value says **Computed value. Edit it in the Code tab.**, it can only be changed in the code, or ask your agent:
```text
Keep the same curved route, but make the move finish with the voiceover instead of two beats later.
```
Good motion reveals, points or connects; text gets time to be read; two unrelated moves don't fight for the same
moment. The code-level rules are in the [GSAP animation guide](/guides/gsap-animation).
## Edit the source
The browser editor, your agent and the CLI all work on the same files. Use **Code** for a small change you understand;
use the agent when it crosses files, changes the structure or starts from an error you don't recognize. (In the
[Studio app](/studio-app/edit-with-the-agent) the agent sits beside the preview, so none of the copying below is needed.)
### Choose the smallest safe surface
| Change | Best starting point |
| ---------------------------------------------------------------- | ------------------------------ |
| Visible text, layout, style, media, timing, or supported motion | Canvas, Inspector, or timeline |
| One known value in one known file | Code |
| Story, several scenes, generated animation, or project structure | Agent |
| A reported lint problem with a clear direct fix | The browser editor or Code |
| An unfamiliar failure or a fix spanning files | Copy to Agent |
The choice is about the change, not a permanent workflow. You can move between
the surfaces without exporting or converting the project.
### Make a focused source edit
1. Open **Code** in the left panel column.
2. Select the exact file in the project tree.
3. Find the value responsible for the visible result.
4. Make one focused change.
5. Wait for the preview to refresh, then play the affected moment.
Edits save automatically and can be undone. If a save fails, the editor says so; fix the connection to the preview
server before going on.
<Warning>
Creating, renaming, moving, or deleting a file can break references elsewhere in the project.
Search for the old path or ask the agent to update every reference.
</Warning>
Don't edit the same file here and in another tool at once. If the other change lands first, your save is refused with
a message; reload the file, look at what changed, and apply your edit again.
### Ask about the selected element
When a visible element needs source work, select it and choose **Ask agent about
this element**. The browser editor prepares the element and project context, combines it
with your instruction, and copies the prompt to the clipboard. Paste that
prompt into your agent chat.
<Frame caption="The browser editor prepares a prompt for the selected element; you paste it into your agent chat.">
<img
src="https://static.heygen.ai/hyperframes-oss/docs/images/studio/ask-agent-v1.jpg"
alt="HyperFrames browser editor dialog for copying a prompt about the selected element and project context"
/>
</Frame>
```text
Keep the current narration and scene order. Make this product panel readable
at the final video size, and do not change the following scene.
```
The copied context tells the agent where to look. Your sentence tells it what
must remain true.
### Run Lint
Choose **Lint** at the bottom of the left panel column. The browser editor opens **HyperFrame
Lint Results** with errors, warnings, file locations, and fix hints when they
are available.
Fix a simple, understood issue directly, then run Lint again. Use **Copy to
Agent** when the source location is unfamiliar or the fix may affect other
files. Add what happened before the error and what you expected:
```text
This appeared after I shortened the intro clip. I expected the title animation
to keep its current timing. Fix the issue without changing the rest of the
opening.
```
Do not paste only the error message when the intended result matters. A
technically valid repair can still make the wrong creative change.
### Use the project-level gates before delivery
Lint is a quick in-editor pass. The project-level commands remain the
final gate, especially when the project contains nested compositions:
```bash
npx hyperframes lint
npx hyperframes check
```
`lint` checks the composition structure. `check` adds browser, runtime, layout,
motion, and WCAG contrast verification.
Passing checks do not approve the story or the final encode. Play the project
after a source fix, then watch the rendered file before sharing it.
### When the preview and source disagree
1. Stop editing until the latest save finishes.
2. Keep the first exact error or save warning.
3. Reload the project only after checking whether another tool changed the file.
4. Run the project checks.
5. Ask the agent with the error, project path, action that caused it, and result
you expected.
Use [Troubleshooting](/studio/troubleshooting) for editor, preview, and
render-queue failures. Use [Finish and share](/guides/export-and-share) for the
complete approval, validation, render, and delivery path.
## Related topics
- [Edit timing on the timeline](/studio/timeline)
- [Edit animation and keyframes](/studio/animation)
- [Work with source and an agent](/studio/source)
- [Keyboard shortcuts](/studio/index#keyboard-shortcuts)
- [Recover from a browser editor problem](/studio/troubleshooting)
- [Understand a HyperFrames project](/concepts)
- [Finish, render, and share](/guides/export-and-share)
docs/studio/captions.mdx
-54
View File
@@ -1,54 +0,0 @@
---
title: "Edit captions"
description: "Review captions in context and understand which Studio edits are saved today."
---
Studio switches to caption editing when the open composition contains `.caption-group` elements and their caption source can be resolved.
<Frame caption="A selected word connects the canvas, caption rail, and the controls that Studio currently saves.">
<img
src="https://static.heygen.ai/hyperframes-oss/docs/images/studio-captions-panel-v1.jpg"
alt="HyperFrames Studio with one caption word selected, word blocks in the caption rail, and position and transform controls"
/>
</Frame>
## Adjust a word on the canvas
1. Select a caption word. Hold **Shift** to select more than one.
2. Drag the selection, resize it, or rotate it on the canvas.
3. Use the arrow keys for a 1-pixel nudge, or **Shift** + arrow for 10 pixels.
4. Reload the project once to confirm the override was saved.
Position, scale, rotation, color, opacity, font size, weight, and family overrides
are written to `caption-overrides.json` after a short delay.
## Use the timeline to inspect the rhythm
The caption timeline shows one block per word. Select a block to find the same word on the canvas. You can drag an edge to audition different start or end timing, and double-click a word to preview a new group boundary.
<Warning>
Timing changes, group splits, and Animation-tab changes are live-preview tools in the current
Studio. They do not survive a reload. Fix words, durable timing, group structure, and reusable
caption behavior in the caption source or ask the agent to update it, then reopen the project.
</Warning>
This distinction matters: Studio can save word-level visual overrides, but it is
not yet a complete caption-source editor.
Browse [caption components](/catalog/components/caption-highlight) when the source needs a reusable visual treatment.
## Review the result
- Watch with sound.
- Watch once with sound muted.
- Check names and important words against the audio.
- Check captions against cuts, overlays, and changing backgrounds.
- Confirm the final caption disappears cleanly.
If a preview-only edit fixed a real problem, move that change into the source before rendering.
## Related topics
- [Create captions or recut talking-head footage](/guides/captions-and-recuts)
- [Work with voice, sound, and captions](/guides/voice-and-audio)
- [Browse reusable caption treatments](/catalog/components/caption-highlight)
docs/studio/export.mdx
+73 -28
View File
@@ -1,9 +1,11 @@
---
title: "Export and manage renders"
description: "Choose a format, quality, resolution, and frame rate, then manage the render queue."
title: "Export and slideshows"
description: "In the browser editor: set up and run renders in the Renders panel, and build a navigable slideshow."
sidebarTitle: "Export and slideshows"
---
Click **Export** in the top bar when the project is ready for a finished file. Studio opens the **Renders** panel.
**Export** in the header starts a render straight away, with the settings in the **Renders** panel on the right. So
set those first.
<Frame caption="The Renders panel contains delivery settings and the render queue.">
<img
@@ -12,44 +14,87 @@ Click **Export** in the top bar when the project is ready for a finished file. S
/>
</Frame>
## Choose the format
## Set up the file
- **MP4** — the normal choice for sharing and uploading.
- **WebM** — useful for web delivery and some transparency workflows.
- **MOV (ProRes)** — useful when another editing or production workflow expects a high-quality intermediate.
| Setting | Choose |
| --- | --- |
| **Format** | **MP4** for sharing and uploading; **WebM** for the web and transparent overlays; **MOV** (ProRes) when another editor needs a high-quality master |
| **Resolution** | **Auto** keeps the project's size. Bigger renders are slower and don't sharpen low-resolution footage |
| **Frame rate** | 30 unless the destination or the footage needs 24 or 60 |
| **Quality** | Hidden for MOV, which always uses ProRes quality |
| **Use GPU encoding** | Faster on machines that support it |
Choose the format required by the destination rather than the one with the most options.
**About video formats**, next to the settings, explains the choices.
## Choose quality and size
## The render queue
Use the project’s authored resolution unless you need a specific delivery size.
Each export becomes a row in **Renders**, with its progress. Cancel a running one, download or delete a finished
one, and **Hide finished** to tidy the list without deleting files.
The resolution control includes **Auto** and compatible preset sizes. Increasing resolution makes the render slower and the file larger; it does not repair low-resolution source media.
Before sending: open the file itself, watch the start and the end, check captions, cuts and sound at the busiest
moment, and give it a name that says which version it is. If a render fails, keep the error and see
[troubleshooting](/studio/troubleshooting).
Choose 24, 30, or 60 fps only when the destination or source material requires it. MOV uses a fixed ProRes quality, so the separate quality choice is hidden for that format.
## Build a slideshow
## Start and manage a render
A slideshow is a live, navigable presentation—not one linear video. The **Slideshow** tab appears when the active composition contains a HyperFrames slideshow manifest.
The render queue shows active and completed jobs. From there you can:
<Frame caption="The Slideshow panel builds the main route from real scenes before optional branches are added.">
<img
src="https://static.heygen.ai/hyperframes-oss/docs/images/studio-slideshow-panel-v1.jpg"
alt="HyperFrames browser editor showing three main-line slides in the Slideshow panel beside the deck timeline"
/>
</Frame>
- watch progress;
- cancel an active job;
- download a completed file;
- delete an unwanted result;
- choose **Hide finished** to remove completed rows from the list without deleting their files.
### Build the main path
## Before you send the file
Start with the route everyone should see:
1. Open the exported file itself.
2. Watch the beginning and end.
3. Check captions, cuts, audio, and the most complex transition.
4. Confirm dimensions and duration.
5. Use a clear filename that identifies the version.
1. In **Slides**, check the scenes that belong in the main presentation.
2. Use the arrows to put them in order.
3. Select each slide and confirm that it makes one complete point.
4. In **Slide Inspector**, add speaker notes that help the presenter rather than repeat the slide.
If a render fails, keep the error and open [Studio troubleshooting](/studio/troubleshooting).
The browser editor saves slideshow changes into the project’s manifest. Notes save after a short pause; other edits save immediately and participate in project history.
### Add fragment reveals
Move the playhead to the moment when the presentation should pause, then click **Mark** in Slide Inspector. That time becomes a fragment hold-point for the selected slide.
Use fragments when the presenter needs to reveal part of an idea before advancing. A slide does not need a hold-point for every bullet.
### Add an optional path
Branches keep optional detail outside the main story:
1. Open **Branches**, name a branch, and assign its slides.
2. On the slide where the choice appears, select the visible button or object on the canvas.
3. Open **Hotspot Tool**, choose the target branch, add a useful label, and click **Make hotspot**.
4. Keep a clear route back to the main story.
Deleting a branch removes that branch definition and every hotspot that points to it, so the browser editor asks for confirmation first. The source scenes remain in the project.
### Test it as a presentation
Run the presenter locally:
```bash
npx hyperframes present <project-directory>
```
Test next and previous navigation, every fragment, every hotspot, every branch, and the return path. Click **Present** or press **P** to open the synchronized audience view.
<Note>
A slideshow stays interactive. If the result should simply play from beginning to end as an MP4,
use a [video workflow](/workflows) instead.
</Note>
To create the deck with an agent before refining it here, follow [Make an interactive presentation with AI](/guides/slideshow).
## Related topics
- [Finish, render, and share a project](/guides/export-and-share)
- [Render from the command line](/guides/rendering)
- [Recover from a Studio problem](/studio/troubleshooting)
- [Finish, render and share](/guides/export-and-share)
- [Make an interactive presentation with AI](/guides/slideshow)
- [Use variables and templates](/studio/assets-and-blocks#use-variables)
- [Work with source and an agent](/studio/canvas#edit-the-source)
docs/studio/index.mdx
+124 -161
View File
@@ -1,113 +1,51 @@
---
title: "Work on a project in Studio"
sidebarTitle: "Studio overview"
description: "Open a HyperFrames project, understand the workspace, make a safe edit, and finish a version."
title: "Edit in the browser editor"
sidebarTitle: "Browser editor"
description: "The browser editor: open any HyperFrames project with one command and edit what you see, the timing and the motion by hand."
---
import { DocsVideo } from "/snippets/docs-video.jsx";
<div className="hf-docs-video-frame">
<DocsVideo
title="A narrated tour of a real HyperFrames Studio project"
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-front-door-v2.mp4"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-front-door-v2.jpg"
/>
</div>
Studio is the visual editor for the same HTML project your agent and the CLI
use. Any HyperFrames project opens here without an import or conversion. Open any project folder, then run:
There are two editors. **The [Studio app](/studio-app/index)** is the desktop app with an agent beside the
preview: you say or draw what to change. **The browser editor**, on this page, opens any project folder in your
browser for editing by hand while your own agent works in its terminal. Both edit the same files.
```bash
npx hyperframes preview
```
## Know the workspace
<Frame caption="Preview keeps project files, the live frame, the Inspector, and time-based editing in one workspace.">
<img
src="https://static.heygen.ai/hyperframes-oss/docs/images/studio/overview-v1.jpg"
alt="HyperFrames Studio Preview showing project tools, a live composition, the Inspector, and the timeline"
/>
<Frame caption="The browser editor today: files on the left, the preview in the middle, Design on the right, the timeline below. Open in desktop app moves the project to the Studio app.">
<img src="/public/images/studio/editor-overview-v2.jpg" alt="The HyperFrames browser editor with the Inkwell project open: compositions, preview, Design panel and timeline" />
</Frame>
- **Preview** shows the built project. The live frame is in the middle, the
timeline is below, project tools are on the left, and the Inspector is on the
right. Drag any panel tab to move it, and use **Window** in the header to
reopen a closed panel or reset the layout. Studio remembers your layout for
each project.
- **Code**, **Compositions**, **Assets**, and **Catalog** expose the project source,
compositions, media, and reusable visuals. **Design**, **Layers**,
**Variables**, and **Renders** control the selected work.
## Where to start
You do not need to learn every panel. Choose the surface that matches the
problem in front of you.
| You want to change | Start with |
| --- | --- |
| Something you can see in this frame | Click it in the preview, then **Design** or **Layers** |
| When something appears or how long it stays | The **Timeline** |
| One movement | The animation controls and keyframes |
| The story, several scenes, the structure | Your agent. **Describe a change to the agent** (⌘K) copies a ready request to paste into it |
## Compose preview guides in a host app
Panels can be dragged anywhere; **Window** reopens a closed one or resets the layout.
Host apps can compose the same rulers, safe margins, grid, and snap toolbar that
Studio uses over their own preview iframe. The provider owns the iframe geometry
and shared preferences, so the host supplies its current iframe element and chooses the
parts to render:
## Edit what you see
```tsx
import {
GridOverlay,
PreviewGuides,
PreviewOverlayProvider,
SnapToolbar,
} from "@hyperframes/studio";
function Preview({ iframe }: { iframe: HTMLIFrameElement | null }) {
return (
<PreviewOverlayProvider iframe={iframe}>
<PreviewGuides />
<GridOverlay />
<SnapToolbar />
</PreviewOverlayProvider>
);
}
```
| You want to change | Start with |
| ----------------------------------------------- | -------------------------------- |
| Something visible in the current frame | Canvas, then Design or Layers |
| When something appears or how long it stays | Timeline |
| One movement or transition | Animation controls and keyframes |
| The story, several scenes, or project structure | Your agent |
## Make one safe edit
Pause where the problem is visible. Click the element on the canvas, or choose
it in **Layers** when several elements overlap. Then change only the property
you meant to change.
<div style={{ maxWidth: "42rem", margin: "1.5rem auto" }}>
<Frame caption="The canvas selects the visible element; Design exposes the properties Studio can edit safely.">
<video
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-direct-edit-loop-v2.mp4"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-direct-edit-loop-v2.jpg"
alt="Selecting an element and changing it in HyperFrames Studio"
aria-label="Selecting an element and changing it in HyperFrames Studio"
autoPlay
muted
loop
playsInline
preload="metadata"
/>
</Frame>
</div>
Use the canvas to move, resize, rotate, or crop a supported element. Use
**Design** for text, layout, style, media, motion, 3D, or color controls that
apply to the selection. Play through the surrounding moment before accepting
the change; a correct still frame can still create a collision in motion.
Pause where the problem is, click the element (or pick it in **Layers** when things overlap), and change only that.
Drag to move, resize, rotate or crop; use **Design** for text, layout, style, media, motion and color. Then play
through the moment: a frame that looks right can still collide in motion.
<Warning>
Auto-keyframe starts enabled. Turn it off before a normal layout correction that should stay
constant. Leave it on only when the change at the current playhead time should become animation.
**Auto-record manual edits as keyframes** is on by default, so a change you make at the playhead becomes animation.
Turn it off in the timeline toolbar for a fix that should stay the same all the way through.
</Warning>
For the complete visible-edit workflow, continue to [Edit the
frame](/studio/canvas).
More: [Edit the frame](/studio/canvas).
## Change the timing
Drag a clip to move it, drag an edge to make it longer or shorter, and use **Split at playhead** to cut one clip in
two. Scrub across the cut after each change. More: [the timeline](/studio/timeline).
## Scrub the preview
@@ -116,84 +54,109 @@ the video. It stays available with the timeline hidden and in fullscreen. Use
the arrow keys while the seek bar has focus, or Home and End to jump to the
start and end. Seeking pauses playback, just like moving the timeline playhead.
## Change time on the timeline
## Check and export
Drag a clip to move it earlier or later. Drag an edge to change its duration.
Use the razor only when one supported clip must become two.
<div style={{ maxWidth: "42rem", margin: "1.5rem auto" }}>
<Frame caption="Timing changes stay visible beside the frame and neighboring tracks.">
<video
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-timing-loop-v2.mp4"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-timing-loop-v2.jpg"
alt="Adjusting clip timing in the HyperFrames Studio timeline"
aria-label="Adjusting clip timing in the HyperFrames Studio timeline"
autoPlay
muted
loop
playsInline
preload="metadata"
/>
</Frame>
</div>
Move the playhead through the surrounding cut after every timing change. Use
[the timeline guide](/studio/timeline) when you need trimming, splitting,
beats, nested scenes, or multi-item editing.
## Hand a broader change back to the agent
Studio is best for a change you can point at. Ask the agent when the request
affects the story, several scenes, source research, or unfamiliar project code.
Use **Ask agent** or **Copy to Agent** when Studio offers it, then add the human
intent that the copied context cannot know:
```text
Make the opening feel faster, but keep the current narration and final scene.
```
The agent and Studio edit the same source. There is no export or conversion
between them.
## Check and render the version
Watch the project from the beginning, run **Lint**, and fix the reported issues.
Before delivery, run the project-level browser gate as well:
Run **Lint** (bottom left) and fix what it reports, then the full check before you deliver:
```bash
npx hyperframes check
```
Then render through Studio, your agent, or the CLI. Open the exported file and
watch it once before sharing it.
Choose **Export** in the header, or render from your agent or the command line, and watch the file once before you
share it.
<div style={{ maxWidth: "42rem", margin: "1.5rem auto" }}>
<Frame caption="Studio queues and monitors a render from the same project.">
<video
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-check-render-loop-v2.mp4"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-check-render-loop-v2.jpg"
alt="Queuing and monitoring a render in HyperFrames Studio"
aria-label="Queuing and monitoring a render in HyperFrames Studio"
autoPlay
muted
loop
playsInline
preload="metadata"
/>
</Frame>
</div>
## Keyboard shortcuts
Shortcuts depend on the active area. The table below covers the shortcuts
implemented by the browser editor's player, canvas, and timeline.
### Playback
| Shortcut | Action |
| --- | --- |
| Space | Play or pause |
| J / K / L | Play backward, stop, or play forward |
| Left / Right arrow | Step one frame, or nudge a selected canvas element horizontally |
| Up / Down arrow | Nudge a selected canvas element vertically |
| Shift + arrow | Step ten frames horizontally, or nudge a selected element farther |
| M | Mute or unmute |
| Shift + L | Toggle loop playback |
| I / O | Set the work-area in or out point |
| Shift + I / Shift + O | Clear the in or out point |
| A / E | Jump to the in or out point |
| F | Toggle fullscreen |
### Editing
| Shortcut | Action |
| --- | --- |
| V | Selection tool |
| B | Toggle the razor tool |
| S | Split the selected eligible clip at the playhead |
| N | Toggle timeline snapping |
| Command/Ctrl + Z | Undo |
| Command/Ctrl + Shift + Z, or Ctrl + Y | Redo |
| Command/Ctrl + C / V / X | Copy, paste, or cut the selected element |
| Command/Ctrl + G | Group selected elements |
| Command/Ctrl + Shift + G | Ungroup |
| Delete / Backspace | Delete the selected keyframe or element |
The focused area decides what a shared shortcut does. Arrow keys nudge a selected
canvas element, step through frames when nothing nudgeable is selected, or move
between timeline targets when the timeline has focus (see [Timeline
navigation](#timeline-navigation) below). `K` adds or removes a keyframe at the
playhead when a canvas element is selected, starting an animation on a static
element, and otherwise stops playback. `J` always drives playback.
### Timeline navigation
Tab into the timeline before using these commands. The browser editor keeps one logical timeline target in the Tab order and moves that target without requiring every row or clip to stay mounted.
| Shortcut | Action |
| --- | --- |
| Left / Right arrow | Move to the previous or next target in the focused row |
| Up / Down arrow | Move to the nearest target at the same time in the previous or next logical row |
| Home / End | Move to the start or end of the focused row |
| Command/Ctrl + Home / End | Move to the first or last logical row |
| Page Up / Page Down | Move by one visible page of logical rows |
| Enter / Space | Expand or collapse keyframe property lanes on a focused track row |
| Context Menu or Shift + F10 | Open the focused target's context menu when available |
On an expandable track row, Right arrow expands collapsed keyframe lanes and Left arrow collapses expanded lanes. From a keyframe property row, Left arrow returns to its parent track row. When no disclosure or parent action applies, those arrows continue moving within the row.
If the destination is outside the virtualized viewport, the browser editor scrolls it into view and restores focus after it mounts.
### Keyframes and recording
| Shortcut | Action |
| --- | --- |
| K | Add or remove a keyframe at the playhead when the current selection supports it |
| R | Start or stop gesture recording |
During gesture recording, drag records position, scroll records depth,
Shift-drag records 3D rotation, Option/Alt-drag records rotation, and
Command/Ctrl-drag or scroll records opacity or scale.
### Canvas and panels
| Shortcut | Action |
| --- | --- |
| G | Toggle the canvas grid |
| Command/Ctrl + 1 | Open Compositions |
| Command/Ctrl + 2 | Open Assets |
| Option/Alt + drag | Move an entire animation path |
| Shift + drag a resize handle | Resize uniformly |
<Warning>
A shortcut should not fire while you are typing into a text or source field. If the wrong area has focus, click the canvas or timeline before using an editing shortcut.
</Warning>
Use the **Shortcuts and tools** button beside the playback controls for the
built-in shortcut list, work-area controls, and jump-to-frame field.
## Related topics
<CardGroup cols={2}>
<Card title="Edit the frame" icon="crop" href="/studio/canvas">
Select, style, arrange, group, and replace visible elements.
</Card>
<Card title="Edit timing" icon="timeline" href="/studio/timeline">
Trim, split, move, and retime clips on the project timeline.
</Card>
<Card title="Finish and share" icon="circle-check" href="/guides/export-and-share">
Review, validate, render, and deliver the project.
</Card>
</CardGroup>
- [Edit the frame](/studio/canvas)
- [Edit timing on the timeline](/studio/timeline)
- [The Studio app](/studio-app/index)
- [Edit animation and keyframes](/studio/canvas#animate-with-keyframes)
docs/studio/shortcuts.mdx
-97
View File
@@ -1,97 +0,0 @@
---
title: "Keyboard shortcuts"
description: "Use Studio shortcuts for playback, editing, navigation, and project actions."
---
Shortcuts depend on the active area. The table below covers the shortcuts
implemented by the current Studio player, canvas, and timeline.
## Playback
| Shortcut | Action |
| --- | --- |
| Space | Play or pause |
| J / K / L | Play backward, stop, or play forward |
| Left / Right arrow | Step one frame, or nudge a selected canvas element horizontally |
| Up / Down arrow | Nudge a selected canvas element vertically |
| Shift + arrow | Step ten frames horizontally, or nudge a selected element farther |
| M | Mute or unmute |
| Shift + L | Toggle loop playback |
| I / O | Set the work-area in or out point |
| Shift + I / Shift + O | Clear the in or out point |
| A / E | Jump to the in or out point |
| F | Toggle fullscreen |
## Editing
| Shortcut | Action |
| --- | --- |
| V | Selection tool |
| B | Toggle the razor tool |
| S | Split the selected eligible clip at the playhead |
| N | Toggle timeline snapping |
| Command/Ctrl + Z | Undo |
| Command/Ctrl + Shift + Z, or Ctrl + Y | Redo |
| Command/Ctrl + C / V / X | Copy, paste, or cut the selected element |
| Command/Ctrl + G | Group selected elements |
| Command/Ctrl + Shift + G | Ungroup |
| Delete / Backspace | Delete the selected keyframe or element |
The focused area decides what a shared shortcut does. Arrow keys nudge a selected
canvas element, step through frames when nothing nudgeable is selected, or move
between timeline targets when the timeline has focus (see [Timeline
navigation](#timeline-navigation) below). `K` adds or removes a keyframe at the
playhead when a canvas element is selected, starting an animation on a static
element, and otherwise stops playback. `J` always drives playback.
## Timeline navigation
Tab into the timeline before using these commands. Studio keeps one logical timeline target in the Tab order and moves that target without requiring every row or clip to stay mounted.
| Shortcut | Action |
| --- | --- |
| Left / Right arrow | Move to the previous or next target in the focused row |
| Up / Down arrow | Move to the nearest target at the same time in the previous or next logical row |
| Home / End | Move to the start or end of the focused row |
| Command/Ctrl + Home / End | Move to the first or last logical row |
| Page Up / Page Down | Move by one visible page of logical rows |
| Enter / Space | Expand or collapse keyframe property lanes on a focused track row |
| Context Menu or Shift + F10 | Open the focused target's context menu when available |
On an expandable track row, Right arrow expands collapsed keyframe lanes and Left arrow collapses expanded lanes. From a keyframe property row, Left arrow returns to its parent track row. When no disclosure or parent action applies, those arrows continue moving within the row.
If the destination is outside the virtualized viewport, Studio scrolls it into view and restores focus after it mounts.
## Keyframes and recording
| Shortcut | Action |
| --- | --- |
| K | Add or remove a keyframe at the playhead when the current selection supports it |
| R | Start or stop gesture recording |
During gesture recording, drag records position, scroll records depth,
Shift-drag records 3D rotation, Option/Alt-drag records rotation, and
Command/Ctrl-drag or scroll records opacity or scale.
## Canvas and panels
| Shortcut | Action |
| --- | --- |
| G | Toggle the canvas grid |
| Command/Ctrl + 1 | Open Compositions |
| Command/Ctrl + 2 | Open Assets |
| Option/Alt + drag | Move an entire animation path |
| Shift + drag a resize handle | Resize uniformly |
<Warning>
A shortcut should not fire while you are typing into a text or source field. If the wrong area has focus, click the canvas or timeline before using an editing shortcut.
</Warning>
Use the **Shortcuts and tools** button beside the playback controls for the
built-in shortcut list, work-area controls, and jump-to-frame field.
## Related topics
- [Edit the frame](/studio/canvas)
- [Edit timing on the timeline](/studio/timeline)
- [Edit animation and keyframes](/studio/animation)
docs/studio/slideshows.mdx
-64
View File
@@ -1,64 +0,0 @@
---
title: "Build a slideshow"
description: "Shape the main presentation, then add reveals, notes, branches, and hotspots where they help."
---
A slideshow is a live, navigable presentation—not one linear video. The **Slideshow** tab appears when the active composition contains a HyperFrames slideshow manifest.
<Frame caption="The Slideshow panel builds the main route from real scenes before optional branches are added.">
<img
src="https://static.heygen.ai/hyperframes-oss/docs/images/studio-slideshow-panel-v1.jpg"
alt="HyperFrames Studio showing three main-line slides in the Slideshow panel beside the deck timeline"
/>
</Frame>
## Build the main path
Start with the route everyone should see:
1. In **Slides**, check the scenes that belong in the main presentation.
2. Use the arrows to put them in order.
3. Select each slide and confirm that it makes one complete point.
4. In **Slide Inspector**, add speaker notes that help the presenter rather than repeat the slide.
Studio saves slideshow changes into the project’s manifest. Notes save after a short pause; other edits save immediately and participate in project history.
## Add fragment reveals
Move the playhead to the moment when the presentation should pause, then click **Mark** in Slide Inspector. That time becomes a fragment hold-point for the selected slide.
Use fragments when the presenter needs to reveal part of an idea before advancing. A slide does not need a hold-point for every bullet.
## Add an optional path
Branches keep optional detail outside the main story:
1. Open **Branches**, name a branch, and assign its slides.
2. On the slide where the choice appears, select the visible button or object on the canvas.
3. Open **Hotspot Tool**, choose the target branch, add a useful label, and click **Make hotspot**.
4. Keep a clear route back to the main story.
Deleting a branch removes that branch definition and every hotspot that points to it, so Studio asks for confirmation first. The source scenes remain in the project.
## Test it as a presentation
Run the presenter locally:
```bash
npx hyperframes present <project-directory>
```
Test next and previous navigation, every fragment, every hotspot, every branch, and the return path. Click **Present** or press **P** to open the synchronized audience view.
<Note>
A slideshow stays interactive. If the result should simply play from beginning to end as an MP4,
use a [video workflow](/workflows) instead.
</Note>
To create the deck with an agent before refining it here, follow [Create an interactive presentation](/guides/slideshow).
## Related topics
- [Create an interactive presentation](/guides/slideshow)
- [Use variables and templates](/studio/variables)
- [Work with source and an agent](/studio/source)
docs/studio/source.mdx
-121
View File
@@ -1,121 +0,0 @@
---
title: "Work with source and an agent"
sidebarTitle: "Source and agent"
description: "Edit project files, diagnose a failed check, and hand the right context to an AI agent."
---
Studio, your agent, and the CLI work on the same project files. Use **Code** for
a small source change you understand. Use the agent when the change crosses
files, affects project structure, or starts from an unfamiliar failure.
## Choose the smallest safe surface
| Change | Best starting point |
| ---------------------------------------------------------------- | ------------------------------ |
| Visible text, layout, style, media, timing, or supported motion | Canvas, Inspector, or timeline |
| One known value in one known file | Code |
| Story, several scenes, generated animation, or project structure | Agent |
| A reported lint problem with a clear direct fix | Studio or Code |
| An unfamiliar failure or a fix spanning files | Copy to Agent |
The choice is about the change, not a permanent workflow. You can move between
the surfaces without exporting or converting the project.
## Make a focused source edit
1. Open **Code** in the left panel column.
2. Select the exact file in the project tree.
3. Find the value responsible for the visible result.
4. Make one focused change.
5. Wait for the preview to refresh, then play the affected moment.
The Code editor saves user edits automatically and records them in Studio
history. If a save fails, Studio says that the latest edit was not persisted;
fix the preview-server or connection problem before continuing.
<Warning>
Creating, renaming, moving, or deleting a file can break references elsewhere in the project.
Search for the old path or ask the agent to update every reference.
</Warning>
Avoid editing the same file in Studio and another tool at the same time. If an
external change lands first, the Code editor rejects the conflicting save and
tells you that the latest edit was not persisted. Reload the current file,
review the external change, then apply your edit again. The separate queue for
visual canvas edits can pause and show a banner while a conflict is resolved.
## Ask about the selected element
When a visible element needs source work, select it and choose **Ask agent about
this element**. Studio prepares the element and project context, combines it
with your instruction, and copies the prompt to the clipboard. Paste that
prompt into your agent chat.
<Frame caption="Studio prepares a prompt for the selected element; you paste it into your agent chat.">
<img
src="https://static.heygen.ai/hyperframes-oss/docs/images/studio/ask-agent-v1.jpg"
alt="HyperFrames Studio dialog for copying a prompt about the selected element and project context"
/>
</Frame>
```text
Keep the current narration and scene order. Make this product panel readable
at the final video size, and do not change the following scene.
```
The copied context tells the agent where to look. Your sentence tells it what
must remain true.
## Run Studio Lint
Choose **Lint** at the bottom of the left panel column. Studio opens **HyperFrame
Lint Results** with errors, warnings, file locations, and fix hints when they
are available.
Fix a simple, understood issue directly, then run Lint again. Use **Copy to
Agent** when the source location is unfamiliar or the fix may affect other
files. Add what happened before the error and what you expected:
```text
This appeared after I shortened the intro clip. I expected the title animation
to keep its current timing. Fix the issue without changing the rest of the
opening.
```
Do not paste only the error message when the intended result matters. A
technically valid repair can still make the wrong creative change.
## Use the project-level gates before delivery
Studio Lint is a quick in-editor pass. The project-level commands remain the
final gate, especially when the project contains nested compositions:
```bash
npx hyperframes lint
npx hyperframes check
```
`lint` checks the composition structure. `check` adds browser, runtime, layout,
motion, and WCAG contrast verification.
Passing checks do not approve the story or the final encode. Play the project
after a source fix, then watch the rendered file before sharing it.
## When the preview and source disagree
1. Stop editing until the latest save finishes.
2. Keep the first exact error or save warning.
3. Reload the project only after checking whether another tool changed the file.
4. Run the project checks.
5. Ask the agent with the error, project path, action that caused it, and result
you expected.
Use [Studio troubleshooting](/studio/troubleshooting) for editor, preview, and
render-queue failures. Use [Finish and share](/guides/export-and-share) for the
complete approval, validation, render, and delivery path.
## Related topics
- [Recover from a Studio problem](/studio/troubleshooting)
- [Understand a HyperFrames project](/concepts)
- [Finish, render, and share](/guides/export-and-share)
docs/studio/timeline.mdx
+29 -51
View File
@@ -1,53 +1,45 @@
---
title: "Edit timing on the timeline"
description: "Move, trim, split, align, and inspect clips in HyperFrames Studio."
description: "Move, trim, split and align clips in the HyperFrames browser editor, and what each timeline button does."
---
The timeline controls when elements appear and how long they remain.
The timeline sets when each thing appears and how long it stays. Every change saves straight to the project files.
<Frame caption="The selected clip edge changes its duration while the canvas and neighboring tracks remain visible.">
<img
src="https://static.heygen.ai/hyperframes-oss/docs/images/studio/timeline-v1.jpg"
alt="HyperFrames Studio timeline with the edge of a selected clip ready to trim"
alt="HyperFrames browser editor timeline with the edge of a selected clip ready to trim"
/>
</Frame>
## Move a clip
## Move, trim, split
Drag the body of a clip left or right. Its start time changes while its duration stays the same.
- **Move:** drag the middle of a clip. Its length stays the same.
- **Trim:** drag the left edge to change when it starts, the right edge to change when it ends.
- **Split:** put the playhead where you want the cut and choose **Split at playhead**, or press **B** for the Split tool
and click the clip (Shift-click splits every clip at that time). Press **V** to go back to Select.
- **Copy, Duplicate, Delete:** right-click a clip.
Use snapping to align the clip with the playhead, another boundary, or a useful beat.
After any change, play across it: entrances, exits and narration don't rewrite themselves.
## Trim a clip
## The toolbar
Drag the left or right edge.
| Button | What it does |
| --- | --- |
| **Linked Selection** | Clicks and edits reach every clip linked to the one you touch, such as a video and its sound |
| **Snapping** | Edges snap to the playhead, other clips and beats |
| **Ripple edit** | On by default: deleting a clip on the main track closes the gap instead of leaving one |
| **Audio meters** | Shows levels while it plays |
| **Add keyframe at playhead** / **Auto-record** | Keyframes for animation; see [animation](/studio/canvas#animate-with-keyframes) |
| **Add beat at playhead** | A timing marker to cut to, handy with music |
| **Select leftward / rightward** (**[** and **]**, in the tool menu) | Selects every clip that starts before, or after, the playhead, to shift a whole section |
- Trimming the left edge changes when the clip begins.
- Trimming the right edge changes when it ends.
To add media, drop a file on the timeline (**Drop media here**). To work inside a nested scene, expand it or open it
and use the breadcrumb to come back; check whether you're changing its inner timing or its place in the whole video.
Trimming does not automatically rewrite the story. Play the surrounding section to check entrances, exits, media continuity, and narration.
Undo (⌘Z) covers moves, trims and splits.
## Split a clip
Splitting is supported for eligible timeline elements.
You can:
- place the playhead, open the clip menu, and choose **Split at…**;
- switch to the razor tool and click the clip;
- hold Shift while using the razor to split every eligible clip under that time.
Use the **B** shortcut to switch to the razor tool. Return to the selection tool when you finish cutting.
<Note>
A split must happen inside the clip, not exactly on its start or end. Some element types cannot be split safely.
</Note>
## Zoom and navigate
Zoom in for keyframes and short edits. Zoom out to understand the complete sequence.
Use the playhead for the exact edit moment. Use playback and frame stepping to check what happens immediately before and after it.
<Accordion title="Keyboard and screen reader navigation">
Tab into the timeline to reach its current logical focus target. Use Left and Right to move within that row. Use Up and Down to move to the nearest target at the same time in the previous or next row.
@@ -55,30 +47,16 @@ Home and End move to the start or end of the focused row. Hold Command or Ctrl t
On an expandable track row, Right expands collapsed keyframe property lanes and Left collapses expanded lanes. From a keyframe property row, Left returns to its parent track row. Enter or Space toggles the same lanes. Use the Context Menu key or Shift + F10 to open the focused target's menu when it has one.
The timeline keeps only one logical timeline target in the Tab order. Native header controls, such as visibility and keyframe actions, remain separate Tab stops. When the logical target is outside the virtualized viewport, Studio keeps it mounted, scrolls it into view, and then restores focus.
The timeline keeps only one logical timeline target in the Tab order. Native header controls, such as visibility and keyframe actions, remain separate Tab stops. When the logical target is outside the virtualized viewport, the browser editor keeps it mounted, scrolls it into view, and then restores focus.
Screen readers receive the timeline as a treegrid. Track rows announce their level and expanded state. Clips and keyframes announce their names, times, and selection state. Easing controls announce their names and times.
See [Keyboard shortcuts](/studio/shortcuts#timeline-navigation) for the complete command table.
The full list is in [keyboard shortcuts](/studio/index#timeline-navigation).
## Work with beats
Beat markers provide timing landmarks, especially for music-driven work. Snap edits to them when the audio should drive the cut; ignore them when the story or voiceover needs a different rhythm.
## Move several items
Select multiple eligible timeline elements when they need to remain aligned. Drag them together, then check for collisions or gaps on their tracks.
## Open a nested scene
Expand a nested composition to see its children, or open it and use the breadcrumb to return. Be clear whether you are changing the scene’s internal timing or its timing in the parent video.
## Undo mistakes
Move, trim, split, and many other timeline actions participate in Studio history. Undo immediately when a result is unexpected, then retry with a closer zoom or a more precise playhead position.
</Accordion>
## Related topics
- [Edit the frame](/studio/canvas)
- [Edit animation and keyframes](/studio/animation)
- [Use Studio keyboard shortcuts](/studio/shortcuts)
- [Edit animation and keyframes](/studio/canvas#animate-with-keyframes)
- [Keyboard shortcuts](/studio/index#keyboard-shortcuts)
docs/studio/troubleshooting.mdx
+3 -3
View File
@@ -1,5 +1,5 @@
---
title: "Studio troubleshooting"
title: "Browser editor troubleshooting"
description: "Recover from selection, preview, editing, timeline, and export problems."
---
@@ -30,7 +30,7 @@ Undo, zoom in, place the playhead more precisely, and retry. Check whether snapp
from another editor or an agent, confirm that the external file was saved.
- Wait for the project refresh.
- Check the terminal running `hyperframes preview`.
- Reload Studio if the preview process is still healthy.
- Reload the browser editor if the preview process is still healthy.
- Restart `npx hyperframes preview` when the server stopped.
## Media is missing or slow
@@ -54,6 +54,6 @@ For lower-level failures, continue to [general troubleshooting](/guides/troubles
## Related topics
- [Work with source and an agent](/studio/source)
- [Work with source and an agent](/studio/canvas#edit-the-source)
- [Finish, render, and share](/guides/export-and-share)
- [Diagnose a project or CLI problem](/guides/troubleshooting)
docs/studio/variables.mdx
-68
View File
@@ -1,68 +0,0 @@
---
title: "Use variables and templates"
description: "Turn a visible value into a reusable input, preview variants, and hand the template off."
---
Variables let one project produce many versions without rebuilding its layout or animation.
<Frame caption="The current Variables panel previews values beside the real composition.">
<img
src="https://static.heygen.ai/hyperframes-oss/docs/images/studio-variables-panel-v1.jpg"
alt="HyperFrames Studio showing a composition beside the Variables panel with Title, Subtitle, and Background inputs"
/>
</Frame>
## Create one reusable input
The quickest path starts from the canvas:
1. Select the element.
2. Open **Variables** in the right panel.
3. Bind the text, media source, text color, background, or font property.
4. Create a new variable or choose a compatible existing one.
Before binding to an existing variable, Studio shows its saved default, using the font name or image URL for object values.
For a value that is not tied to the selected element, click **Add variable**. Studio supports string, number, color, boolean, enum, font, and image variables. Number variables can include minimum, maximum, and step values; enums can define their allowed options.
Name the input by meaning—`customerName`, `headline`, or `brandColor`—rather than by its position in the design.
## Preview without changing the template
Change a value in the Variables panel to preview that version immediately. The preview is an override: it does not replace the saved default.
The panel tells you whether you are previewing defaults or custom values. Use **Reset** to clear all preview overrides. When a scalar preview should become the new default, use **Set default**.
Use **Edit** to change a variable's label, description, or saved default. For font and image objects, **Default** edits the font name or image URL. Saving keeps the font source, image alt text and fit, and any other stored metadata, including when you change only the label or description.
<Note>
Variables from other compositions are listed separately. You can edit their declarations, but
their values are not live-previewed in the active composition.
</Note>
## Hand the project off
At the bottom of the panel, **Use this template** can copy either:
- the effective values as JSON;
- a ready-to-run `npx hyperframes render ... --variables ...` command.
This keeps the values you just reviewed attached to the render request instead of asking the next person to reconstruct them.
## Test the fallback
A useful template survives realistic variation. Before handing it off, test:
- long and short names or headlines;
- image aspect ratios;
- color contrast;
- number formatting;
- missing optional values.
For the schema, HTML bindings, and batch-render examples, read [Variables](/concepts/variables).
## Related topics
- [Understand the variables contract](/concepts/variables)
- [Use Assets and Catalog](/studio/assets-and-blocks)
- [Render variable-driven versions](/guides/rendering#batch-and-cloud-work)
docs/studio/voiceover-carve.mdx
-124
View File
@@ -1,124 +0,0 @@
---
title: "Make music sit under narration"
sidebarTitle: "Voiceover carve"
description: "Take only the frequencies a voice occupies out of a music bed, so the music keeps its character while speech stays intelligible."
---
Music under narration is the most common audio problem in a video, and the
obvious fix is the wrong one.
Turning the whole music track down works, and it costs the music all of its
presence for as long as anyone is talking — the bed goes limp through the entire
voiceover. But a voice does not need the whole spectrum. It needs the few bands it
actually occupies. A **carve** takes only those out of the music, so the bed keeps
its low end and its top: still music, while the voice stays intelligible.
## When to use it
Whenever a music bed plays under speech. It is not a polish step to reach if
there is time — place both tracks, carve, and listen.
Skip it only when there is no narration for the music to sit under: a music video,
a title card, a montage cut to the track.
## Carve a bed
The carve is a module at the top of the **music** track's rack, not a separate
tool. Select the music clip, open its **Audio FX** section, and the module asks
you to pick the voices this bed should make room for.
A bed with exactly one candidate voice above it is **already carved**, at the
default strength, because that is what a bed under narration wants. Several
candidates leaves the picker waiting rather than guessing which one is the voice.
<Warning>
The carve belongs on the **music**, never on the voice. It names the tracks it
makes room for, the same way a sidechain compressor does — you select the track
that gets quieter and pick what makes it quieter. A voice carved against itself
is a bug, not a subtle mix choice.
</Warning>
## Set the strength
One control does the whole job. It derives how deep to cut, how many bands, how
wide they are, how far the level may drop, and how far under the voice to aim —
because those move together in any real mix.
| Strength | What you get |
| --- | --- |
| Default (0.25) | A 6 dB dip in three bands — audible without sounding like a hole |
| Around 0.5 | The dip reaches 10 dB, where a carve starts being heard as an effect |
| Higher | Deliberate territory for a loud bed under a quiet voice |
| 0 | Spectral only — one band, no level matching at all |
**Switch the carve off** keeps the settings and stops the carve, which is
different from clearing it: a bed with one candidate voice would otherwise be
carved again by default the moment it was re-evaluated.
## What it writes
Ordinary effects. Open the rack after carving and you will find a few `peaking`
filters and a `gain` stage — nothing hidden, nothing proprietary.
Two things follow from that:
- **The envelopes are editable.** The carve always follows the speech, so every
value becomes an automation lane you can adjust by hand afterwards. Silence
leaves the music alone; a loud passage pushes the carve to full depth. There is
no fixed-depth mode, because a fixed dip thins the bed through every pause.
- **Re-carving is safe.** The nodes a carve writes are tagged as its own, so
running it again at a new strength replaces exactly those and leaves every
effect and lane you built by hand where it was.
Inside a carved bed the signal runs through the dips first, then the level match,
then anything you added yourself — which is why a limiter you place stays the last
ceiling.
## Point it at a group, not at clips
If narration arrives as several clips, [group them](/studio/audio-groups) and
carve against the group.
A carve pointed at individual clips has to list every one of them, and it stays
right only until the next edit: add a fourth narration clip and it plays outside
the carve's awareness, so the music silently fails to duck under it. A carve
pointed at a group resolves membership every time the analysis runs, so a clip
added later is covered without touching the carve.
Studio does this for you when you pick a second ungrouped voice — it creates a
group behind them and points the carve at that instead.
## What should happen
- The voice is legible without the bed sounding hollowed out.
- The music comes **back up between phrases** rather than staying flat.
- The bed keeps its bass and its top end. A carve that removed those would just
be a filter.
## Common problems
**The music sounds notched or hollow.** Strength is too high. Come back toward
the default. This is the one failure mode with an obvious sound.
**The voice is still buried.** A carve cannot fix a bed that is simply louder than
the voice — spectral room does not solve a level problem. Compare the two tracks'
actual loudness first. Machine-generated speech commonly arrives far below a
mastered music track, and that gap is arithmetic rather than taste.
**The bed starts out already ducked.** A lane holds its first value backwards to
the start of its clip. A bed that begins before the voice needs an explicit "no
cut" point at its start.
**The music pumps.** The level envelope releases slowly on purpose, because music
that snaps back the instant a word ends sounds like a machine doing it. If it
still pumps, the gaps between phrases are shorter than the release — lower the
strength rather than fighting the envelope.
**Nothing was carved.** The picker leaves itself alone when several tracks could
be the voice. Name the voice explicitly.
## Related topics
- [Mix audio and apply effects](/studio/audio-effects)
- [Group tracks, mute, and solo](/studio/audio-groups)
- [Audio effects implementation](/reference/audio-effects#voiceover-carve)
scripts/check-no-main-deletions.mjs
+37
View File
@@ -810,6 +810,43 @@ export const ALLOWED_DELETIONS = new Map([
"docs/guides/color-grading.mdx",
"color grading is now the 'Fix and grade the color' section of the media effects guide; the old URL 301s there (docs.json)",
],
// Browser editor docs as six pages
[
"docs/studio/animation.mdx",
"the browser editor docs are six pages now; this page's content is a section of one of them, and the old URL 301s there (docs.json)",
],
[
"docs/studio/audio-automation.mdx",
"the browser editor docs are six pages now; this page's content is a section of one of them, and the old URL 301s there (docs.json)",
],
[
"docs/studio/audio-groups.mdx",
"the browser editor docs are six pages now; this page's content is a section of one of them, and the old URL 301s there (docs.json)",
],
[
"docs/studio/captions.mdx",
"the browser editor docs are six pages now; this page's content is a section of one of them, and the old URL 301s there (docs.json)",
],
[
"docs/studio/shortcuts.mdx",
"the browser editor docs are six pages now; this page's content is a section of one of them, and the old URL 301s there (docs.json)",
],
[
"docs/studio/slideshows.mdx",
"the browser editor docs are six pages now; this page's content is a section of one of them, and the old URL 301s there (docs.json)",
],
[
"docs/studio/source.mdx",
"the browser editor docs are six pages now; this page's content is a section of one of them, and the old URL 301s there (docs.json)",
],
[
"docs/studio/variables.mdx",
"the browser editor docs are six pages now; this page's content is a section of one of them, and the old URL 301s there (docs.json)",
],
[
"docs/studio/voiceover-carve.mdx",
"the browser editor docs are six pages now; this page's content is a section of one of them, and the old URL 301s there (docs.json)",
],
[
"docs/public/images/studio-app/export.jpg",
"the Studio app docs show Export as a recorded demo with its own poster; nothing links this still any more",