mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
ukimsanov
6fe5b4f82a
Adds the pages the rebuilt navigation is organised around, and moves the sidebar onto that structure. Every entry points at a file that exists after this commit; nothing is rewritten or removed yet, and no redirect is claimed yet. - Studio (13 pages) — the editor had no section of its own - One guide per creation workflow, matching the shipped agent skills - Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help, Go further, Product updates, 30 Days of HyperFrames Pages a later commit retires drop out of the sidebar here but still exist and still resolve, so the site stays navigable at this commit. Incidentally fixes a link to /concepts from the Lambda migration guide that is broken on main today — the destination did not exist.
63 lines
2.7 KiB
Plaintext
63 lines
2.7 KiB
Plaintext
---
|
|
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.
|
|
|
|
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.
|
|
|
|
## Start with the job
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Code animations" icon="code" href="/catalog/blocks/code-typing">
|
|
Show code being typed, changed, highlighted, scrolled, or transformed.
|
|
</Card>
|
|
<Card title="Captions" icon="closed-captioning" href="/catalog/components/caption-highlight">
|
|
Keep speech readable or emphasize selected words without designing a caption system from zero.
|
|
</Card>
|
|
<Card title="Transitions" icon="arrows-left-right" href="/catalog/blocks/cinematic-zoom">
|
|
Move between scenes with a quiet cut treatment or a more expressive transition.
|
|
</Card>
|
|
<Card title="Social overlays" icon="share-nodes" href="/catalog/blocks/x-post">
|
|
Show posts, follow prompts, notifications, names, roles, and platform-inspired cards.
|
|
</Card>
|
|
<Card title="Data and diagrams" icon="chart-column" href="/catalog/blocks/data-chart">
|
|
Explain a number, comparison, trend, location, or geographic movement.
|
|
</Card>
|
|
<Card title="Complete scenes" icon="play" href="/catalog/blocks/app-showcase">
|
|
Start from a larger scene that already combines design, media, and animation.
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
## Use an item in a real project
|
|
|
|
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.
|
|
|
|
The terminal command and source details remain available on each item page for people who need them.
|
|
|
|
## Before you keep it
|
|
|
|
<Note>
|
|
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.
|
|
</Note>
|
|
|
|
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?
|
|
|
|
## Related topics
|
|
|
|
- [Add Catalog items in Studio](/studio/assets-and-blocks)
|
|
- [Build richer compositions](/go-further)
|
|
- [Contribute a Catalog item](/contributing/catalog)
|