> ## Documentation Index > Fetch the complete documentation index at: https://docs.visualradioassist.live/llms.txt > Use this file to discover all available pages before exploring further. > ## Agent Instructions > Use the names from the glossary at https://docs.visualradioassist.live/glossary: Audio Manager (two words), command (never commando), on air and off air (never live) for programs and studios, and server apps for the VRA apps installed in the studio. > Say which app an answer applies to, like VRA Cloud, the Core or the Output Player, and the version when the page names one. > Only give settings, values and steps that are in these docs. Never invent one. If the docs don't cover it, say so. > When the docs don't answer the question, send the user to Visual Radio Assist support at https://cloud.visualradioassist.live/support. # Layer types > Every layer type in the Visual Designer, from text and shapes to video, slideshows and playlists, with the settings each one has. A visual is built from layers. Open the **Layer catalog** with **Add layer** to pick one. The catalog groups the types in **Basics**, **Media**, **Data** and **Advanced**. This page lists every type and the settings that are its own. How to add and arrange layers is in [Design your first visual](https://docs.visualradioassist.live/getting-started/design-your-first-visual.md). ## Layer settings in the inspector Select a layer and the inspector shows its settings in panes. Which panes and fields show depends on the layer type: | Pane | What it holds | | - | - | | **Layer** | Alignment, **Fill canvas**, **X position**, **Y position**, **Width**, **Height** and **Fit** | | **Layout** | **Justify** and **Align** for text, stacks and playlists, **Direction** and **Gap** for stacks, **Padding**, and **Sizing** to let the layer grow with its content | | **Styles** | **Border** and **Radius**, plus **Fill** and **Shadow** on text, shapes and stacks | | **Transforms** | **Rotate** and **Flip** | | **Conditions** | **Layer visible**, and conditions on live data that decide when the layer shows | | **Animations** | **Open animation editor**, see [Animations](https://docs.visualradioassist.live/visual-designer/animations.md) | | **Advanced** | A CSS ID and CSS classes, for [custom code](https://docs.visualradioassist.live/develop-with-vra/develop-visual-graphics.md) | Colors in **Styles** can link to a [brand color](https://docs.visualradioassist.live/visual-designer/brand-colors.md). ## Basic layers * **Text** - Text you type, with [live data](https://docs.visualradioassist.live/visual-designer/insert-data.md) as chips. **Typography** sets the [text style](https://docs.visualradioassist.live/visual-designer/text-styles.md), or with **Custom** the font, weight, size, alignment and color. **Fallback content** shows when the live data is empty. * **Shape** - A **Rectangle**, **Square** or **Circle** with a fill and border. * **Container** - Groups layers. Use it to style or animate them together, or to clip an animation. * **Stack** - Groups layers in a row or column. Each layer takes its place in the stack, so the group adapts when a text grows. Text and HTML layers can scroll as a ticker. Click **Add ticker effect** and set the **Speed**. The Output Player runs at 1080/25p, so check the preview for readability above a speed of 80%. ## Media layers * **Image media** - An image from your [Media Hub](https://docs.visualradioassist.live/media-hub.md). * **Video media** - A video. **Media Type** is **Selected Media** from the Media Hub, **Selected Raw Media**, **Link to Variable** or **URL**. A URL plays an MP4 or WebM file, an HLS stream or a DASH stream. **Video playout settings** set **Loop**, **Autoplay**, **Keep playing in background** and **Restart when visible**. * **Dynamic media** - An image that follows live data or a URL, see [Show a live image](https://docs.visualradioassist.live/visual-designer/insert-data.md#show-a-live-image-in-a-visual). * **Scheduling media** - The image of a program or its presenter from [Scheduling](https://docs.visualradioassist.live/scheduling.md). Pick the program under **Selected Scheduling Program**, from **Current on air program** to **5th Next program**, and the **Media Type**. * **Image slideshow** - Rotates through images from files or a Media Hub folder. Set the **Duration** per image and **Randomize Order**. * **Album cover** and **Artist cover** - The art of the track on air or a next track, from your radio automation data. Album cover, Artist cover, Scheduling media and Dynamic media take a fallback image for when the data has no image. ## Data layers * **Iterator** - Repeats its layers for each item in a list, from an [API data source](https://docs.visualradioassist.live/api-data-sources.md) and a **Data Selector**. * **Playlist** - Shows items one after the other. In **Sublayers** mode each item is a set of layers. In **Data selector** mode the items come from an API data source, the Media Hub or a data field. Set the **Duration** per item, at least 500 ms, and the **Initial delay** before every loop. * **Snippet** - A [visual snippet](https://docs.visualradioassist.live/output-settings.md#visual-snippets), sized to the layer. ## Advanced layers * **Bodymovin** - An After Effects animation, see [Bodymovin / Lottie animation layer](https://docs.visualradioassist.live/visual-designer/bodymovin-lottie-animation-layer.md). * **Svg** and **Html** - Your own SVG or HTML code, edited in the **Code Layer Editor**. HTML layers can use live data. JavaScript in an HTML layer does not run. Use the visual's code editor instead. * **Visual** - Another visual inside this one. Use it to reuse a part, like a logo bug. **Edit visual** opens it. ## Base layers Base layers sit in every visual of a station, like a station logo. They show in the layers panel under **Base layers**, with an eye to hide them while you design. Set them up in [Output settings](https://docs.visualradioassist.live/output-settings.md#base-layers). ## Related * [Design your first visual](https://docs.visualradioassist.live/getting-started/design-your-first-visual.md) * [Insert live data](https://docs.visualradioassist.live/visual-designer/insert-data.md) * [Designer controls and shortcuts](https://docs.visualradioassist.live/visual-designer/designer-controls.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.