From 9b1232965201baae4764c470edd33878a0c1ceef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20=C3=81ngel?= Date: Wed, 12 Aug 2026 12:04:36 -0400 Subject: [PATCH 1/3] docs: simplify the Catalog overview with a section tour (#3240) * docs: design Catalog overview video * docs: plan Catalog overview video implementation * test: pin Catalog overview montage contract * build: prepare Catalog overview video assets * feat: build Catalog overview montage * feat(docs): add Catalog overview preview loop * docs: simplify the Catalog overview * feat: strengthen Catalog montage selections * feat: showcase requested Catalog components * docs: embed Catalog tour in the HyperFrames player * fix(docs): harden catalog overview delivery * refactor(docs): run Catalog tour from source --- docs/catalog/index.mdx | 90 ++++++++------- docs/snippets/catalog-overview-player.jsx | 133 ++++++++++++++++++++++ 2 files changed, 183 insertions(+), 40 deletions(-) create mode 100644 docs/snippets/catalog-overview-player.jsx diff --git a/docs/catalog/index.mdx b/docs/catalog/index.mdx index 7d42c52931..ea72fdce98 100644 --- a/docs/catalog/index.mdx +++ b/docs/catalog/index.mdx @@ -3,57 +3,67 @@ title: "Catalog" description: "Browse reusable HyperFrames scenes, transitions, captions, overlays, effects, and components." --- -The Catalog is a library of visuals you can add to a project instead of building each one from scratch. +import { CatalogOverviewPlayer } from "/snippets/catalog-overview-player.jsx" -Use a **block** when you want a larger scene or self-contained visual. Use a **component** when you want a smaller effect or behavior inside an existing scene. +The Catalog gives you reusable visuals you can add to a project instead of building each one from scratch. -## Start with the job + + +```html catalog-overview-v3.html + + + + + + + + + + + +``` + + - - Show code being typed, changed, highlighted, scrolled, or transformed. + + Start with a larger scene or self-contained visual. - - Keep speech readable or emphasize selected words without designing a caption system from zero. - - - Move between scenes with a quiet cut treatment or a more expressive transition. - - - Show posts, follow prompts, notifications, names, roles, and platform-inspired cards. - - - Explain a number, comparison, trend, location, or geographic movement. - - - Start from a larger scene that already combines design, media, and animation. + + Add a smaller effect or behavior inside an existing scene. -## Use an item in a real project +## Use an item 1. Open an item and watch the motion preview. -2. Check that its communication job matches the scene. -3. Copy the plain-language request from the item page into your agent chat. -4. Replace the example content with real project content. -5. Match the project's type, color, spacing, and motion language. -6. Review the item inside the complete video, not only in isolation. +2. Copy its plain-language request into your agent chat. +3. Replace the example content, then review it inside your complete video. -The terminal command and source details remain available on each item page for people who need them. - -## Before you keep it - - - A Catalog item is a starting point, not a finished design decision. Keep it only when it makes the scene clearer or faster to understand. Remove decorative motion that competes with the story. - - -Check: - -- Can the viewer understand why the visual is present? -- Is the real content readable at the final size? -- Does its timing fit the scenes around it? -- Does it feel like part of this project rather than a pasted demo? -- Is a quieter alternative more effective? +The tour covers Code Animations, Captions, HTML-in-Canvas, Social Overlays, Lower Thirds, Shader Transitions, CSS Transitions, Showcases, Data, Effects, and Blocks. ## Related topics diff --git a/docs/snippets/catalog-overview-player.jsx b/docs/snippets/catalog-overview-player.jsx new file mode 100644 index 0000000000..6866836e3f --- /dev/null +++ b/docs/snippets/catalog-overview-player.jsx @@ -0,0 +1,133 @@ +export const CatalogOverviewPlayer = ({ title, children }) => { + const [tab, setTab] = useState("preview"); + const [reduced, setReduced] = useState( + () => + typeof window !== "undefined" && + typeof window.matchMedia === "function" && + window.matchMedia("(prefers-reduced-motion: reduce)").matches, + ); + + useEffect(() => { + if (typeof window === "undefined" || typeof window.matchMedia !== "function") return; + + const query = window.matchMedia("(prefers-reduced-motion: reduce)"); + const onChange = (event) => setReduced(event.matches); + query.addEventListener("change", onChange); + return () => query.removeEventListener("change", onChange); + }, []); + + const localDocs = + typeof window !== "undefined" && + (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1"); + const catalogBase = localDocs + ? "https://raw.githubusercontent.com/heygen-com/hyperframes/main/docs" + : ""; + const assetBase = localDocs ? "https://hyperframes.heygen.com" : ""; + const scenes = JSON.stringify([ + { + section: "Code Animations", + catalog: "/public/catalog/blocks/code-particle-assemble.json", + mediaStart: 1.7, + }, + { + section: "Captions", + catalog: "/public/catalog/components/caption-camera-follow.json", + mediaStart: 0.5, + }, + { + section: "HTML-in-Canvas", + video: + "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.mp4", + mediaStart: 9.25, + }, + { + section: "Social Overlays", + catalog: "/public/catalog/blocks/editorial-flash-overlay.json", + mediaStart: 0.35, + }, + { + section: "Lower Thirds", + catalog: "/public/catalog/blocks/lower-third-bild.json", + mediaStart: 0.5, + }, + { + section: "Shader Transitions", + catalog: "/public/catalog/blocks/domain-warp-dissolve.json", + mediaStart: 1.25, + }, + { + section: "CSS Transitions", + catalog: "/public/catalog/blocks/transitions-grid.json", + mediaStart: 4.3, + }, + { + section: "Showcases", + catalog: "/public/catalog/blocks/ai-chat-reveal.json", + mediaStart: 15.85, + }, + { + section: "Data", + catalog: "/public/catalog/blocks/us-map-flow.json", + mediaStart: 4, + }, + { + section: "Effects", + catalog: "/public/catalog/components/parallax-unzoom.json", + mediaStart: 1.6, + }, + { + section: "Blocks", + catalog: "/public/catalog/blocks/hw-pipeline.json", + mediaStart: 1.4, + }, + ]).replace(/<\//g, "<\\/"); + const bootstrap = [ + "", + "", + ' + + + +
+
+
+
+
+
+
+ + + + +``` + + + +{/* hf:generated-footer */} + +Tagged `showcase` `mock-ui` `ai` `chat` `vertical` `ad-template`. + +Created by Jake Moran. + +## Related topics + +- [Browse the complete Catalog](/catalog) +- [Add assets and Catalog items in Studio](/studio/assets-and-blocks) +- [Build a richer composition](/go-further) diff --git a/docs/catalog/blocks/claude-exchange.mdx b/docs/catalog/blocks/claude-exchange.mdx new file mode 100644 index 0000000000..d9983b2284 --- /dev/null +++ b/docs/catalog/blocks/claude-exchange.mdx @@ -0,0 +1,1594 @@ +--- +title: "Claude Exchange" +description: "A portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations and actions" +--- + +import { InstallCommand } from "/snippets/install-command.jsx"; + +