docs: six pages get a real film instead of a six-second clip

Product launch, colour grading, faceless explainer, captions and recuts, motion
graphics, and voice and audio.

Five of these led with a six-to-eight second teaser. A six-second clip on the
page that teaches you to make explainers does not teach anything — it is a
placeholder that looks like content. Colour grading, the most visual feature in
the product, had no video at all.

The new films are 34 to 41 seconds and each shows a RANGE rather than one look:
four ways to tell the same idea with no footage; five caption treatments on one
untouched clip; correction, presets, curves, selective colour, all four scopes
and a LUT; narration with music ducking under it and effects on the beat. The
launch film is built by running the workflow on huly.io for real, so the page
that sells the workflow is showing its actual output.

They share one visual system, measured from HyperFrames own light-theme launch
films rather than invented: bone field, near-black type, coral accent, and the
product always a dark panel inset on the light field. Every one carries audio at
about -20 dB and is 1-2 MB.

The old teasers are removed from the three pages where they became a duplicate.
They stay in the workflow picker, which is where a six-second tile belongs.

Guides with nothing to look at: 15 at the start of this work, 5 now.

docs/guides/captions-and-recuts.mdx

@@ -4,17 +4,18 @@ sidebarTitle: "Captions and talking head"
 description: "Add captions, add designed overlays, or change the spoken edit."
 ---
 
-<Frame caption="One source clip, three caption treatments. The spoken edit stays untouched.">
-  <video
-    autoPlay
-    loop
-    muted
-    playsInline
-    preload="metadata"
-    poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/wfv2-captions.jpg"
-    src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/wfv2-captions-v4.mp4"
-  />
-</Frame>
+import { DocsVideo } from "/snippets/docs-video.jsx";
+
+
+<DocsVideo
+  title="Five caption treatments on the same untouched clip"
+  src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/captions-recut-demo-v1.mp4"
+  poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/captions-recut-demo-v1.jpg"
+/>
+
+A verbatim rail, an embedded climax word, kinetic emphasis, a lower third and a
+pull-quote. The footage underneath is never re-edited — the overlays carry all
+of it.
 
 ## Make the request
 

docs/guides/color-grading.mdx

@@ -4,6 +4,8 @@ sidebarTitle: "Color grading"
 description: "Fix exposure and color on an image or video, shape a look with wheels and curves, apply a LUT, and check the result against real measurements."
 ---
 
+import { DocsVideo } from "/snippets/docs-video.jsx";
+
 Grading changes how a photo or video **looks** — brighter, warmer, moodier, more
 or less colorful. It runs on one media element at a time. The file on disk never
 changes, and text, captions, SVG and ordinary HTML stay on their own layers,
@@ -16,6 +18,15 @@ untouched.
   />
 </Frame>
 
+<DocsVideo
+  title="Correction, presets, curves, selective colour, scopes and a LUT on real footage"
+  src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/color-grading-demo-v1.mp4"
+  poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/color-grading-demo-v1.jpg"
+/>
+
+Every control moves and the picture answers. The numbers on screen are measured
+from the frame, not illustrative — shadows lifted 2% to 23%, median 28% to 41%.
+
 ## Correct first, then style
 
 Get exposure, white balance, contrast and saturation believable first. Then shape

docs/guides/faceless-explainer.mdx

@@ -4,20 +4,19 @@ sidebarTitle: "Faceless explainer"
 description: "Turn notes, an article, or a difficult idea into a visual explanation without product footage."
 ---
 
+import { DocsVideo } from "/snippets/docs-video.jsx";
+
 Start from a topic, article, or notes. HyperFrames invents the typography, diagrams, abstract graphics, and data visualization that teach it.
 
-<Frame caption="A short preview from a SpaceX valuation explainer. Every visual was invented from the question and numbers.">
-  <video
-    className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900"
-    src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/wfv2-explainer-v4.mp4"
-    poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/wfv2-explainer.jpg"
-    autoPlay
-    muted
-    loop
-    playsInline
-    preload="metadata"
-  />
-</Frame>
+
+<DocsVideo
+  title="One idea told four ways, with no footage to start from"
+  src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/faceless-explainer-demo-v1.mp4"
+  poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/faceless-explainer-demo-v1.jpg"
+/>
+
+Kinetic type, an abstract graphic, a diagram, and a data-visualisation — all
+invented from the text. There is no source video anywhere in this.
 
 ## Make the request
 

docs/guides/motion-graphics.mdx

@@ -16,6 +16,15 @@ Use Motion Graphics for one short, design-led idea—usually under ten seconds
   />
 </Frame>
 
+<DocsVideo
+  title="Kinetic type, a count-up, a chart, a logo sting, a lower third"
+  src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/motion-graphics-demo-v1.mp4"
+  poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/motion-graphics-demo-v1.jpg"
+/>
+
+Short beats back to back, because that is what this workflow makes — units of
+motion small enough to drop into something else.
+
 ## Make the request
 
 State the message and the short result:

docs/guides/product-launch-video.mdx

@@ -16,6 +16,16 @@ Give HyperFrames the real URL when the product, website, or brand should appear
   />
 </Frame>
 
+<DocsVideo
+  title="A launch film built by this workflow from huly.io, end to end"
+  src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/product-launch-huly-v4.mp4"
+  poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/product-launch-huly-v4.jpg"
+/>
+
+Built by running this workflow on a real site. The screens are captured from
+huly.io, not mocked — which is the point: you give it a URL and it works from
+what is actually there.
+
 ## Make the request
 
 Give the agent the real product URL and the result you want:

docs/guides/slideshow.mdx

@@ -6,18 +6,6 @@ description: "Build a navigable deck with reveals, notes, optional branches, hot
 
 A HyperFrames slideshow stays interactive. The result is a live, navigable deck—not a linear MP4.
 
-<Frame caption="A real deck: points reveal, slides advance, a hotspot opens optional detail, then the presenter returns to the main story.">
-  <video
-    className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900"
-    src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/wfv2-slideshow-v4.mp4"
-    poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/wfv2-slideshow.jpg"
-    autoPlay
-    muted
-    loop
-    playsInline
-    preload="metadata"
-  />
-</Frame>
 
 ## Make the request
 

docs/guides/voice-and-audio.mdx

@@ -25,6 +25,15 @@ understand or feel the video.
   />
 </Frame>
 
+<DocsVideo
+  title="Narration, music ducking under it, and effects landing on the beat"
+  src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/voice-audio-demo-v1.mp4"
+  poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/voice-audio-demo-v1.jpg"
+/>
+
+Turn the sound on for this one — the audio is the subject. You can watch the
+music duck as narration arrives and see each effect land against the waveform.
+
 ## Create a voiceover
 
 Give the agent the approved wording and useful voice direction: