> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-codex-docs-human-first-refactor.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.

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)