> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-fix-nested-composition-media-inpoint.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Catalog
> Browse reusable HyperFrames scenes, transitions, captions, overlays, effects, and components.
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 = ["", "", '
```
Start with a larger scene or self-contained visual.
Add a smaller effect or behavior inside an existing scene.
## Use an item
1. Open an item and watch the motion preview.
2. Copy its plain-language request into your agent chat.
3. Replace the example content, then review it inside your complete video.
The tour covers Code Animations, Captions, HTML-in-Canvas, Social Overlays, Lower Thirds, Shader Transitions, CSS Transitions, Showcases, Data, Effects, and Blocks.
## Related topics
* [Add Catalog items in Studio](/studio/assets-and-blocks)
* [Build richer compositions](/go-further)
* [Contribute a Catalog item](/contributing/catalog)