> ## Documentation Index
> Fetch the complete documentation index at: /llms.txt
> Use this file to discover all available pages before exploring further.
# Lottie Character Walk
> A jointed flat character walks in on planted feet, stops and points at a card; the body acting is a Lottie file and the stage is GSAP.
# Lottie Character Walk
A jointed flat character walks in on planted feet, stops and points at a card; the body acting is a Lottie file and the stage is GSAP.
**Lottie Character Walk**
```html lottie-character-walk.html
lottie-character-walk
Meet your guide
Walks in on planted feet, then points the way.
```
Copy npx hyperframes add lottie-character-walk to the clipboard
That writes `compositions/lottie-character-walk/lottie-character-walk.html`, plus 1 supporting file under `compositions/lottie-character-walk/assets/`.
## Add it to your video
It runs for 7.5 seconds at 1920×1080. Paste this into your composition:
```html index.html
```
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes.md) for the rest.
## Variables
Every one of these has a default, so the piece works untouched. Set the ones you
want to change on the element:
| Variable | Default | Accepts | What it does |
| - | - | - | - |
| `title` | `Meet your guide` | string | |
| `body` | `Walks in on planted feet, then points the way.` | string | |
Set them with `data-variable-values` on the element that mounts it. These are the
defaults, so this behaves exactly like the preview above until you change one:
```html wrap
```
{/* hf:generated-footer */}
Tagged `character` `character-animation` `mascot` `walk-cycle` `gesture` `pointing` `puppet` `lottie` `explainer`.
## Related topics
* [Browse the complete Catalog](/catalog.md)
* [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md)
* [Put blocks together into one video](/concepts/compositions.md)