---
title: "Your first material"
description: "Lesson 11.1 of Creator Terminal's lesson films (Materials): Give a meditation app's hero a living backdrop, a Mesh in the brand's colours, drawn on the GPU."
canonical: "https://terminal.lottiefiles.com/your-first-material/"
last_updated: 2026-11-03
---

# Your first material

> Lesson 11.1 of Creator Terminal's lesson films (Materials): Give a meditation app's hero a living backdrop, a Mesh in the brand's colours, drawn on the GPU.

- The film (1:00): https://terminal.lottiefiles.com/media/11.1-your-first-material/8768e9d4921f/11.1-your-first-material.mp4
- Vertical cut: https://terminal.lottiefiles.com/media/11.1-your-first-material/7b48203a6b4b/11.1-your-first-material-vertical.mp4
- Captions: https://terminal.lottiefiles.com/media/11.1-your-first-material/4168e7933e83/11.1-your-first-material.vtt
- The page: https://terminal.lottiefiles.com/your-first-material/
- The document the film opens: https://terminal.lottiefiles.com/media/11.1-your-first-material/6bb02b423c3e/hero.ctd

## Step by step

In this tutorial you'll give a meditation app's website hero a living backdrop: a Mesh, soft pools
of colour drifting into each other behind its words. It's your first material. A material is a
look for a shape or text layer that Creator Terminal draws on your computer's graphics chip (the
GPU), on the stage and in videos, and it moves on its own as the animation plays.

### Before you start

- Creator Terminal, installed and open ([Install Creator Terminal](/install/)).
- A document with something to put a backdrop behind. The film's is a hero ten seconds long: a
  headline, a line and a button that rise in over a flat page.
- A GPU with 16-bit floats in its shaders: an Apple silicon Mac's, or most recent ones on Windows
  and Linux. Without one, the layer is drawn plain, and the rail says why.

### 1. Play the flat page

Press `0` to go to the first frame, then `space` to play. The words rise in, but the page behind
them is one flat colour. Press `space` again to stop.

The page is on the stage (the canvas, in other tools), in the middle of the window. The rail on
the right (the Properties panel, in After Effects or Figma) shows what's selected, and the score
(the timeline) runs underneath.

![Creator Terminal with the hero on the stage, flat behind its words, the rail on the right and the score below.](https://terminal.lottiefiles.com/media/11.1-your-first-material/1ec0b45ea8a8/your-first-material-creator-terminal-with-the-hero-on-the-stage.webp)

### 2. Add a Mesh backdrop

Press `⇧Z` (Shift and Z) for a material, then click anywhere on the stage. A click makes a
backdrop: a rectangle the size of the stage, under everything else, wearing Mesh. (Dragging a box
instead makes a smaller rectangle.) It's also **Material** in the **CREATE** list on the left.

The backdrop is dark for now. The first time on a computer, its look can take a few seconds to
appear.

![The Mesh backdrop under the hero's words, dark at first, its handles at the stage's corners.](https://terminal.lottiefiles.com/media/11.1-your-first-material/83fa836a2ca9/your-first-material-the-mesh-backdrop-under-the-hero-s-words.webp)

### 3. Set the brand's colours

The rail now shows the backdrop, **Rectangle 1**. Its material is further down: click **↓ more**
at the foot of the rail, or scroll over it. Under **Material**, the look reads **◂ Mesh ▸**, and
three colours follow it: **Base**, **Tint** and **Light**.

1. Click the value beside **Base**, type `#0e1430`, a deep navy, and press Return.
2. Click the value beside **Tint**, type `#2f5bd3`, a blue, and press Return.
3. Click the value beside **Light**, type `#c98bf0`, a soft lilac, and press Return.

The stage changes with each one. The rows under the colours set how the Mesh moves: **Loops**,
how many times it goes round over the layer's time (0 keeps it still), then **Scale**, **Angle**
and **Intensity**.

![The rail's Material rows: Mesh, with Base, Tint and Light set to the brand's navy, blue and lilac.](https://terminal.lottiefiles.com/media/11.1-your-first-material/d62ce4a19d92/your-first-material-the-rail-s-material-rows-mesh-with-base.webp)

### 4. Let it breathe

Press `esc` twice, so nothing is selected, then `0` and `space`. The colour breathes and drifts
behind the words as they rise in. Press `space` again to stop.

![The hero playing, its Mesh backdrop drifting in blue, lilac and teal behind the words.](https://terminal.lottiefiles.com/media/11.1-your-first-material/785413650aab/your-first-material-the-hero-playing-its-mesh-backdrop-drifting-in.webp)

Players (the apps and web pages that play Lottie files) draw the backdrop's plain fill, not its
material, and the rail says so under **Material**: **players draw it plain**. So for the website,
export it as a video. Click **↓ export** at the top of the rail and pick **MP4** or **WebM** under
**Video**. GIF, WebP, APNG and PNG frames carry the look too.

### What you learned

- A material is a look drawn on the GPU, on the stage and in videos and pictures.
- `⇧Z` and a click put a Mesh backdrop under everything; **Base**, **Tint** and **Light** set its
  colours.
- Players draw the layer plain, so export a video to keep the look.

[Materials](/docs/layers/materials/) in the manual has all twelve looks and their controls. Next,
[Glass that merges](/glass-that-merges/).

## In this lesson

### A flat page (0:07)

Here's the hero for a meditation app's website. Press zero, then space. The words come in, but the page behind them is flat. Space again stops it.

### A backdrop (0:19)

Press Shift-Z, and click the stage. A Mesh backdrop goes in under everything, soft pools of colour drifting into each other. Dark for now.

### The brand's colours (0:29)

Let's give it the brand's colours. In the rail, click more. Click Base, and type a deep navy. Then Tint, a blue. And Light, a soft lilac.

### Let it breathe (0:41)

Press escape twice, then zero, and space. The colour breathes behind the words. Players draw the plain shape, so export it as a video, for the page.