mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 18:01:20 +08:00
ukimsanov
59 lines
2.6 KiB
Plaintext
59 lines
2.6 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 maps" icon="chart-column" href="/catalog/blocks/data-chart">
|
|
Explain a number, comparison, trend, location, or geographic movement.
|
|
</Card>
|
|
<Card title="Showcase 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?
|
|
|
|
[Learn how to add Catalog items in Studio →](/studio/assets-and-blocks)
|