Skip to main content
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

Code animations

Show code being typed, changed, highlighted, scrolled, or transformed.

Captions

Keep speech readable or emphasize selected words without designing a caption system from zero.

Transitions

Move between scenes with a quiet cut treatment or a more expressive transition.

Social overlays

Show posts, follow prompts, notifications, names, roles, and platform-inspired cards.

Data and maps

Explain a number, comparison, trend, location, or geographic movement.

Showcase scenes

Start from a larger scene that already combines design, media, and animation.

​
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

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