docs(guides): one page per kind of video, with its prompts folded in

docs/custom.css

@@ -153,19 +153,20 @@ h3 {
 
 /* ── Workflow routing ── */
 .hf-workflow-routes {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.75rem 1.25rem;
   margin: 1.5rem 0;
-  border-top: 1px solid var(--hf-border-color);
 }
 
 .hf-workflow-route {
-  display: grid;
-  grid-template-columns: 11rem minmax(0, 1fr);
-  gap: 1rem;
-  align-items: center;
-  padding: 1rem 0;
-  border-bottom: 1px solid var(--hf-border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
   color: inherit;
   text-decoration: none;
+  border-bottom: 0 !important;
+  box-shadow: none !important;
 }
 
 .hf-workflow-route:hover .hf-workflow-route-title {
@@ -210,9 +211,8 @@ h3 {
 }
 
 @media (max-width: 639px) {
-  .hf-workflow-route {
-    grid-template-columns: 7rem minmax(0, 1fr);
-    gap: 0.8rem;
+  .hf-workflow-routes {
+    grid-template-columns: 1fr;
   }
 }
 
@@ -1359,6 +1359,11 @@ header.is-frame ~ #body-content #content-area {
 .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); } }
 
+/* Two results side by side (comparisons) */
+.hf-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
+.hf-versus p { margin: 0 0 0.4rem; font-size: 0.9375rem; }
+@media (max-width: 640px) { .hf-versus { 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; }

docs/docs.json

@@ -90,17 +90,6 @@
             "group": "Prompt Guide",
             "pages": [
               "prompting/overview",
-              {
-                "group": "Level 1 — Your first video",
-                "pages": [
-                  "prompting/product-launch",
-                  "prompting/explainers",
-                  "prompting/code-and-prs",
-                  "prompting/captions-and-talking-heads",
-                  "prompting/music-and-slideshows",
-                  "prompting/motion-graphics"
-                ]
-              },
               {
                 "group": "Level 2 — Control",
                 "pages": [
@@ -1290,6 +1279,36 @@
       "source": "/sdk/overview",
       "destination": "/sdk/quickstart",
       "permanent": true
+    },
+    {
+      "source": "/prompting/product-launch",
+      "destination": "/guides/product-launch-video#prompts-that-work",
+      "permanent": true
+    },
+    {
+      "source": "/prompting/explainers",
+      "destination": "/guides/faceless-explainer#prompts-that-work",
+      "permanent": true
+    },
+    {
+      "source": "/prompting/code-and-prs",
+      "destination": "/guides/pr-to-video#prompts-that-work",
+      "permanent": true
+    },
+    {
+      "source": "/prompting/captions-and-talking-heads",
+      "destination": "/guides/captions-and-recuts#prompts-that-work",
+      "permanent": true
+    },
+    {
+      "source": "/prompting/music-and-slideshows",
+      "destination": "/guides/music-to-video#prompts-that-work",
+      "permanent": true
+    },
+    {
+      "source": "/prompting/motion-graphics",
+      "destination": "/guides/motion-graphics#prompts-that-work",
+      "permanent": true
     }
   ],
   "integrations": {

docs/guides/avatar-presenter.mdx

@@ -1,96 +1,58 @@
 ---
-title: "Add an avatar presenter"
+title: "Add an AI avatar presenter to a video"
 sidebarTitle: "Avatar presenter"
-description: "Create or reuse a presenter clip, keep it as project media, and combine it with editable HyperFrames scenes."
+description: "Put a HeyGen avatar on screen to present your video, with HyperFrames building the scenes, graphics and captions around them."
 ---
 
 import { DocsVideo } from "/snippets/docs-video.jsx";
 
-Use an avatar when a person should speak on screen. Use HyperFrames for the
-parts around that person: layouts, product scenes, captions, graphics, timing,
-music, and the final composition.
+An avatar is a HeyGen presenter who reads your script on camera. HyperFrames builds everything around them: the
+scenes, charts, captions and music, all still editable.
 
-<Frame caption="A presenter clip remains the source footage while HyperFrames adds the caption rail and emphasis layer around it.">
-  <DocsVideo
-    title="Presenter footage with a readable caption rail and an emphasis moment"
-    src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/captions-anchor-rail-v2.mp4#t=0.1"
-    poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/avatar-presenter-caption-rail-v1.jpg"
-  />
-</Frame>
+<DocsVideo
+  title="Code2Video Bench, presented by an avatar"
+  src="https://static.heygen.ai/hyperframes-oss/homepage/showcase/hq/explainer-code2video-bench-v1.mp4"
+  poster="https://static.heygen.ai/hyperframes-oss/homepage/showcase/poster/explainer-code2video-bench-v1.jpg"
+/>
 
-## Choose the right path
+*A presenter explains benchmark results while the charts and numbers are built around them.*
 
-**The presenter is the whole video.** Use HeyGen Video Agent or an avatar-video
-workflow. The result is a rendered HeyGen video, not an editable HyperFrames
-composition.
+## Make it
 
-**The presenter is one part of a designed video.** Generate the presenter clip,
-keep it as a local project asset, then compose the rest in HyperFrames. This is
-the path below.
-
-**You already recorded a person.** Skip avatar generation. Bring the footage
-into the project and choose [captions, designed overlays, or a real recut](/guides/captions-and-recuts).
-
-## Ask for the complete result
-
-Tell the agent what the presenter contributes and what remains editable:
+In the Studio app or with your own agent, say where the presenter appears and what they say:
 
 ```text
-Using /hyperframes, make a 20-second product update.
-Use a generated presenter only for the opening sentence.
-Build the product scenes, captions, and ending in HyperFrames.
-Keep the presenter clip as a local project asset.
-```
-
-The agent may ask you to sign in to HeyGen before it generates the clip. Check
-the active account first:
-
-```bash
-npx hyperframes auth status
+A 30-second product update. A presenter opens with: "This week we shipped three things."
+Then show each feature full screen with captions, and bring the presenter back to close.
 ```
 
-Run `npx hyperframes auth login` if no account is active. Avatar generation can
-use the allowance or credits attached to that account; confirm the account and
-usage before starting a long or repeated run.
+Name the avatar and voice if you have them (your own digital twin, or one from HeyGen's library), or describe who
+you want and let the agent pick. Avatars are made by HeyGen, so they need your HeyGen account: in the Studio app add a
+HeyGen API key; with your own agent, install the [HeyGen CLI](https://developers.heygen.com/cli) and sign in with
+`heygen auth login --oauth`. Avatars use HeyGen credits: your plan's credits with that sign-in, API credits with an
+API key.
 
-## Build around the clip
-
-Once the presenter video exists:
-
-1. Keep the original file inside the project.
-2. Place and trim it like any other video clip.
-3. Transcribe the real speech before styling captions.
-4. Add product scenes or graphics only where they support what is being said.
-5. Render and watch the complete file with sound.
-
-Use **Assets → Import media** in Studio, or ask the agent to add the generated
-file. If the presenter must sit over a designed background, create a transparent
-version locally:
-
-```bash
-npx hyperframes remove-background assets/presenter.mp4 \
-  -o assets/presenter-transparent.webm
-```
+**Already recorded yourself?** Skip the avatar: add your clip and see
+[captions and recuts](/guides/captions-and-recuts). **Want only the presenter, nothing designed around them?** Make it
+in HeyGen directly; it won't be an editable HyperFrames project.
 
-Background removal is optional. Keep the original background when it already
-belongs in the shot or when difficult hair, hands, or motion produce a weak
-matte.
+## What it can do around the presenter
 
-## Check the result
+- Put them beside, in front of or behind your scenes. With the background removed
+  ([how](/guides/remove-background)), titles can pass behind them.
+- Cut away to full-screen product shots or charts and back.
+- Caption what they actually said, word by word.
+- Keep the clip as a file in the project, so the render never depends on a download.
 
-- The presenter says the approved words with the intended voice.
-- Captions match the actual audio, including names and numbers.
-- The person does not cover the product or another important visual.
-- Music stays below speech.
-- Generated and source media are stored locally rather than fetched during render.
-- The final file has been watched once from beginning to end.
+## Check before you share
 
-For manual avatar, voice, and image-to-video controls, use the current
-[HeyGen CLI guide](https://developers.heygen.com/cli) and
-[Create Video reference](https://developers.heygen.com/reference/create-video).
+- The presenter says the approved words, with names and numbers right.
+- They never cover the product or the point of the shot.
+- Music stays under the voice.
+- You watched the whole thing once, with sound.
 
 ## Related topics
 
-- [Work with captions and talking-head footage](/guides/captions-and-recuts)
-- [Work with all project media](/guides/media)
-- [Remove the presenter's background](/guides/remove-background)
+- [Remove a video background](/guides/remove-background)
+- [Add captions to a video](/guides/captions-and-recuts)
+- [HeyGen CLI and avatar options](https://developers.heygen.com/cli)