> For the complete documentation index, see [llms.txt](https://help.craftsmanplus.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.craftsmanplus.com/play/layers/components.md).

# Components

Components are prebuilt interactive layers that add common playable features to your project without any custom development. Where standard layers hold a single piece of content (an image, a video, a text block), a Component packages content, layout, and behavior together — a swipeable carousel, a live progress bar, a countdown clock — and exposes its options in the Properties panel.

Use Components when you need a proven interactive pattern fast: product galleries, scrollable content areas, score and timer displays, embedded web content, and more.

### Adding a Component

Click the **+** button to open the **Add Layer** menu and choose **Component**, or press the **`C`** hotkey. A gallery dialog opens listing the components available on your account, each with a description and preview. Select one and it's added to your current scene as a Component layer.

Once added, a Component behaves like any other layer: position and resize it on the artboard, set its timeline section, and add Enter and Exit animations. Component-specific options appear in the **Component** section of the Properties panel.

Some components contain their own child layers (arrows, bars, text elements, cards). To work with those, hover the Component in the Layers panel and click **Edit** to enter the component's edit mode.

### Component Library

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><h4><strong>iFrame</strong></h4></td><td>Embeds external web content — hosted pages, embed snippets, or uploaded HTML/ZIP creatives — directly inside your playable.</td><td><a href="/play/layers/components/iframe.md">iFrame</a></td></tr><tr><td><h4><strong>Carousel</strong></h4></td><td>A swipeable card gallery with automatic layout, arrows, guide animation, and auto-scroll options.</td><td><a href="/play/layers/components/carousel.md">Carousel</a></td></tr><tr><td><h4><strong>Scrollable</strong></h4></td><td>A scrollable container that lets users drag to explore content extending beyond its visible bounds.</td><td><a href="/play/layers/components/scrollable.md">Scrollable</a></td></tr><tr><td><h4><strong>Progress Bar</strong></h4></td><td>A variable tracker rendered as an animated fill bar — score, health, moves, or timers.</td><td><a href="/play/layers/components/progress-bar.md">Progress Bar</a></td></tr><tr><td><h4><strong>Progress Text</strong></h4></td><td>A variable tracker rendered as live-updating text, with percent, total, and formatting options.</td><td><a href="/play/layers/components/progress-text.md">Progress Text</a></td></tr><tr><td><h4><strong>Countdown</strong></h4></td><td>A days/hours/minutes/seconds countdown to a specific date and time.</td><td><a href="/play/layers/components/countdown.md">Countdown</a></td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.craftsmanplus.com/play/layers/components.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.