diff --git a/docs/guides/html-in-canvas.mdx b/docs/guides/html-in-canvas.mdx
index fb2ce6a71..1a148227a 100644
--- a/docs/guides/html-in-canvas.mdx
+++ b/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.
+
+
+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:
diff --git a/docs/guides/mcp.mdx b/docs/guides/mcp.mdx
index f960d48c6..c7d12d0e4 100644
--- a/docs/guides/mcp.mdx
+++ b/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.
+
+
+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:
diff --git a/docs/guides/media.mdx b/docs/guides/media.mdx
index bef39fee7..3e13dae9e 100644
--- a/docs/guides/media.mdx
+++ b/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.
+
+
+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 |
diff --git a/docs/guides/skills.mdx b/docs/guides/skills.mdx
index b0777b322..c00630a30 100644
--- a/docs/guides/skills.mdx
+++ b/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.
+
+
+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:
diff --git a/docs/guides/video-components.mdx b/docs/guides/video-components.mdx
index a1734a103..b9c382d37 100644
--- a/docs/guides/video-components.mdx
+++ b/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.
/>
+
+
+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: