docs: four more guides show the thing instead of describing it

HTML in Canvas, MCP, Skills, and Images and video all had nothing to look at.

**HTML in Canvas** puts a real HTML dashboard beside the same pixels running as a
live WebGL texture, bent by a shader while the DOM underneath keeps updating and
the texture re-captures every frame. That is the whole feature in one shot.

**MCP** is an honest reconstruction and says so on screen for its full length —
"Illustration of the flow". It could not reach a live connector, so it does not
pretend to have one. Describe the video, revise it in plain language, ask for a
format, get the render.

**Skills** shows a real run of the install command, then the router reading two
different requests and picking a different workflow for each.

**Images and video** walks the five basic moves — import, place, crop, trim, swap
the source — adding one attribute at a time on the left with the result on the
right. It serves both /guides/media and /guides/video-components.

All four carry a music bed from HeyGen's own catalogue at about -22 dB. Each was
checked on a contact sheet before publishing, not taken on the session's word.

Blind guides: 15 down to 9.

docs/guides/html-in-canvas.mdx

@@ -3,10 +3,22 @@ title: "HTML in Canvas"
 description: "Use live DOM content as a texture for WebGL and canvas effects."
 ---
 
+import { DocsVideo } from "/snippets/docs-video.jsx";
+
 HTML in Canvas uses Chrome's experimental `drawElementImage()` API to copy rendered DOM content into a canvas. That canvas can become a Three.js texture or the input to a shader effect.
 
 Use it when the visual treatment depends on both real HTML and GPU effects—for example, an interface inside a 3D device or a DOM scene passing through a distortion shader. It is an advanced, browser-dependent technique.
 
+<DocsVideo
+  title="Your dashboard, drawn as a live WebGL texture while its numbers keep updating"
+  src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/html-in-canvas-demo-v1.mp4"
+  poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/html-in-canvas-demo-v1.jpg"
+/>
+
+The left panel is ordinary HTML and CSS. The right is the same pixels inside a
+WebGL scene — bent and lit by a shader, while the DOM underneath keeps changing
+and the texture re-captures every frame.
+
 ## Start with a proven block
 
 The fastest path is to install a Catalog block that already handles capability detection and fallback behavior:

docs/guides/mcp.mdx

@@ -3,6 +3,8 @@ title: "Create through an AI chat"
 description: "Use the hosted HyperFrames MCP connector to create and render without installing the local CLI."
 ---
 
+import { DocsVideo } from "/snippets/docs-video.jsx";
+
 HyperFrames MCP is a hosted connector for supported AI chat products. It lets
 the chat call HyperFrames creation and rendering tools through your HeyGen
 account without installing the local CLI.
@@ -12,6 +14,16 @@ account without installing the local CLI.
   can change.
 </Note>
 
+<DocsVideo
+  title="Making and revising a video inside an AI chat, then rendering it"
+  src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/mcp-flow-demo-v1.mp4"
+  poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/mcp-flow-demo-v1.jpg"
+/>
+
+An illustration of the flow, labelled as such on screen — describe the video,
+revise it in plain language, ask for the format you need, and the render comes
+back. Nothing is installed locally.
+
 ## Choose hosted or local
 
 Use the hosted connector when you want:

docs/guides/media.mdx

@@ -4,10 +4,21 @@ sidebarTitle: "Overview"
 description: "Use footage, images, audio, captions, backgrounds, and color in a HyperFrames project."
 ---
 
+import { DocsVideo } from "/snippets/docs-video.jsx";
+
 Media can come from your project, a captured website, an upload, or a generated
 asset. Put anything required for the final result inside the project so preview
 and rendering use the same file.
 
+<DocsVideo
+  title="The five basic moves: import, place, crop, trim, and swap the source"
+  src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/media-basics-demo-v1.mp4"
+  poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/media-basics-demo-v1.jpg"
+/>
+
+Each step adds one attribute on the left and shows the result on the right. The
+last one swaps the file entirely — everything else about the scene stays put.
+
 ## Start with the role, not the effect
 
 | Media           | Give it one main job                       |

docs/guides/skills.mdx

@@ -4,8 +4,20 @@ sidebarTitle: "Agent skills"
 description: "Teach a coding agent how to create valid HyperFrames projects and load specialized workflows when needed."
 ---
 
+import { DocsVideo } from "/snippets/docs-video.jsx";
+
 HyperFrames skills teach coding agents the project format, animation rules, media workflow, validation loop, and creation workflows that generic web knowledge does not cover.
 
+<DocsVideo
+  title="One command installs the skills, and the router picks the workflow"
+  src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/skills-install-demo-v1.mp4"
+  poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/skills-install-demo-v1.jpg"
+/>
+
+The terminal output is a real run of the command. Afterwards the router reads a
+request and chooses the workflow for it, instead of the agent guessing at the
+framework's rules.
+
 ## Install for a person
 
 Run the interactive installer:

docs/guides/video-components.mdx

@@ -4,6 +4,8 @@ sidebarTitle: "Images and video"
 description: "Import, place, replace, trim, and review images and footage in a HyperFrames project."
 ---
 
+import { DocsVideo } from "/snippets/docs-video.jsx";
+
 Images and footage should enter the project once, remain easy to identify, and
 behave the same in preview and the final render.
 
@@ -19,6 +21,15 @@ behave the same in preview and the final render.
   />
 </Frame>
 
+<DocsVideo
+  title="The five basic moves: import, place, crop, trim, and swap the source"
+  src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/media-basics-demo-v1.mp4"
+  poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/media-basics-demo-v1.jpg"
+/>
+
+Each step adds one attribute and shows the result. The last swaps the source
+file; the crop, timing and placement around it stay exactly as they were.
+
 ## Import a file
 
 In Studio: