` 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.
## 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.
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
One variable per edit, absolute targets, freeze what works
Pacing and easing words that retime the *feel* of a scene
- Move, trim, split, and navigate clips
+ Move, trim, split, and navigate clips
The `data-*` timing contract
diff --git a/docs/prompting/media-and-audio.mdx b/docs/prompting/media-and-audio.mdx
index d38c905b50..ab736979df 100644
--- a/docs/prompting/media-and-audio.mdx
+++ b/docs/prompting/media-and-audio.mdx
@@ -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`.
diff --git a/docs/public/images/studio/editor-overview-v2.jpg b/docs/public/images/studio/editor-overview-v2.jpg
new file mode 100644
index 0000000000..0ac455bce1
Binary files /dev/null and b/docs/public/images/studio/editor-overview-v2.jpg differ
diff --git a/docs/reference/audio-effects.mdx b/docs/reference/audio-effects.mdx
index 34f6402c16..aceac68080 100644
--- a/docs/reference/audio-effects.mdx
+++ b/docs/reference/audio-effects.mdx
@@ -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
diff --git a/docs/reference/color-grading.mdx b/docs/reference/color-grading.mdx
index e1819c4fdf..10c722ed70 100644
--- a/docs/reference/color-grading.mdx
+++ b/docs/reference/color-grading.mdx
@@ -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
`), 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 `` authored with just `data-playback-start` renders a trimmed picture over untrimmed audio. Set the name by kind: **`` / `` → `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 ``/``-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 ``), 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 `` authored with just `data-playback-start` renders a trimmed picture over untrimmed audio. Set the name by kind: **`` / `` → `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 ``/``-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 `` 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.
diff --git a/docs/reference/lint-rules.mdx b/docs/reference/lint-rules.mdx
index 4055885250..c838468670 100644
--- a/docs/reference/lint-rules.mdx
+++ b/docs/reference/lint-rules.mdx
@@ -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 ``, 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 `` declares `data-has-audio="true"` but also carries `muted`, so Studio preview silences the audio the declaration promises.
+**Error.** A `` 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.
diff --git a/docs/reference/speed-ramps.mdx b/docs/reference/speed-ramps.mdx
index 3cff09952e..7af9f21251 100644
--- a/docs/reference/speed-ramps.mdx
+++ b/docs/reference/speed-ramps.mdx
@@ -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 `` or `` 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 `` and `` 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`.
diff --git a/docs/sdk/guides/timing-and-animation.mdx b/docs/sdk/guides/timing-and-animation.mdx
index 7b0f61b8d0..675b12a5d4 100644
--- a/docs/sdk/guides/timing-and-animation.mdx
+++ b/docs/sdk/guides/timing-and-animation.mdx
@@ -292,7 +292,7 @@ For lower-level operations — individual keyframe mutations (`addGsapKeyframe`,
Authoring GSAP timelines in composition HTML.
-
+
Keyframe authoring patterns and best practices.
diff --git a/docs/studio/animation.mdx b/docs/studio/animation.mdx
deleted file mode 100644
index df3af55d30..0000000000
--- a/docs/studio/animation.mdx
+++ /dev/null
@@ -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.
-
-
-
-
- Select an element, place the playhead, and add a keyframe.
-
-
+## 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.
+
+
+
+
+
+### 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.
+
+
+
+
+
+### 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.
+
+
+ Variables from other compositions are listed separately. You can edit their declarations, but
+ their values are not live-previewed in the active composition.
+
+
+### 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)
diff --git a/docs/studio/audio-automation.mdx b/docs/studio/audio-automation.mdx
deleted file mode 100644
index 4ce6e98124..0000000000
--- a/docs/studio/audio-automation.mdx
+++ /dev/null
@@ -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)
diff --git a/docs/studio/audio-effects.mdx b/docs/studio/audio-effects.mdx
index a93145cbef..8060dc4ddd 100644
--- a/docs/studio/audio-effects.mdx
+++ b/docs/studio/audio-effects.mdx
@@ -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.
+
+
+ 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.
+
+
+### 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)
diff --git a/docs/studio/audio-groups.mdx b/docs/studio/audio-groups.mdx
deleted file mode 100644
index 6a879e5512..0000000000
--- a/docs/studio/audio-groups.mdx
+++ /dev/null
@@ -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)
diff --git a/docs/studio/canvas.mdx b/docs/studio/canvas.mdx
index 054ac057a5..ee22e33bc6 100644
--- a/docs/studio/canvas.mdx
+++ b/docs/studio/canvas.mdx
@@ -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.
-## 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.
- 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.
-## 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.
+
+
+
+
+ Select an element, place the playhead, and add a keyframe.
+
+
+
+### 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.
+
+
+ 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.
+
+
+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.
+
+
+
+
+
+```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)
diff --git a/docs/studio/captions.mdx b/docs/studio/captions.mdx
deleted file mode 100644
index 6a5ee35a9c..0000000000
--- a/docs/studio/captions.mdx
+++ /dev/null
@@ -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.
-
-
-
-
-
-## 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.
-
-
- 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.
-
-
-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)
diff --git a/docs/studio/export.mdx b/docs/studio/export.mdx
index 162fef8b29..b73da1ed5f 100644
--- a/docs/studio/export.mdx
+++ b/docs/studio/export.mdx
@@ -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.
-## 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:
+
+
+
-- 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
+```
+
+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.
+
+
+ A slideshow stays interactive. If the result should simply play from beginning to end as an MP4,
+ use a [video workflow](/workflows) instead.
+
+
+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)
diff --git a/docs/studio/index.mdx b/docs/studio/index.mdx
index 72ebfffdd2..5ba9c2cced 100644
--- a/docs/studio/index.mdx
+++ b/docs/studio/index.mdx
@@ -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";
-
-
-
-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
-
-
-
- );
-}
-```
-
-| 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.
-
-
-
-
-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.
- 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.
-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.
-
-
-
-
-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.
-
-
+## 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 |
+
+
+ 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.
+
+
+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
-
-
- Select, style, arrange, group, and replace visible elements.
-
-
- Trim, split, move, and retime clips on the project timeline.
-
-
- Review, validate, render, and deliver the project.
-
-
+- [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)
diff --git a/docs/studio/shortcuts.mdx b/docs/studio/shortcuts.mdx
deleted file mode 100644
index 86b48f51d9..0000000000
--- a/docs/studio/shortcuts.mdx
+++ /dev/null
@@ -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 |
-
-
- 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.
-
-
-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)
diff --git a/docs/studio/slideshows.mdx b/docs/studio/slideshows.mdx
deleted file mode 100644
index ed76bf3f78..0000000000
--- a/docs/studio/slideshows.mdx
+++ /dev/null
@@ -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.
-
-
-```
-
-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.
-
-
- A slideshow stays interactive. If the result should simply play from beginning to end as an MP4,
- use a [video workflow](/workflows) instead.
-
-
-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)
diff --git a/docs/studio/source.mdx b/docs/studio/source.mdx
deleted file mode 100644
index 3c031f25d8..0000000000
--- a/docs/studio/source.mdx
+++ /dev/null
@@ -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.
-
-
- 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.
-
-
-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.
-
-
- A split must happen inside the clip, not exactly on its start or end. Some element types cannot be split safely.
-
-
-## 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.
+
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.
+
## 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)
diff --git a/docs/studio/troubleshooting.mdx b/docs/studio/troubleshooting.mdx
index 5715d146c9..cdef78443e 100644
--- a/docs/studio/troubleshooting.mdx
+++ b/docs/studio/troubleshooting.mdx
@@ -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)
diff --git a/docs/studio/variables.mdx b/docs/studio/variables.mdx
deleted file mode 100644
index 5a2ad5f754..0000000000
--- a/docs/studio/variables.mdx
+++ /dev/null
@@ -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.
-
-
- Variables from other compositions are listed separately. You can edit their declarations, but
- their values are not live-previewed in the active composition.
-
-
-## 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)
diff --git a/docs/studio/voiceover-carve.mdx b/docs/studio/voiceover-carve.mdx
deleted file mode 100644
index aa2712aa2b..0000000000
--- a/docs/studio/voiceover-carve.mdx
+++ /dev/null
@@ -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.
-
-
- 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.
-
-
-## 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)
diff --git a/scripts/check-no-main-deletions.mjs b/scripts/check-no-main-deletions.mjs
index 512943d2fa..1ffcc7104b 100644
--- a/scripts/check-no-main-deletions.mjs
+++ b/scripts/check-no-main-deletions.mjs
@@ -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",
