diff --git a/docs/custom.css b/docs/custom.css
index 74049c59b66..baa38450b8c 100644
--- a/docs/custom.css
+++ b/docs/custom.css
@@ -1334,3 +1334,35 @@ header.is-frame ~ #body-content #content-area {
     padding-right: 2.5rem;
   }
 }
+
+/* An image set beside the text it explains (magazine style); full width on narrow screens. */
+.hf-aside {
+  float: right;
+  width: 46%;
+  margin: 0.25rem 0 1rem 1.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid rgb(0 0 0 / 0.08);
+}
+.dark .hf-aside {
+  border-color: rgb(255 255 255 / 0.1);
+}
+@media (max-width: 640px) {
+  .hf-aside {
+    float: none;
+    width: 100%;
+    margin: 0.5rem 0 1rem;
+  }
+}
+
+/* A row of portrait films with a caption under each (explainer styles and similar) */
+.hf-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0 2rem; }
+.hf-shelf p { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.45; }
+@media (max-width: 640px) { .hf-shelf { grid-template-columns: minmax(0, 1fr); } }
+
+/* Short looping clips that show where a control is, floated beside the text that names it */
+.hf-spot { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0.6rem; background: rgb(0 0 0 / 0.06);
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08); margin: 0.25rem 0 1rem 1.25rem; }
+.dark .hf-spot { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1); }
+h2 { clear: both; }
+
+.hf-spot.hf-spot-inline { width: 100%; margin: 0; }
diff --git a/docs/docs.json b/docs/docs.json
index 90b5c44470f..bc9bd9b6829 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -253,23 +253,19 @@
         "icon": "laptop",
         "groups": [
           {
-            "group": "Get started",
+            "group": "Studio app",
             "pages": [
               "studio-app/index",
-              "studio-app/connect-your-agent"
-            ]
-          },
-          {
-            "group": "Make videos",
-            "pages": [
               "studio-app/first-video",
+              "studio-app/existing-project",
+              "studio-app/reference-video",
+              "studio-app/brand-kits",
+              "studio-app/video-clips",
               "studio-app/edit-with-the-agent",
-              "studio-app/export"
-            ]
-          },
-          {
-            "group": "Help",
-            "pages": [
+              "studio-app/workspace",
+              "studio-app/connect-your-agent",
+              "studio-app/export",
+              "studio-app/share",
               "studio-app/troubleshooting"
             ]
           }
diff --git a/docs/public/images/studio-app/export.jpg b/docs/public/images/studio-app/export.jpg
deleted file mode 100644
index a61189aa333..00000000000
Binary files a/docs/public/images/studio-app/export.jpg and /dev/null differ
diff --git a/docs/public/images/studio-app/first-video-demo-v2.jpg b/docs/public/images/studio-app/first-video-demo-v2.jpg
new file mode 100644
index 00000000000..cf0418c7ad0
Binary files /dev/null and b/docs/public/images/studio-app/first-video-demo-v2.jpg differ
diff --git a/docs/public/images/studio-app/home.jpg b/docs/public/images/studio-app/home.jpg
index 66e5fa8d7a4..ebcb4eb84b6 100644
Binary files a/docs/public/images/studio-app/home.jpg and b/docs/public/images/studio-app/home.jpg differ
diff --git a/docs/public/images/studio-app/project.jpg b/docs/public/images/studio-app/project.jpg
deleted file mode 100644
index b7f0ae9e2e8..00000000000
Binary files a/docs/public/images/studio-app/project.jpg and /dev/null differ
diff --git a/docs/public/images/studio-app/reference-demo-v2.jpg b/docs/public/images/studio-app/reference-demo-v2.jpg
new file mode 100644
index 00000000000..114fdb5953b
Binary files /dev/null and b/docs/public/images/studio-app/reference-demo-v2.jpg differ
diff --git a/docs/public/images/studio-app/script-demo-v2.jpg b/docs/public/images/studio-app/script-demo-v2.jpg
new file mode 100644
index 00000000000..0d8b64b5ca6
Binary files /dev/null and b/docs/public/images/studio-app/script-demo-v2.jpg differ
diff --git a/docs/public/images/studio-app/share-demo-v2.jpg b/docs/public/images/studio-app/share-demo-v2.jpg
new file mode 100644
index 00000000000..f90c4ba0d36
Binary files /dev/null and b/docs/public/images/studio-app/share-demo-v2.jpg differ
diff --git a/docs/public/images/studio-app/snow-demo-v2.jpg b/docs/public/images/studio-app/snow-demo-v2.jpg
new file mode 100644
index 00000000000..68a7acf2c0a
Binary files /dev/null and b/docs/public/images/studio-app/snow-demo-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/agent-picker-v2.jpg b/docs/public/images/studio-app/spots/agent-picker-v2.jpg
new file mode 100644
index 00000000000..65ef873e768
Binary files /dev/null and b/docs/public/images/studio-app/spots/agent-picker-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/at-menu-v2.jpg b/docs/public/images/studio-app/spots/at-menu-v2.jpg
new file mode 100644
index 00000000000..d0c13921d54
Binary files /dev/null and b/docs/public/images/studio-app/spots/at-menu-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/brand-kits-nav-v2.jpg b/docs/public/images/studio-app/spots/brand-kits-nav-v2.jpg
new file mode 100644
index 00000000000..8096723e510
Binary files /dev/null and b/docs/public/images/studio-app/spots/brand-kits-nav-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/brandkit-chip-v2.jpg b/docs/public/images/studio-app/spots/brandkit-chip-v2.jpg
new file mode 100644
index 00000000000..41a39f26a85
Binary files /dev/null and b/docs/public/images/studio-app/spots/brandkit-chip-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/captions-panel-tight-v2.jpg b/docs/public/images/studio-app/spots/captions-panel-tight-v2.jpg
new file mode 100644
index 00000000000..112bc89c5cb
Binary files /dev/null and b/docs/public/images/studio-app/spots/captions-panel-tight-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/comment-tool-v2.jpg b/docs/public/images/studio-app/spots/comment-tool-v2.jpg
new file mode 100644
index 00000000000..c093b3b7291
Binary files /dev/null and b/docs/public/images/studio-app/spots/comment-tool-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/go-back-v2.jpg b/docs/public/images/studio-app/spots/go-back-v2.jpg
new file mode 100644
index 00000000000..8ebffa448c1
Binary files /dev/null and b/docs/public/images/studio-app/spots/go-back-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/hash-tools-v2.jpg b/docs/public/images/studio-app/spots/hash-tools-v2.jpg
new file mode 100644
index 00000000000..092e40f3a55
Binary files /dev/null and b/docs/public/images/studio-app/spots/hash-tools-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/import-projects-v2.jpg b/docs/public/images/studio-app/spots/import-projects-v2.jpg
new file mode 100644
index 00000000000..b7f44a6f92c
Binary files /dev/null and b/docs/public/images/studio-app/spots/import-projects-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/inspirations-panel-tight-v2.jpg b/docs/public/images/studio-app/spots/inspirations-panel-tight-v2.jpg
new file mode 100644
index 00000000000..746c2917e89
Binary files /dev/null and b/docs/public/images/studio-app/spots/inspirations-panel-tight-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/inspirations-panel-v2.jpg b/docs/public/images/studio-app/spots/inspirations-panel-v2.jpg
new file mode 100644
index 00000000000..0a53700fe44
Binary files /dev/null and b/docs/public/images/studio-app/spots/inspirations-panel-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/layers-panel-tight-v2.jpg b/docs/public/images/studio-app/spots/layers-panel-tight-v2.jpg
new file mode 100644
index 00000000000..bfa317d7ad4
Binary files /dev/null and b/docs/public/images/studio-app/spots/layers-panel-tight-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/settings-agent-v2.jpg b/docs/public/images/studio-app/spots/settings-agent-v2.jpg
new file mode 100644
index 00000000000..4a557a68c16
Binary files /dev/null and b/docs/public/images/studio-app/spots/settings-agent-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/settings-permissions-v2.jpg b/docs/public/images/studio-app/spots/settings-permissions-v2.jpg
new file mode 100644
index 00000000000..cc939b92485
Binary files /dev/null and b/docs/public/images/studio-app/spots/settings-permissions-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/settings-updates-v2.jpg b/docs/public/images/studio-app/spots/settings-updates-v2.jpg
new file mode 100644
index 00000000000..a154209adee
Binary files /dev/null and b/docs/public/images/studio-app/spots/settings-updates-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/share-button-v2.jpg b/docs/public/images/studio-app/spots/share-button-v2.jpg
new file mode 100644
index 00000000000..4f74795a62a
Binary files /dev/null and b/docs/public/images/studio-app/spots/share-button-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/show-timeline-v2.jpg b/docs/public/images/studio-app/spots/show-timeline-v2.jpg
new file mode 100644
index 00000000000..0bea652568c
Binary files /dev/null and b/docs/public/images/studio-app/spots/show-timeline-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/skills-menu-v2.jpg b/docs/public/images/studio-app/spots/skills-menu-v2.jpg
new file mode 100644
index 00000000000..c474e820883
Binary files /dev/null and b/docs/public/images/studio-app/spots/skills-menu-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/slash-menu-v2.jpg b/docs/public/images/studio-app/spots/slash-menu-v2.jpg
new file mode 100644
index 00000000000..5bc6ce9c80c
Binary files /dev/null and b/docs/public/images/studio-app/spots/slash-menu-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/storyboard-tab-v2.jpg b/docs/public/images/studio-app/spots/storyboard-tab-v2.jpg
new file mode 100644
index 00000000000..8cd40487d24
Binary files /dev/null and b/docs/public/images/studio-app/spots/storyboard-tab-v2.jpg differ
diff --git a/docs/public/images/studio-app/spots/video1-tool-v2.jpg b/docs/public/images/studio-app/spots/video1-tool-v2.jpg
new file mode 100644
index 00000000000..c773aadc096
Binary files /dev/null and b/docs/public/images/studio-app/spots/video1-tool-v2.jpg differ
diff --git a/docs/public/images/studio-app/studio-draw-demo-v2.jpg b/docs/public/images/studio-app/studio-draw-demo-v2.jpg
new file mode 100644
index 00000000000..50fea7cecc6
Binary files /dev/null and b/docs/public/images/studio-app/studio-draw-demo-v2.jpg differ
diff --git a/docs/public/images/studio-app/studio-export-demo-v2.jpg b/docs/public/images/studio-app/studio-export-demo-v2.jpg
new file mode 100644
index 00000000000..09826607f08
Binary files /dev/null and b/docs/public/images/studio-app/studio-export-demo-v2.jpg differ
diff --git a/docs/snippets/docs-video.jsx b/docs/snippets/docs-video.jsx
index 7dacfc3a12f..32a4da0a402 100644
--- a/docs/snippets/docs-video.jsx
+++ b/docs/snippets/docs-video.jsx
@@ -5,6 +5,7 @@ export const DocsVideo = ({
   autoPlay = false,
   loop = false,
   portrait = false,
+  aspect, // e.g. "16 / 10" for app recordings; the frame is 16 / 9 otherwise
 }) => {
   const videoRef = useRef(null);
   const playerRef = useRef(null);
@@ -13,10 +14,30 @@ export const DocsVideo = ({
   const [enhanced, setEnhanced] = useState(false);
   const [playing, setPlaying] = useState(false);
   const [waiting, setWaiting] = useState(false);
-  const [muted, setMuted] = useState(false);
+  // Browsers only autoplay muted video, so an autoplaying player starts muted; the sound button unmutes it.
+  const [muted, setMuted] = useState(autoPlay);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
   const [playbackRate, setPlaybackRate] = useState(1);
+  // Lazy, like ShowcaseWall's: a reduce-motion visitor's first render must not autoplay. The controls still play it.
+  const [reduced, setReduced] = useState(
+    () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+  );
+  useEffect(() => {
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const onChange = (event) => setReduced(event.matches);
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, []);
+  // Turning Reduce Motion on mid-visit must stop an autoplaying loop for real: React props can't pause it or drop
+  // its file. The play button loads it again (togglePlayback).
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!reduced || !autoPlay || !video) return;
+    video.pause();
+    video.removeAttribute("src");
+    video.load();
+  }, [reduced, autoPlay]);
   const [controlsVisible, setControlsVisible] = useState(false);
   const [fullscreen, setFullscreen] = useState(false);
   const [fullscreenSupported, setFullscreenSupported] = useState(false);
@@ -49,6 +70,7 @@ export const DocsVideo = ({
     const video = videoRef.current;
     if (!video) return;
     if (video.paused || video.ended) {
+      if (!video.getAttribute("src")) video.src = src; // dropped when Reduce Motion stopped the loop
       if (video.ended) video.currentTime = 0;
       setWaiting(true);
       try {
@@ -191,6 +213,7 @@ export const DocsVideo = ({
       <div
         ref={playerRef}
         className="hf-docs-video"
+        style={aspect ? { aspectRatio: aspect } : undefined}
         role="region"
         aria-label={title}
         tabIndex={0}
@@ -207,7 +230,8 @@ export const DocsVideo = ({
           aria-label={title}
           src={src}
           poster={poster}
-          autoPlay={autoPlay}
+          autoPlay={autoPlay && !reduced}
+          muted={autoPlay}
           loop={loop}
           playsInline
           preload="metadata"
diff --git a/docs/snippets/hover-video.jsx b/docs/snippets/hover-video.jsx
index 2bef9736b75..41d2800fa51 100644
--- a/docs/snippets/hover-video.jsx
+++ b/docs/snippets/hover-video.jsx
@@ -1,4 +1,4 @@
-export const HoverVideo = ({ src, poster, className, hasAudio = true }) => {
+export const HoverVideo = ({ src, poster, className, label, hasAudio = true }) => {
   const videoRef = useRef(null);
   const wrapRef = useRef(null);
   const [muted, setMuted] = useState(true);
@@ -86,6 +86,7 @@ export const HoverVideo = ({ src, poster, className, hasAudio = true }) => {
     <div ref={wrapRef} className={className} style={{ position: "relative", overflow: "hidden" }}>
       <video
         ref={videoRef}
+        aria-label={label}
         className="absolute inset-0 h-full w-full object-cover"
         src={inView ? src : undefined}
         poster={poster}
diff --git a/docs/studio-app/brand-kits.mdx b/docs/studio-app/brand-kits.mdx
new file mode 100644
index 00000000000..21a75c8e403
--- /dev/null
+++ b/docs/studio-app/brand-kits.mdx
@@ -0,0 +1,72 @@
+---
+title: "Use your brand kit"
+sidebarTitle: "Brand kits"
+description: "Make every video in your brand: build a brand kit from your website or your own files, then use it for a project in the HyperFrames Studio app."
+---
+
+import { HoverVideo } from "/snippets/hover-video.jsx";
+
+A **brand kit** holds your colors, fonts, logos and files. Pick one for a project and the agent builds every video
+in it: your main logo leads titles and end cards, and your colors and text styles set the look.
+
+Brand kits need you to be signed in. If the app says **Sign in to use brand kits.**, sign in first. If it says brand
+kits aren't switched on for your workspace yet, your workspace doesn't have the feature.
+
+## Make a kit
+
+<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/brand-kits-nav-v2.mp4" poster="/public/images/studio-app/spots/brand-kits-nav-v2.jpg" hasAudio={false} label="Brand kits in the sidebar" />
+
+Open **Brand kits** in the sidebar, under **Home**.
+
+<Tabs>
+  <Tab title="From your website">
+    On the **New brand kit** card, type your site, such as `yoursite.com`, and choose **Scan my site**. The app reads
+    your colors, fonts, logos and screenshots from it.
+  </Tab>
+  <Tab title="From your own files">
+    From a project's brand kit menu, choose **New kit from your own files**. You can also drop files into a chat and
+    ask Framey to put them in a kit.
+  </Tab>
+</Tabs>
+
+The agent can make a kit from a site too. It shows one approval card before it changes a kit.
+
+## What a kit holds
+
+| Part | What it does |
+| --- | --- |
+| **Colors** | Each has a role: Main, Secondary, Accent, Text, Background or Neutral |
+| **Logos** | The **Main logo** leads every title and end card. Add a full logo or a symbol |
+| **Text styles and fonts** | The type the video uses, with your font files |
+| **Files** | Screenshots, product images and audio the agent can use |
+| **Rules** | Plain-language rules, plus a brand guide PDF if you have one |
+
+To change a kit, open it and choose **Edit**: add a color, a text style, a logo or a rule, or remove what you don't
+want. Choose **Done** when you finish. The next website scan keeps what you added.
+
+Kit files can be images (PNG, JPEG, WebP, AVIF, GIF, ICO, SVG), audio (MP3, M4A, AAC, OGG, WAV) or fonts (WOFF2, WOFF,
+TTF, OTF).
+
+## Use a kit for a project
+
+<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/brandkit-chip-v2.mp4" poster="/public/images/studio-app/spots/brandkit-chip-v2.jpg" hasAudio={false} label="The brand kit menu in a project" />
+
+Each project keeps its own kit. Open the brand kit menu in the project, **Brand kit for this project**, and pick a kit,
+or **No brand kit** to let Framey choose plain styles. A project that never picked one uses your workspace's default
+kit.
+
+From a kit's page you can also choose **Use this kit**, or start **New project with this kit**.
+
+The agent reads the kit with every message, and the app copies the kit's files into the project's
+`assets/brand-kit` folder, so the video still renders the same anywhere.
+
+## Shared kits
+
+Kits other people share with you appear under **Shared with you**. You can use them but not change them. Only a
+workspace owner or admin can change the workspace's brand settings.
+
+## Related topics
+
+- [Make your first video in the Studio app](/studio-app/first-video)
+- [Edit a video with the agent](/studio-app/edit-with-the-agent)
+- [Brand, templates and storyboards](/prompting/design-systems)
diff --git a/docs/studio-app/connect-your-agent.mdx b/docs/studio-app/connect-your-agent.mdx
index 06a9fb78212..ed8c8844d95 100644
--- a/docs/studio-app/connect-your-agent.mdx
+++ b/docs/studio-app/connect-your-agent.mdx
@@ -1,72 +1,74 @@
 ---
 title: "Connect your agent"
-description: "Set up Claude Code or Codex once so the HyperFrames Studio app can build and change your videos."
+description: "Pick the agent the HyperFrames Studio app works with: Claude Code, Codex, Grok, Antigravity, GitHub Copilot, or OpenCode for free. The app installs it for you."
 ---
 
-The app makes your videos with an agent that runs on your computer: **Claude Code** or **Codex**. You set one up
-once. After that, every request you send goes to it.
+import { HoverVideo } from "/snippets/hover-video.jsx";
 
-| Agent | You need |
-| --- | --- |
-| Claude Code | A Claude account or an Anthropic Console account. The app installs it for you. |
-| Codex | A ChatGPT account. You install it and sign in with two commands. |
+The app makes your videos with an agent that runs on your computer. The first time you send a request without one,
+the **Connect an agent** sheet opens: choose an agent and the app installs it for you, then helps you sign in.
+
+| Agent | Sign-in | Cost |
+| --- | --- | --- |
+| Claude Code | Your browser opens Claude's sign-in: a Claude account or an Anthropic Console account. | Billed by Anthropic |
+| Codex | Your browser opens Codex's sign-in: your ChatGPT account. | Billed by OpenAI |
+| Grok | Grok gives you a code to confirm in your browser. | Billed by xAI |
+| Antigravity | Signs in from Terminal: the sheet gives you the command. | Billed by Google |
+| GitHub Copilot | Signs in from Terminal: the sheet gives you the command. | Billed by GitHub |
+| OpenCode | None: it runs free models. Sign in to a provider from Terminal to add its models. | Free |
 
 Runs bill to the plan of the account your agent is signed in with. To use an API key instead, change **Bill runs
 to** in **Settings** > **Permissions**.
 
-If both are ready and you have not picked one, the app uses Claude Code.
-
-## Claude Code
+## Set one up
 
-The first time you send a request without an agent, the **Connect Claude Code** screen opens with three steps.
+<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/settings-permissions-v2.mp4" poster="/public/images/studio-app/spots/settings-permissions-v2.jpg" hasAudio={false} label="Settings, Permissions: every agent and its state" />
 
 <Steps>
-  <Step title="Install Claude Code">
-    Choose **Install Claude Code**, then **Install** in the dialog. The app runs Anthropic's official installer,
-    which puts Claude Code in your home folder. It takes about a minute.
+  <Step title="Choose an agent">
+    In **Connect an agent**, choose **Install** next to the agent you want, or **Use** next to one already on your
+    computer. The app asks **Install … from …?** and runs that company's official installer. It takes about a minute.
   </Step>
   <Step title="Sign in">
-    Choose **Sign in to Claude**. Your browser opens Claude's sign-in. Use your Claude account or an Anthropic Console
-    account, then come back to the app.
+    Choose **Sign in to Claude Code** (or your agent's name) and finish in your browser, or follow the sheet's
+    Terminal step for Antigravity, GitHub Copilot and OpenCode.
   </Step>
-  <Step title="Check that it answers">
-    The app checks that Claude Code runs. When it shows **Claude Code is connected**, it sends the request you
-    started with.
+  <Step title="Send">
+    When the agent answers, the app sends the request you started with.
   </Step>
 </Steps>
 
-If a step fails, the app shows a command you can run yourself. Choose **Copy command**, then **Open Terminal**, and
-paste it:
+If a step fails, the sheet shows the command to run yourself: choose **Copy**, then **Open Terminal**, and paste it.
 
-```bash
-# Install Claude Code
-curl -fsSL https://claude.ai/install.sh | bash
+| Agent | Install command | Sign in |
+| --- | --- | --- |
+| Claude Code | `curl -fsSL https://claude.ai/install.sh \| bash` | `claude auth login` |
+| Codex | `curl -fsSL https://chatgpt.com/codex/install.sh \| sh` | `codex login` |
+| Grok | `curl -fsSL https://x.ai/cli/install.sh \| bash` | `grok login` |
+| Antigravity | `curl -fsSL https://antigravity.google/cli/install.sh \| bash` | run `agy` once |
+| GitHub Copilot | `curl -fsSL https://gh.io/copilot-install \| bash` | `copilot login` |
+| OpenCode | `curl -fsSL https://opencode.ai/v2/install \| bash` | optional: `opencode providers login` |
 
-# Sign in
-claude auth login
-```
+## Access: Auto or Full access
 
-## Codex
+<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/settings-agent-v2.mp4" poster="/public/images/studio-app/spots/settings-agent-v2.jpg" hasAudio={false} label="Settings, Agent: Auto or Full access" />
 
-The app does not install Codex for you. Open **Settings** > **Agent** or the agent picker in the chat header, find
-Codex, and use its buttons:
+**Auto**, the default, lets your agent work in your project and use the internet, and blocks risky steps. **Full
+access** lets it install and run anything, with no checks. Change it in **Settings** > **Agent**.
 
-1. **Copy install command**, then paste it into a terminal:
-   ```bash
-   curl -fsSL https://chatgpt.com/codex/install.sh | sh
-   ```
-2. **Copy sign-in command** (`codex`), run it in a terminal, and sign in with your ChatGPT account.
-3. Back in the app, choose **Check again**. Codex shows **Ready**.
+GitHub Copilot and OpenCode only run with **Full access**: the first time you send to one, the app asks to **Turn on**
+Full access.
 
 ## Switch agents
 
-Use the agent picker in the chat header, or **Settings** > **Agent**, and choose **Use** next to the agent you want.
-The choice applies to your next request.
+<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/agent-picker-v2.mp4" poster="/public/images/studio-app/spots/agent-picker-v2.jpg" hasAudio={false} label="The agent picker in the chat header" />
 
-Each agent row shows its state: **Ready**, **Not signed in**, **Not installed**, or **Installed, but won't start**,
-with the button that fixes it.
+Open the agent picker in the chat header and choose a ready agent; it's used from your next request. To set the
+agent, model and effort for every new request, use **Settings** > **Agent**. **Settings** > **Permissions** lists
+every agent with its state (**Ready**, **Not signed in**, **Not installed**, **Needs an update**) and the button that
+fixes it.
 
 ## Related topics
 
 - [Make your first video](/studio-app/first-video)
-- [Updates and troubleshooting](/studio-app/troubleshooting)
+- [Troubleshooting](/studio-app/troubleshooting)
diff --git a/docs/studio-app/edit-with-the-agent.mdx b/docs/studio-app/edit-with-the-agent.mdx
index 55841e6b3aa..b0a1d87d46b 100644
--- a/docs/studio-app/edit-with-the-agent.mdx
+++ b/docs/studio-app/edit-with-the-agent.mdx
@@ -1,29 +1,40 @@
 ---
-title: "Change your video with the agent"
+title: "Edit a video with the agent"
 description: "Type a change, point at the picture, draw, or comment, then send several edits to the agent at once."
+sidebarTitle: "Edit with the agent"
 ---
 
+import { HoverVideo } from "/snippets/hover-video.jsx";
+
+import { DocsVideo } from "/snippets/docs-video.jsx";
+
 Every change starts the same way: show the agent where, say what, and send. You can type, point at something in
 the picture, draw over it, or leave a comment at a moment in the video.
 
-<Frame caption="A project: the chat on the left, the picture with its tools in the middle, and the timeline below.">
-  <img
-    src="/public/images/studio-app/project.jpg"
-    alt="The Spring Launch project open in the HyperFrames Studio app with the chat, the picture, and the timeline"
-  />
-</Frame>
+<DocsVideo
+  title="Circle the bag, say what to change, send"
+  src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/studio-draw-demo-v2.mp4"
+  poster="/public/images/studio-app/studio-draw-demo-v2.jpg"
+  aspect="16 / 10"
+  autoPlay
+  loop
+/>
+
+*Draw a circle, type the change, send. The agent's work is cut short here: this edit took 1 minute 52 seconds.*
 
 ## Type a change
 
-Type in the chat box, which says **Describe a change**, and press Enter. Type `@` to add moments, media, files, or
-other projects to your message.
+Type in the chat box at the bottom of the chat (it names your agent, for example **Text to Claude Code**) and press Enter. Type `@` to add moments, media, files, or
+other projects to your message, and `#` for tools such as **Storyboard** ([every menu and panel](/studio-app/workspace)).
 
-While the agent is working, Enter queues your message to run next. To change that, open **Settings** > **Agent**
-and switch **While Framey works, Send** from **Queue** to **Steer**, which stops the run and starts again with your
-words. Picks and files always queue.
+While the agent is working, Enter steers the run: it stops and starts again with your words. Ctrl+Enter does the
+other thing and queues your message to run next. To swap them, change **While Framey works, Send** in **Settings** >
+**Agent**. Picks and files always queue.
 
 ## Point, draw, or comment on the picture
 
+<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/comment-tool-v2.mp4" poster="/public/images/studio-app/spots/comment-tool-v2.jpg" hasAudio={false} label="Where Comment is, under the preview" />
+
 The tools under the picture, on the left:
 
 | Tool | What it does |
@@ -32,8 +43,8 @@ The tools under the picture, on the left:
 | **Draw** (D) | Circle or mark a spot and say what should change. Several strokes become one drawing. |
 | **Comment** (C) | Pin a comment to a spot and moment: **What should change here?** |
 
-The picture opens with **Draw**. Press Escape to go back to **Select**. Right-click an element for quick actions
-such as **Ask Framey**, **Hide**, **Bring to front**, **Replace with**, and **Delete**.
+The picture opens with **Select**. Press Escape to go back to it from another tool. Right-click an element for quick actions
+such as **Ask Framey**, **Hide**, **Bring to front**, **Replace with**, **Cut out object here** (on footage) and **Delete**.
 
 You can also draw across the timeline to talk about a stretch of the video, such as "tighten this part".
 
@@ -41,29 +52,35 @@ You can also draw across the timeline to talk about a stretch of the video, such
 
 Picks, drawings, and comments do not run on their own. Each one becomes a row in **Pending video edits**, up to 10.
 Check them, add a note for all of them, then send them as one request with the send button, for example
-**Send 3 edits to Claude Code**. Choose **Edit note** to change a row's words, or **Delete** to drop it.
+**Send 3 edits to Claude Code** (or **Queue 3 edits** while a run is working). Choose **Edit note** to change a row's words, or **Delete** to drop it.
 
 ## Change the timeline yourself
 
-Some changes are faster by hand. Hover a clip on the timeline to **Split** it at the playhead, **Delete** it, or
-open **Quick edit** to change a video or audio clip's **Speed**, **Volume**, and **Fade**. Drag clips to move or trim
+<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/show-timeline-v2.mp4" poster="/public/images/studio-app/spots/show-timeline-v2.jpg" hasAudio={false} label="Show timeline opens the timeline under the preview" />
+
+Some changes are faster by hand. Show the timeline with the button under the preview. Hover a clip to **Split** it at the playhead, **Delete** it,
+open **Quick edit** to change a video or audio clip's **Speed**, **Volume**, and **Fade**, or ask the agent about it,
+remove its background or add a transition. Drag clips to move or trim
 them.
 
-Right-click an empty gap for **Close gap**, or to ask what should fill it. The app suggests ideas that fit what
-plays around the gap.
+Right-click an empty gap for **Close gap** or **Close all gaps**.
 
 ## Get inspired
 
-**Get inspired** is a library of short example moments from real videos: **Motion graphics**, **A-roll Cuts**,
-and **Mobile Ads**. Find it on Home, in a new project's empty chat, and in the **Inspirations** tab beside your files.
-Choose **Add** or **Use** to put a moment in your message as a reference, then say how to use it and send.
+<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/inspirations-panel-v2.mp4" poster="/public/images/studio-app/spots/inspirations-panel-v2.jpg" hasAudio={false} label="The Inspirations panel on the right" />
+
+Home's **Remix from inspiration** feed and a project's **Inspirations** tab hold short example moments from real
+videos (**Motion graphics**, **A-roll Cuts**, **Mobile Ads**). Choose **Add as inspiration** on Home, or **Use** in the
+tab, to put a moment in your message as a reference, then say how to use it and send.
 
 ## Undo
 
-Press Cmd+Z to undo and Cmd+Shift+Z to redo (Ctrl+Z and Ctrl+Shift+Z on Linux). Each agent run in the chat also has its own **Undo** button.
+<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/go-back-v2.mp4" poster="/public/images/studio-app/spots/go-back-v2.jpg" hasAudio={false} label="Go back to before this, under each finished run" />
+
+Press Cmd+Z to undo and Cmd+Shift+Z to redo (Ctrl+Z and Ctrl+Shift+Z, or Ctrl+Y, on Windows and Linux). Each agent run in the chat also has its own **Undo** button.
 
 ## Related topics
 
-- [Export and share](/studio-app/export)
+- [Export a video](/studio-app/export)
 - [Make your first video](/studio-app/first-video)
-- [Updates and troubleshooting](/studio-app/troubleshooting)
+- [Troubleshooting](/studio-app/troubleshooting)
diff --git a/docs/studio-app/existing-project.mdx b/docs/studio-app/existing-project.mdx
new file mode 100644
index 00000000000..fcbdbceb4f2
--- /dev/null
+++ b/docs/studio-app/existing-project.mdx
@@ -0,0 +1,62 @@
+---
+title: "Continue a Claude Code or Codex project in Studio"
+sidebarTitle: "Continue from Claude Code"
+description: "Open a HyperFrames project you started with Claude Code, Codex or another agent in the Studio app, keep its conversation (on Mac), and hand it back to your agent when you're done."
+---
+
+import { HoverVideo } from "/snippets/hover-video.jsx";
+
+Started a video in Claude Code, Codex or another agent? Open the same folder in the Studio app and keep going there:
+the preview sits beside the chat, and you can point, draw and comment on the picture. Nothing is copied or moved,
+so your agent and the app work on the same files.
+
+## From your agent: one command (Mac)
+
+Inside a Claude Code, Codex or Grok session, in the project folder, run (or ask your agent to run it):
+
+```bash
+npx hyperframes open
+```
+
+```text
+◇  Opening Spring Launch in the HyperFrames desktop app
+   Its chat picks up this Claude Code conversation.
+   When the person is back here, run npx hyperframes catch-up to see what they did in the app.
+```
+
+The app opens the project, and because the command ran inside your agent's session, its chat carries on that
+conversation, so you don't explain the video again. Run it from a plain terminal instead and the app still opens the
+project, with a fresh chat.
+
+This hand-off works on Mac today. On Windows and Linux, and wherever the app isn't installed yet, the command prints
+the download link instead.
+
+## From the app: Import projects
+
+<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/import-projects-v2.mp4" poster="/public/images/studio-app/spots/import-projects-v2.jpg" hasAudio={false} label="The sidebar's Import projects opens a list of the projects on this Mac" />
+
+The app looks for HyperFrames projects on your Mac. The ones it hasn't opened yet are under **Import projects** in the
+sidebar, with their count. Choose **Import** on one, or **Import all**.
+
+Importing adds a project to HyperFrames without moving it: it stays in its folder, and your changes are saved there.
+
+The first time, macOS asks before the app looks in Documents, Downloads and Desktop. Have one somewhere else? Choose
+**File** > **Open Folder…** (<kbd>⌘</kbd> <kbd>O</kbd>), or drop the folder on the sidebar.
+
+## Back to your agent: catch up
+
+When you go back to your terminal, ask your agent to catch up, or run:
+
+```bash
+npx hyperframes catch-up
+```
+
+It lists what happened in the app since the hand-off: what you asked, what Framey did, and which files changed.
+Your agent reads it and carries on from there. Catch-up works after `npx hyperframes open` ran inside your agent's
+session; for a project opened from a plain terminal or imported in the app, there's no hand-off to catch up on.
+
+## Related topics
+
+- [Connect your agent](/studio-app/connect-your-agent)
+- [The project screen](/studio-app/workspace)
+- [Install HyperFrames in your agent](/guides/plugins)
diff --git a/docs/studio-app/export.mdx b/docs/studio-app/export.mdx
index 686a535ce9b..bc73ac4ec64 100644
--- a/docs/studio-app/export.mdx
+++ b/docs/studio-app/export.mdx
@@ -1,16 +1,41 @@
 ---
-title: "Export your video"
+title: "Export a video"
 description: "Render a finished video file from the HyperFrames Studio app and find it in your Downloads folder."
+sidebarTitle: "Export"
 ---
 
+import { DocsVideo } from "/snippets/docs-video.jsx";
+
 When the video is ready, choose **Export** in the project's top bar. The **Export** panel opens beside the picture.
 
-<Frame caption="The Export panel with quality, format, and frame rate.">
-  <img
-    src="/public/images/studio-app/export.jpg"
-    alt="The Export panel in the HyperFrames Studio app with Quality, Format and Frame rate choices and a Render 1080p MP4 button"
-  />
-</Frame>
+<DocsVideo
+  title="Exporting a 1080p MP4 from the Studio app"
+  src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/studio-export-demo-v2.mp4"
+  poster="/public/images/studio-app/studio-export-demo-v2.jpg"
+  aspect="16 / 10"
+  autoPlay
+  loop
+/>
+
+*Export, Change, 1080p, Render. The wait plays at 2×: this 12-second video took about 16 seconds on a MacBook.*
+
+## This Mac or the cloud
+
+Exports render on **This Mac** unless you pick the cloud. Under the render button, **Render in the cloud** opens
+**Cloud rendering**, which compares the two and lets you **Add API key**. Once a key is saved, **Render on** in Export
+picks **This Mac** or **Cloud**.
+
+| | This Mac | Cloud |
+| --- | --- | --- |
+| Cost | Free | Paid per minute of video from your HeyGen API balance. Export shows the price before you start; 4K costs about twice as much as 1080p. |
+| Your computer | Busy until it finishes | Free. Keep working while it renders. |
+| Your files | Stay on your computer | The project is uploaded to HeyGen to render |
+| Limits | Any shape and length | 16:9, 9:16 or 1:1, at 24, 25, 30 or 60 fps, project up to 200 MB |
+
+The key can also go in **Settings** > **HeyGen API key**. If the project is over 200 MB,
+choose **Ask Framey to do it** under **Make it fit the cloud**: Framey moves your big videos and images to your
+HeyGen assets. Either way, the video lands in your Downloads folder. A cloud render that has started can't be
+stopped: **Cancel** stops waiting, but the cloud may still finish it and charge your balance.
 
 ## Choose the file
 
@@ -18,15 +43,15 @@ When the video is ready, choose **Export** in the project's top bar. The **Expor
 | --- | --- | --- |
 | **Quality** | **1080p** or **Project size**, plus **4K** when the project fits it | 1080p |
 | **Format** | **MP4**, **WebM**, **MOV** | MP4 |
-| **Frame rate** | 24, 30, 60 | 30 |
+| **Frame rate** | 24, 25, 30, 50, 60, or **Custom…** | 30 |
 
 MP4 is the right choice for sharing and uploading. Pick another format only when the place you are sending it asks
 for one.
 
 ## Render
 
-Choose the render button, for example **Render 1080p MP4**. The panel shows **Getting ready**, then **Rendering**
-with the frames done so far, then **Finishing the file**. You can close the panel and keep working; the render
+Choose the render button, for example **Render 1080p MP4**. The panel shows **Preparing**, **Drawing frames**,
+**Encoding the video**, **Assembling** and **Saving to Downloads**. You can close the panel and keep working; the render
 continues. Choose **Cancel** to stop it.
 
 **Export** is unavailable while the agent is building the project. Wait for the run to finish.
@@ -37,7 +62,7 @@ The video is saved to your **Downloads** folder, named after the project with th
 `Spring Launch 2026-05-04 10.30.mp4`. When it is done, the panel shows **Export ready** with the file size:
 
 - **Open video** plays it.
-- **Show in Finder** (**Show in folder** on Linux) opens the folder.
+- **Show in Finder** (**Show in File Explorer** on Windows, **Show in folder** on Linux) opens the folder.
 
 Watch the exported file once from start to end before you send it.
 
@@ -52,5 +77,5 @@ Watch the exported file once from start to end before you send it.
 
 ## Related topics
 
-- [Change your video with the agent](/studio-app/edit-with-the-agent)
-- [Updates and troubleshooting](/studio-app/troubleshooting)
+- [Edit a video with the agent](/studio-app/edit-with-the-agent)
+- [Troubleshooting](/studio-app/troubleshooting)
diff --git a/docs/studio-app/first-video.mdx b/docs/studio-app/first-video.mdx
index 55892c80e8b..79d27318298 100644
--- a/docs/studio-app/first-video.mdx
+++ b/docs/studio-app/first-video.mdx
@@ -1,10 +1,58 @@
 ---
-title: "Make your first video"
-description: "Pick four parts, add your website or idea, and let the agent build your first video in the HyperFrames Studio app."
+title: "Make your first video in the Studio app"
+sidebarTitle: "First video"
+description: "Describe a video in one sentence, answer the agent's questions, approve a storyboard, and get your first video in the HyperFrames Studio app."
 ---
 
-The **Create your first video** card on Home builds a launch video from four parts, each taken from a real launch
-video. You pick the parts, add your website or an idea, and the agent builds one video from them.
+import { HoverVideo } from "/snippets/hover-video.jsx";
+
+import { DocsVideo } from "/snippets/docs-video.jsx";
+
+Type one sentence on Home and choose **Let's go**. The agent may ask a question or two, shows you the video as stills,
+and builds it when you approve.
+
+<DocsVideo
+  title="A first video in the Studio app: one sentence, two questions, a storyboard, the finished film"
+  src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/first-video-demo-v2.mp4"
+  poster="/public/images/studio-app/first-video-demo-v2.jpg"
+  aspect="16 / 10"
+  autoPlay
+  loop
+/>
+
+*Recorded with Claude Code as the agent. The waits play fast: the storyboard took 29 minutes and the
+build 10.*
+
+## What happens
+
+<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/storyboard-tab-v2.mp4" poster="/public/images/studio-app/spots/storyboard-tab-v2.jpg" hasAudio={false} label="The Storyboard tab above the preview" />
+
+<Steps>
+  <Step title="Say what you want">
+    In **Make something**, describe the video ("A 12-second launch teaser for Lumen, a running shoe that glows at
+    night"). Add files with **+**, or start from a video you like in **Reference**.
+  </Step>
+  <Step title="Answer its questions">
+    When something matters and you didn't say it, the agent asks with a card: which of three concepts, how the
+    product should look, or whether to use your own image. Pick one (the agent marks the one it recommends), or choose
+    **Something else…** and type, then **Send answer**.
+  </Step>
+  <Step title="Approve the storyboard">
+    With **Start with a storyboard** on (the default), you see every shot as a still with its timing in the
+    **Storyboard** tab. Tell it which frame to change, or choose **Build the video**.
+  </Step>
+  <Step title="Watch, then change it">
+    The finished video plays in **Preview**. Change anything by saying it, pointing at it or drawing on it:
+    [edit a video with the agent](/studio-app/edit-with-the-agent).
+  </Step>
+</Steps>
+
+If you aren't signed in or have no agent yet, the app walks you through that first and then sends your request.
+
+## Or take the step by step
+
+**Take the step by step**, next to **Remix from inspiration** on Home, builds a launch video from four parts taken
+from real launch videos. It also opens by itself the very first time.
 
 <Frame caption="The first-video card: four parts, then your website or idea.">
   <img
@@ -20,37 +68,11 @@ video. You pick the parts, add your website or an idea, and the agent builds one
 | **Turn** | Flip from problem to answer |
 | **Call to action** | Land the brand and the ask |
 
-## Build it
-
-<Steps>
-  <Step title="Pick the four parts">
-    The card starts with one clip in each part. Use the shuffle button beside them for a new set, or hover a part to
-    shuffle it or browse the others.
-  </Step>
-  <Step title="Add your website or idea">
-    Type your website, such as `yourcompany.com`, or describe your idea. A website gives the agent your fonts, colors
-    and logo.
-  </Step>
-  <Step title="Choose Use this cut">
-    The request goes straight to the agent. If you are not signed in or have no agent yet, the app walks you through
-    that first, then sends it.
-  </Step>
-</Steps>
-
-## What should happen
-
-The app creates a project for your video and the agent starts building it. On your first video, a short tour
-replays how a launch video was made while yours builds, then Framey takes you to your project. In the project, the
-chat shows what the agent is doing, such as **Reading files** or **Editing files**.
-
-When the agent finishes, the video is ready to play, change, and export.
-
-## Start from your own words instead
-
-You do not need the card. Choose **Back to home**, type what you want in the prompt box, and press Enter. Type `@` to add files, other
-projects, or media. To open the card again later, choose **Take the step by step** next to **Get inspired**.
+Shuffle the parts until you like them, type your website (it gives the agent your fonts, colors and logo) or an idea,
+and choose **Use this cut**.
 
 ## Related topics
 
-- [Change your video with the agent](/studio-app/edit-with-the-agent)
+- [Edit a video with the agent](/studio-app/edit-with-the-agent)
+- [Use your brand kit](/studio-app/brand-kits)
 - [Connect your agent](/studio-app/connect-your-agent)
diff --git a/docs/studio-app/index.mdx b/docs/studio-app/index.mdx
index 39a4940ef7a..267f27ac751 100644
--- a/docs/studio-app/index.mdx
+++ b/docs/studio-app/index.mdx
@@ -1,18 +1,26 @@
 ---
-title: "Get the HyperFrames Studio app"
-sidebarTitle: "Get the app"
+title: "Install the Studio app"
+sidebarTitle: "Install"
 description: "Download the HyperFrames Studio app for Mac or Linux, open it for the first time, and sign in with your HeyGen account."
 ---
 
+import { HoverVideo } from "/snippets/hover-video.jsx";
+
 The HyperFrames Studio app for Mac and Linux is the easiest way to make a video with HyperFrames. You describe the video, an
 agent on your computer builds it, and you change it by typing, pointing at the picture, drawing, or commenting.
 You do not need to write code. Framey, the small
 green guide, points you to the next step along the way.
 
-<Frame caption="Home: the prompt box, your projects on the left, and Get inspired below.">
+- **Free.** You sign in with a free HeyGen account. HeyGen media (avatars, generated clips, HeyGen voices) uses
+  HeyGen credits only when you ask for it, and your own agent bills its own plan, or nothing with OpenCode.
+- **Mac:** Apple Silicon or Intel. **Linux:** 64-bit Intel and AMD, as a .deb or an AppImage.
+- **Windows:** coming soon. Until then, make videos with [your AI agent](/quickstart#with-your-agent) or in
+  [Claude.ai or ChatGPT](/guides/mcp).
+
+<Frame caption="Home: the Make something box with its Make, Reference and Script tabs, and Remix from inspiration beside it.">
   <img
     src="/public/images/studio-app/home.jpg"
-    alt="The HyperFrames Studio app's Home screen with the Make something prompt box and one project named Spring Launch"
+    alt="The HyperFrames Studio app's Home screen: the Make something box and the Remix from inspiration feed"
   />
 </Frame>
 
@@ -22,7 +30,7 @@ green guide, points you to the next step along the way.
   <Tab title="Mac">
     <Steps>
       <Step title="Download">
-        Go to [hyperframes.dev/studio](https://hyperframes.dev/studio) and choose **Download for macOS**.
+        Go to [hyperframes.dev/studio](https://hyperframes.dev/studio) and choose **Download for macOS** (in Safari or Firefox the button is **Apple Silicon**, with an **Intel** link next to it).
       </Step>
       <Step title="Install">
         Open the downloaded disk image and double-click **Install HyperFrames**. The installer copies the app into
@@ -68,7 +76,7 @@ green guide, points you to the next step along the way.
 ## First launch
 
 1. A short survey asks what you want to make and which agent you use. Every answer is optional, and **Skip all**
-   counts as an answer. What you make decides where **Get inspired** opens. The agent you name starts your first
+   counts as an answer. What you pick decides where **Build your video** opens. The agent you name starts your first
    chat if it is already set up.
 2. Home opens with the **Create your first video** card. See
    [Make your first video](/studio-app/first-video).
@@ -80,15 +88,32 @@ A notice also explains what usage data the app records. Choose **Got it** to dis
 On first launch, the app asks you to sign in the first time you click something after the survey.
 
 1. Choose **Continue with HeyGen**. Your browser opens hyperframes.dev.
-2. Sign in there within two minutes. The browser sends you back to the app, which shows **You're in!** and carries
+2. Sign in there within 10 minutes. The browser sends you back to the app, which shows **You're in!** and carries
    on with what you clicked.
 
 If the sign-in runs out of time, choose **Continue with HeyGen** again. If you choose **Not now**, the app asks
 again on your next click.
 You can sign in or out at any time from **Settings** > **Account**.
 
+## Updates
+
+<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/settings-updates-v2.mp4" poster="/public/images/studio-app/spots/settings-updates-v2.jpg" hasAudio={false} label="Settings, Updates: Check for updates" />
+
+The app updates itself. When a new version is ready, a round button appears in the bottom-right corner; click it and
+the app restarts as soon as nothing is running, reopening the project you had open. To check by hand, use
+**Settings** > **Updates** > **Check for updates**. If an update stalls, click the button again and choose **Try
+again**, or **Download it instead**.
+
+## Where your work is kept
+
+- **Projects**: the hidden `.hyperframes-studio` folder in your home folder, or the folder you imported them from.
+  Each one is a normal HyperFrames project, so it also opens in the [browser editor](/studio/index) and the
+  [command line](/developers/cli).
+- **Exported videos**: your Downloads folder.
+- **Settings and sign-in**: `~/Library/Application Support/HyperFrames` on a Mac, `~/.config/HyperFrames` on Linux.
+
 ## Related topics
 
 - [Connect your agent](/studio-app/connect-your-agent)
 - [Make your first video](/studio-app/first-video)
-- [Updates and troubleshooting](/studio-app/troubleshooting)
+- [Troubleshooting](/studio-app/troubleshooting)
diff --git a/docs/studio-app/reference-video.mdx b/docs/studio-app/reference-video.mdx
new file mode 100644
index 00000000000..8c64275bbcc
--- /dev/null
+++ b/docs/studio-app/reference-video.mdx
@@ -0,0 +1,89 @@
+---
+title: "Reference any video to recreate its style"
+sidebarTitle: "Reference a video"
+description: "Give the Studio app a video you like, from a link, a file or the inspiration feed. It copies the cuts, captions and effects, and you swap in your own people, words and brand."
+---
+
+import { DocsVideo } from "/snippets/docs-video.jsx";
+
+Found a video whose editing you love? Give it to the Studio app. Your video gets its cuts, captions and effects, with
+your own people, words and brand in it. Showing a video once is faster than describing it, and a video you only half
+like is still a better start than a blank page.
+
+<DocsVideo
+  title="Reference any video: copy its editing style, choose who's on camera, say what it's about"
+  src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/reference-demo-v2.mp4"
+  poster="/public/images/studio-app/reference-demo-v2.jpg"
+  aspect="16 / 10"
+  autoPlay
+  loop
+/>
+
+*Pick a reference from the feed: it's a person talking to camera, so the app goes to **Copy editing style**. Choose who's
+on camera, then say what the video should talk about.*
+
+Reference uses your HeyGen API key: the app watches the video through HeyGen, which uses your API balance. Add the
+key in **Settings** > **HeyGen API key**, or when the app asks.
+
+## 1. Pick the video
+
+On Home, open **Reference**. Then:
+
+- **Paste any URL**, then **Use link**. One public video from YouTube (a video or a Short), TikTok, Instagram or X, up to 30 minutes, or a
+  published HyperFrames project.
+- **Upload your reference**: drop a file from your computer.
+- **Pick a reference** from the feed beside it, videos made to be remixed (also on Home as **Remix from inspiration**).
+
+## 2. The app reads it and picks the way
+
+The app watches the reference and decides how to remake it:
+
+- **A person talking to camera** becomes **Copy editing style**: your video gets its cuts, captions and effects, with
+  your footage or an AI avatar.
+- **Graphics and animation with nobody on camera** becomes a **Video brief**: it recreates the motion with your topic
+  and files.
+
+If it can't tell, it asks you to choose between those two, then **Continue**.
+
+## 3. Say what it's about
+
+For **Copy editing style**, the app asks **Who's on camera?**
+
+- **Upload your own takes.** Add **Editing instructions** if you want, for example "Cut the pauses, keep it under 30
+  seconds".
+- **An AI avatar:** your photo or a HeyGen presenter. Say what the avatar should say; a sentence or two is enough.
+
+For a **Video brief**, write **What will your video talk about** (a sentence or two), and add your own pictures or
+clips with **Upload assets**.
+
+## 4. Swap what should be yours
+
+**What to swap** lists the parts the app found in the reference, each with where it appears, for example "Your
+opening question 0:00-0:02" or "Your website URL 0:02-0:05". Choose how to fill each:
+
+| Choice | What happens |
+| --- | --- |
+| **Framey writes it** / **Framey decides** | Framey fills it to fit your topic |
+| **Type yours** | Write the exact words |
+| **Upload** | Use your own file |
+| **Generate** | Make a picture or clip. Its price shows under the row once you pick it |
+
+Choose a brand kit for the video, or **No brand kit**. Your workspace default stays as you set it. Then **Continue**;
+Framey may ask a question or two about anything the video leaves open.
+
+## 5. Compare with the original
+
+While Framey builds, **Show original** at the top of the preview plays the reference over the picture. When the
+build is done, the same button sets the two side by side, on one clock, so you can see what matches and what doesn't.
+Then [edit the result](/studio-app/edit-with-the-agent) like any other video.
+
+## Use other people's videos fairly
+
+The app copies the editing style, not the footage: your video is built from your own takes, avatar, words and
+media. Don't reuse the original's footage, music or logos unless you have the rights to them.
+
+## Related topics
+
+- [What to make](/workflows)
+- [Edit a video with the agent](/studio-app/edit-with-the-agent)
+- [Add a brand kit](/studio-app/brand-kits)
diff --git a/docs/studio-app/share.mdx b/docs/studio-app/share.mdx
new file mode 100644
index 00000000000..91e92d3605d
--- /dev/null
+++ b/docs/studio-app/share.mdx
@@ -0,0 +1,69 @@
+---
+title: "Share your video for review"
+sidebarTitle: "Share for review"
+description: "Get feedback on a video from the HyperFrames Studio app: one click makes a review link people can watch and comment on. Choose who can open it, send new versions on the same link, or turn it off."
+---
+
+import { HoverVideo } from "/snippets/hover-video.jsx";
+
+import { DocsVideo } from "/snippets/docs-video.jsx";
+
+**Share** in the project's top bar turns your latest export into a review page and copies its link. Send it to
+anyone who should watch or comment. When you change the video, the new version goes on the same link.
+
+<DocsVideo
+  title="Share: pick who can open the link, then turn it off"
+  src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/share-demo-v2.mp4"
+  poster="/public/images/studio-app/share-demo-v2.jpg"
+  aspect="16 / 10"
+  autoPlay
+  loop
+/>
+
+*Share, then **Who has access**: Only you, people you invite, your workspace, or anyone with the link. Turn off link
+ends it for everyone.*
+
+## Share a link
+
+<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/share-button-v2.mp4" poster="/public/images/studio-app/spots/share-button-v2.jpg" hasAudio={false} label="Share in the top bar" />
+
+Choose **Share**. The app uploads your last MP4 export, makes the review page and copies its link. If there's no
+MP4 yet, it opens the Export panel first and shares as soon as the export finishes. See
+[export a video](/studio-app/export).
+
+Then HeyGen checks the video before reviewers can see it. The panel shows **Checking…**, which can take a few minutes.
+
+You need to be signed in to HeyGen. The link is made in the workspace you're signed in to, named under **Shares to**;
+choose **Change** to move it to another one.
+
+## Choose who can open it
+
+By default, **anyone in your workspace with the link can comment**. To change it, choose the row under **Who has
+access**:
+
+| Choice | Who can open it |
+| --- | --- |
+| **Only you** | Nobody else |
+| **Only people you invite** | They sign in with the invited email |
+| **Anyone in** your workspace | People signed in to that workspace, not people from outside |
+| **Anyone with the link** | No sign-in. Guests type a name to comment |
+
+Next to it, choose **can comment** or **can only watch**. Pick **Only you** before you share something that isn't ready
+for others.
+
+## Send a new version
+
+When the project has changed since the version on the review page, the panel says so. Export an MP4, then choose
+**Add this version**. It's the same link: everyone who has it sees the new version.
+**Open review page** opens it in your browser. For a link anyone can open, the button is **View as reviewer** and
+shows the page signed out, as your guests see it.
+
+## Turn off the link
+
+Choose **Turn off link**, then confirm. Everyone loses access at once, and the comments are kept. **Turn on with a new
+link** shares it again under a new link.
+
+## Related topics
+
+- [Export a video](/studio-app/export)
+- [Edit a video with the agent](/studio-app/edit-with-the-agent)
diff --git a/docs/studio-app/troubleshooting.mdx b/docs/studio-app/troubleshooting.mdx
index 6a9d1a75515..09e7cfbf530 100644
--- a/docs/studio-app/troubleshooting.mdx
+++ b/docs/studio-app/troubleshooting.mdx
@@ -16,6 +16,9 @@ update. Click here**.
 To check by hand, open **Settings** > **Updates** and choose **Check for updates**. On a Mac, **HyperFrames** >
 **Check for Updates…** in the menu bar does the same. Some updates show a short video of what is new.
 
+**Automatic updates** in **Settings** > **Updates** is on by default: the app updates itself while you're away. Turn it
+off to update only when you click.
+
 If an update says **The update is taking longer than it should** or **The update didn't finish**, click the update
 button and choose **Try again** to cancel it and start a new one, or **Download it instead** to get the
 latest version from the download page. **Download the latest version** in **Settings** > **Updates** also opens the
@@ -24,9 +27,10 @@ your internet connection, then try again.
 
 ## The app asks me to sign in to HyperFrames
 
-Sending a request needs your HeyGen account. Choose **Continue with HeyGen** and finish in your browser within two
-minutes. If you see **No connection**, check your internet. If you see **The sign-in expired** or **HeyGen didn't
-sign you in**, choose **Try again**.
+Sending a request needs your HeyGen account. Choose **Continue with HeyGen** and finish in your browser within 10
+minutes. If it says **Couldn't renew your sign-in** or **Couldn't finish signing in**, check your internet (and that a
+VPN or proxy covers all apps). If it says **Sign-in timed out**, **Your sign-in expired** or **HeyGen didn't sign you
+in**, choose **Try again**.
 
 ## You're signed out of Claude Code
 
@@ -49,8 +53,8 @@ minutes.
 
 **Agent access** in **Settings** > **Agent** decides what Claude Code may do:
 
-- **Full access**, the default: it can install, use the internet, and run anything, with no checks.
-- **Auto**: it works in your project and blocks risky steps on its own.
+- **Auto**, the default: it works in your project and blocks risky steps on its own.
+- **Full access**: it can install, use the internet, and run anything, with no checks.
 
 With **Auto**, a step Claude Code refuses shows as blocked in the run's work log. If the change needed that step,
 switch to **Full access** and send the request again.
diff --git a/docs/studio-app/video-clips.mdx b/docs/studio-app/video-clips.mdx
new file mode 100644
index 00000000000..a50ed69866f
--- /dev/null
+++ b/docs/studio-app/video-clips.mdx
@@ -0,0 +1,79 @@
+---
+title: "Make clips with HeyGen Video 1"
+sidebarTitle: "HeyGen Video 1"
+description: "Generate an AI video clip up to a minute long with HeyGen Video 1 in the HyperFrames Studio app, and put it straight into your project."
+---
+
+import { HoverVideo } from "/snippets/hover-video.jsx";
+
+import { DocsVideo } from "/snippets/docs-video.jsx";
+
+**HeyGen Video 1** generates one unbroken shot from a description, up to a minute long. The clip lands in your
+project's files, and the agent places it on the timeline.
+
+## Ask the agent for a clip
+
+<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/video1-tool-v2.mp4" poster="/public/images/studio-app/spots/video1-tool-v2.jpg" hasAudio={false} label="Tools (#), then HeyGen Video 1" />
+
+<Steps>
+  <Step title="Open Tools">
+    In the chat, type **#** to open **HyperFrames tools**, then pick **HeyGen Video 1**.
+  </Step>
+  <Step title="Set the length">
+    Choose the length pill to open **Length in seconds**. A clip can be 5 to 60 seconds; it starts at 15.
+  </Step>
+  <Step title="Describe the shot">
+    Say what happens, how the camera moves and how it should look, then send. The agent makes the clip and puts it on
+    the timeline.
+  </Step>
+</Steps>
+
+
+You can steer the clip in the same message:
+
+- **Start from a picture**: give an image and it becomes the clip's exact first frame.
+- **Match a look**: give up to 9 reference images.
+- **Copy a movement**: give one reference video of 5 seconds or less (trim a longer one first; the app refuses it), plus a picture of the person who should do the move. The clip is then one take of up to 15 seconds, with no start picture.
+- **Shape**: 16:9, 9:16 or 1:1, at 480p or 768p (768p is the default).
+
+## Or use Generate media
+
+**Generate media** makes a clip without a chat message. Find it on an empty timeline, or in the words bar. Choose **Video**, pick the **Video 1** model,
+set **Quality**, and add a **Start from** picture if you want one. This form makes clips of 5 to 15 seconds, in 16:9 or
+9:16. The same form also offers **H3 Max** and **Seedance**.
+
+## Change a clip you already have
+
+Select a video in the preview and choose **Generate media** in the bar above it. Describe the change ("make it snow",
+"turn it into a night scene") and choose **Make**. The bar shows what it will cost at most and what's left on your key
+before you start.
+
+<DocsVideo
+  title="Select a clip, Generate media, describe the change, Make"
+  src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/snow-demo-v2.mp4"
+  poster="/public/images/studio-app/snow-demo-v2.jpg"
+  aspect="16 / 10"
+  autoPlay
+  loop
+/>
+
+*"Make it snow": HeyGen Video 1 whitened the roof and gave her a new movement, and the new clip lands in Media.
+The wait is sped up.*
+
+Keep the clip small: a 5-second 1080p file of 7.8 MB came back with **The references are too large to send**, while
+the same shot at 720p went through.
+
+## What it costs
+
+In the chat, the agent makes the clip as soon as you ask, without a separate price check; the **Generate media**
+form shows the price before you start. It is paid from your HyperFrames plan when
+the plan covers it, otherwise from the HeyGen API credits on the key in **Settings**.
+
+If a clip stops with **Out of API credits**, add credits in HeyGen and try again. If it asks you to set up your key,
+add your HeyGen API key in **Settings**, or choose a plan.
+
+## Related topics
+
+- [Add an AI avatar presenter to a video](/guides/avatar-presenter)
+- [Use images and video](/guides/video-components)
+- [Edit a video with the agent](/studio-app/edit-with-the-agent)
diff --git a/docs/studio-app/workspace.mdx b/docs/studio-app/workspace.mdx
new file mode 100644
index 00000000000..28de793ff33
--- /dev/null
+++ b/docs/studio-app/workspace.mdx
@@ -0,0 +1,119 @@
+---
+title: "Find your way around a project"
+sidebarTitle: "The project screen"
+description: "Every part of a Studio app project: the chat and its @, # and / menus, the Script panel that edits video like a document, Media, Captions, Inspirations and Layers."
+---
+
+import { HoverVideo } from "/snippets/hover-video.jsx";
+
+import { DocsVideo } from "/snippets/docs-video.jsx";
+
+A project has three columns: the chat with your agent on the left, the preview in the middle, and panels on the
+right. The timeline opens under the preview with **Show timeline**.
+
+## The chat box: @, # and /
+
+Three keys open menus right where you type.
+
+<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/at-menu-v2.mp4" poster="/public/images/studio-app/spots/at-menu-v2.jpg" hasAudio={false} label="Typing @ opens the menu of things to add" />
+
+**`@` adds something to your message.** The menu groups everything the agent can use: **Media** you added,
+**Scenes & brand kit**, **Inspirations** (moments from real videos), **Captions** styles, **Voices**, other
+**Projects**, **Tools**, or **Add files from your Mac**. Press **Tab** to jump between groups. Whatever you pick shows as a chip
+above your words, so the agent knows exactly which file or style you mean.
+
+<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/hash-tools-v2.mp4" poster="/public/images/studio-app/spots/hash-tools-v2.jpg" hasAudio={false} label="Typing # opens HyperFrames tools" />
+
+**`#` picks a tool** for this request: **Storyboard**, **Brand kit**, **HeyGen Voice 1**, **Remove background**,
+**HeyGen Video 1**, **Reference video** or **Create assets** (some accounts also see **Podcast edit** and **Computer
+use**). Use it when
+you want a specific job done the specific way ("#Remove background on the presenter, then put the title behind her").
+The HeyGen ones bill your HeyGen plan when it covers them, otherwise the HeyGen API key in **Settings**.
+
+<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/slash-menu-v2.mp4" poster="/public/images/studio-app/spots/slash-menu-v2.jpg" hasAudio={false} label="Typing / opens commands and skills" />
+
+**`/` runs a command or turns on a skill.** **/clear** starts a fresh chat (earlier messages stay above) and
+in Claude Code, **/compact** shortens a long one. Below them are ready-made video formats (founder take, AI breakdown reel, cards
+behind you, behind-head captions and more) and any skills you have installed: picking one turns it on for the project.
+
+<HoverVideo className="hf-aside hf-spot" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/skills-menu-v2.mp4" poster="/public/images/studio-app/spots/skills-menu-v2.jpg" hasAudio={false} label="The Skills menu in the chat header" />
+
+The chat header shows which agent, model and effort the next request uses (click to change), and **Skills** lists
+what the agent can use: HyperFrames' own (always on), **Talking-head formats** and **Video workflows** that work only
+when picked, and **Your skills** from Claude Code or Codex.
+
+<div style={{ clear: "both" }} />
+
+## Script: edit the video like a document
+
+Open **Script** at the top of the right panel (on some accounts it opens from a clip's menu instead). Every word
+spoken in your video appears as text. The audio is sent to HeyGen to transcribe it, so this needs your HeyGen sign-in
+on a plan that includes it, or a HeyGen API key in **Settings**.
+
+Select words (click the first, Shift-click the last), then choose **Cut** or press <kbd>⌫</kbd>. The words stay in
+the script, struck through, and the cut waits under **Pending video edits** above the chat box with anything else you
+staged. Choose **Send 1 edit** (the count grows as you stage more) and the agent applies them all; the video gets shorter once it's done. To drop a
+cut before sending, delete its row in **Pending video edits**. To bring back words already cut, select them, choose
+**Restore**, and send that too.
+
+<DocsVideo
+  title="Cut a sentence in the script, then send it to the agent"
+  src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/script-demo-v2.mp4"
+  poster="/public/images/studio-app/script-demo-v2.jpg"
+  aspect="16 / 10"
+  autoPlay
+  loop
+/>
+
+With words selected, the bar offers:
+
+- **Comment**: a note on those words for the agent.
+- **Cut** (or **Restore** on cut words).
+- **Fix words**: correct what the transcript heard. The audio stays the same.
+- **Add**: a **Zoom in**, a **B-roll shot** or a **Title card** on those words.
+- **Make clip** (podcast projects): cut the words into a vertical clip of their own.
+- **Ask**: ask your agent about those words.
+
+When the agent spots filler or repeated takes, the top of the script shows how many cuts it suggests and how much
+shorter they'd make the video, with **Keep all** and **Cut all**. Click a suggested cut to see why, and keep or cut
+just that one.
+
+## Media, Captions, Inspirations, Layers
+
+The row of icons at the top of the right panel, **All files**, **Captions**, **Inspirations**, **Layers** (and
+**Reviews** where review is on), switches what the panel shows:
+
+<div className="hf-shelf">
+  <div>
+    <HoverVideo className="hf-spot hf-spot-inline" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/captions-panel-tight-v2.mp4" poster="/public/images/studio-app/spots/captions-panel-tight-v2.jpg" hasAudio={false} label="The Captions panel" />
+    <p><strong>Captions:</strong> 91 caption styles. Click one to use it in the chat, then say where it goes.</p>
+  </div>
+  <div>
+    <HoverVideo className="hf-spot hf-spot-inline" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/inspirations-panel-tight-v2.mp4" poster="/public/images/studio-app/spots/inspirations-panel-tight-v2.jpg" hasAudio={false} label="The Inspirations panel" />
+    <p><strong>Inspirations:</strong> moments from real videos (motion graphics, A-roll cuts, mobile ads, shaders), with ideas for whatever you selected.</p>
+  </div>
+  <div>
+    <HoverVideo className="hf-spot hf-spot-inline" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/layers-panel-tight-v2.mp4" poster="/public/images/studio-app/spots/layers-panel-tight-v2.jpg" hasAudio={false} label="The Layers panel" />
+    <p><strong>Layers:</strong> every element in the video, top to bottom; pick one to select it in the preview.</p>
+  </div>
+</div>
+
+**Media** lists the project's files by folder. Add one to the chat to talk about it ("use this as the background"),
+and use the plus button to bring in files from your Mac.
+
+## Framey
+
+Framey, the small green character by the preview, shows what your agent is doing and tells you when a video is ready
+or needs you. Change how it looks in **Settings** > **Framey**.
+
+## The preview tools
+
+Under the preview: **Select** to click any element (right-click it for **Ask Framey**, layer order, **Cut out object
+here** on footage), **Draw** to circle what should change, and **Comment** to leave a note at a moment. Changes stack
+up and go to the agent together; see [edit a video with the agent](/studio-app/edit-with-the-agent).
+
+## Related topics
+
+- [Edit a video with the agent](/studio-app/edit-with-the-agent)
+- [Remove a background](/guides/remove-background)
+- [Use your brand kit](/studio-app/brand-kits)
diff --git a/scripts/check-no-main-deletions.mjs b/scripts/check-no-main-deletions.mjs
index 106446a0096..7275ff8ea86 100644
--- a/scripts/check-no-main-deletions.mjs
+++ b/scripts/check-no-main-deletions.mjs
@@ -741,6 +741,14 @@ const FALLOW_PRUNE_REASON =
   "fallow 3 reuses one audit snapshot per checkout and the hook prunes with `fallow audit-cache prune`, replacing this script";
 
 export const ALLOWED_DELETIONS = new Map([
+  [
+    "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",
+  ],
+  [
+    "docs/public/images/studio-app/project.jpg",
+    "the project screen page is built from recorded clips and posters; nothing links this still any more",
+  ],
   [
     "packages/studio/src/components/renders/useRenderQueueMotionBlur.test.tsx",
     "Studio no longer sends previewMotionBlur with renders: blur picks its tier from the page, so the test of that field goes with it",