From 8762887a5b3773f460fa61e017d870f68f5d540a Mon Sep 17 00:00:00 2001 From: ukimsanov Date: Tue, 4 Aug 2026 02:55:06 -0700 Subject: [PATCH] docs: four more guides show the thing instead of describing it MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 12 ++++++++++++ docs/guides/mcp.mdx | 12 ++++++++++++ docs/guides/media.mdx | 11 +++++++++++ docs/guides/skills.mdx | 12 ++++++++++++ docs/guides/video-components.mdx | 11 +++++++++++ 5 files changed, 58 insertions(+) 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: