> ## 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.

# Reuse Catalog visuals

> Add a ready-made scene or effect, then adapt its content, design, and timing to the project.

The [Catalog](/catalog) contains reusable scenes, captions, transitions, overlays, maps, effects, and code visuals.

Use an item as a starting point when it already solves the visual job. Do not add one only because it looks impressive in isolation.

## Blocks and components

|                       | Block                          | Component                      |
| --------------------- | ------------------------------ | ------------------------------ |
| Purpose               | A larger, self-contained scene | A smaller effect or behavior   |
| Own size and duration | Usually                        | No; it adapts to its host      |
| Example               | Data chart or social post      | Caption style or grain overlay |

If you do not know which type you need, choose by outcome and let the agent handle the source structure.

## Add an item

Open its Catalog page and copy the suggested agent request:

```text theme={null}
Add the Data Chart block from the HyperFrames Catalog to this project.
Replace the demo content with mine and match the existing design and timing.
```

Or install it from the project folder:

```bash theme={null}
npx hyperframes add data-chart
```

The command writes the item into the project. Blocks are included as compositions; components provide a snippet or effect that is applied inside another composition.

## Make it belong

After adding an item:

1. Replace all demo text, numbers, images, and branding.
2. Match the project’s type, color, spacing, and visual weight.
3. Adjust its duration to the surrounding narration and scenes.
4. Remove decorative motion that competes with the message.
5. Review the complete sequence, not only the item by itself.

The Catalog preview proves what the item can do. It does not prove that the default treatment fits your video.

## Add one in Studio

Open **Catalog** in the left sidebar.

Some items can be inserted directly with **Add**. Others provide a prepared message for your agent because they need source-level integration or adaptation.

See [Use Assets and Catalog](/studio/assets-and-blocks).

## Contribute an item

Reusable visuals should be deterministic, self-contained, documented, and useful beyond one project.

Use [Contributing to the Catalog](/contributing/catalog) for the registry structure, validation, previews, and pull-request requirements.