docs: ship the current Studio walkthrough

Author: ukimsanov

docs/images/studio/export.jpg

@@ -19,8 +19,8 @@ export const AdvancedPathGrid = () => {
       detail: "Change visible design, text, media, timing, and animation in the live project.",
       action: "Open the Studio guide",
       href: "/studio",
-      video: `${CDN}/studio-design-loop-v1.mp4`,
-      poster: `${CDN}/studio-design-loop-v1.jpg`,
+      video: `${CDN}/studio-direct-edit-loop-v2.mp4`,
+      poster: `${CDN}/studio-direct-edit-loop-v2.jpg`,
     },
     {
       title: "Build richer compositions",
@@ -36,8 +36,8 @@ export const AdvancedPathGrid = () => {
         "Validate the project, render through Studio, an agent, or the CLI, and review the file.",
       action: "Finish the project",
       href: "/guides/export-and-share",
-      video: `${CDN}/studio-export-loop-v1.mp4`,
-      poster: `${CDN}/studio-export-loop-v1.jpg`,
+      video: `${CDN}/studio-check-render-loop-v2.mp4`,
+      poster: `${CDN}/studio-check-render-loop-v2.jpg`,
     },
   ];
   const [reducedMotion, setReducedMotion] = useState(false);

docs/images/studio/inspector.jpg

@@ -7,8 +7,8 @@ description: "Open a HyperFrames project, make visible changes, adjust timing an
 <Frame>
   <video
     className="aspect-video w-full bg-zinc-100 object-cover dark:bg-zinc-900"
-    src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-front-door-v1.mp4"
-    poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-front-door-v1.jpg"
+    src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-front-door-v2.mp4"
+    poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-front-door-v2.jpg"
     alt="A narrated tour of a real HyperFrames Studio project"
     aria-label="A narrated tour of a real HyperFrames Studio project"
     controls
@@ -32,8 +32,8 @@ Pause on the relevant frame, then click the element on the canvas. A selected el
 <Frame>
   <video
     className="aspect-video w-full bg-zinc-100 object-cover dark:bg-zinc-900"
-    src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-design-loop-v1.mp4"
-    poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-design-loop-v1.jpg"
+    src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-direct-edit-loop-v2.mp4"
+    poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-direct-edit-loop-v2.jpg"
     alt="Selecting an element and changing it in HyperFrames Studio"
     aria-label="Selecting an element and changing it in HyperFrames Studio"
     autoPlay
@@ -57,8 +57,8 @@ Use the timeline when the right element appears at the wrong moment.
 <Frame>
   <video
     className="aspect-video w-full bg-zinc-100 object-cover dark:bg-zinc-900"
-    src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-timing-loop-v1.mp4"
-    poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-timing-loop-v1.jpg"
+    src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-timing-loop-v2.mp4"
+    poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-timing-loop-v2.jpg"
     alt="Adjusting clip timing in the HyperFrames Studio timeline"
     aria-label="Adjusting clip timing in the HyperFrames Studio timeline"
     autoPlay
@@ -80,13 +80,19 @@ Select an element and open its motion controls to work with animation and keyfra
 
 For media, select the image, video, or audio element and replace its source from the Inspector or Assets. Recheck its crop, duration, and transition after replacement.
 
+## 4. Decide whether Studio is the right tool
+
+Use Studio for a change you can point at: wording, position, styling, media, timing, or one animation.
+
+Ask the agent when the change affects the story, several scenes, source research, or the project structure. Both edit the same project, so you can move between them without exporting or converting anything.
+
 <Frame>
   <video
     className="aspect-video w-full bg-zinc-100 object-cover dark:bg-zinc-900"
-    src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-motion-loop-v1.mp4"
-    poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-motion-loop-v1.jpg"
-    alt="Editing animation and media in HyperFrames Studio"
-    aria-label="Editing animation and media in HyperFrames Studio"
+    src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-agent-loop-v2.mp4"
+    poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-agent-loop-v2.jpg"
+    alt="Sending the selected element and its project context to an agent"
+    aria-label="Sending the selected element and its project context to an agent"
     autoPlay
     muted
     loop
@@ -95,12 +101,6 @@ For media, select the image, video, or audio element and replace its source from
   />
 </Frame>
 
-## 4. Decide whether Studio is the right tool
-
-Use Studio for a change you can point at: wording, position, styling, media, timing, or one animation.
-
-Ask the agent when the change affects the story, several scenes, source research, or the project structure. Both edit the same project, so you can move between them without exporting or converting anything.
-
 ## 5. Check and render the version
 
 Watch the complete project once. Pay particular attention to the opening, scene boundaries, captions, and audio ending. Use **Lint** for a quick Studio pass, then run `npx hyperframes check` from the project folder before delivery.
@@ -110,8 +110,8 @@ Open **Export**, choose the format and resolution required by the destination, a
 <Frame>
   <video
     className="aspect-video w-full bg-zinc-100 object-cover dark:bg-zinc-900"
-    src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-export-loop-v1.mp4"
-    poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-export-loop-v1.jpg"
+    src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-check-render-loop-v2.mp4"
+    poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/studio-check-render-loop-v2.jpg"
     alt="Checking and exporting a version from HyperFrames Studio"
     aria-label="Checking and exporting a version from HyperFrames Studio"
     autoPlay

docs/images/studio/overview.jpg

@@ -829,3 +829,24 @@ New navigation should be task-shaped:
   typography change. Removing the cross-origin TT Norms declarations also
   removes four repeatable browser console errors while preserving the approved
   effective site font.
+
+### 2026-07-31 — Studio delivery and current-main sync
+
+- The replacement Studio film uses the current `field-notes` project and real
+  Studio 0.7.86 captures. It runs 56 seconds with River narration, BGM, SFX,
+  and one stable caption rail. Film lint, browser check, and all five seam
+  checks pass; all 1,680 frames were measured with zero blank, white, or flat
+  frames. Integrated loudness is -16.6 LUFS and the worst narration-to-bed
+  separation is 12.3 dB.
+- Replaced the Studio overview, Storyboard, Design, and Export stills with one
+  coherent capture set. The four muted loops now show direct editing, a real
+  persisted timeline trim, the real Ask agent handoff, and a real Studio render.
+- Published the film, poster, four loops, and four loop posters under first-use
+  `*-v2` keys in `s3://heygen-public/hyperframes-oss/docs/images/showcase/` with
+  immutable one-year cache headers. S3 metadata and CDN content types were
+  verified after upload.
+- Merged `origin/main` at `a3c8f897f` before final QA. Preserved the approved
+  Guides / Studio / Catalog / Developers chrome, added the new Prompt Guide as
+  progressive disclosure inside Guides, redirected the retired
+  `/guides/prompting` route, and kept the beginner Quickstart intentionally
+  short.

docs/images/studio/storyboard.jpg

@@ -330,6 +330,9 @@ Old docs and changelogs are leads, not proof.
 - [x] Add the first real Studio workspace visual.
 - [x] Add focused visuals for difficult interactions.
 - [x] Move or redirect the buried manual-editing page.
+- [x] Replace the Studio front-door film with a current narrated product walkthrough.
+- [x] Recapture the Studio stills and four task loops from the same real project.
+- [x] Publish the final Studio media under immutable versioned CDN URLs.
 
 ### Phase 5 — Consolidation
 
@@ -345,6 +348,7 @@ Old docs and changelogs are leads, not proof.
 - [x] Review desktop and mobile navigation.
 - [x] Add and visually review sendable routes for common user questions.
 - [x] Add page ownership and freshness rules.
+- [x] Merge the current `main` prompting guide and product changes before final QA.
 - [ ] After release, use Mintlify analytics to inspect real searches, no-result queries, and weak result ranking.
 
 ## Deliverables