# How do motion graphics and layers work in Vidiyo?

Canonical URL: https://getvidiyo.app/docs/motion-and-layers
Last updated: 2026-10-08

> TL;DR: Everything on the canvas is a layer: clips, text, shapes, captions and motion scenes, stacked top row on top. Add text and shapes from the bar over the preview, animate them with In and Out presets or keyframes, and pick easing per key. Ask the assistant for motion scenes such as lower thirds, counters and charts, timed to your words.

Vidiyo has two kinds of motion: layers you animate by hand with keyframes, and motion scenes the assistant builds for richer graphics. Both render the same way in preview and export.

## How are layers stacked?

The timeline lists picture layers top of the stack first, so a higher row draws on top. Text and shapes each get their own row. A video track is one row holding its clips. Audio tracks sit below. Use **Bring forward** and **Send backward** at the top of a layer's inspector to restack.

## How do I add text and shapes?

Use the floating bar over the preview. It adds text (**T**), a rectangle (**R**), an ellipse (**O**), a line (**L**), an arrow, or SVG line art at the playhead. Click a layer on the preview to select it, drag to move it and drag a corner to scale it.

Looks are in the inspector's **Style** section: text switches between Title, Subtitle, Editorial and Label; a rectangle between Solid, Pill and Gradient card; an ellipse between Solid and Glow. Shapes take solid or gradient fills, borders, corners and shadows.

## How do I animate a layer?

Use **Animate** for quick entrances and exits, or **Transform** keys for anything custom.

- **Animate** has In and Out presets: fade, slide, pop, zoom and shrink. Presets write ordinary keys you can edit.
- **Transform** has X, Y, Scale, Rotation and Opacity, each with ‹ ◇ ›. Click ◇ to add a key at the playhead, or remove the key that's there. ‹ and › jump between keys.
- Once a property has a key, changing it anywhere adds a key there. A gold label means the property is animated; a filled ◆ means the playhead is on a key.

## How do I set easing?

Click a key on the timeline and choose its easing. The selected layer shows a lane per animated property under its row. Pick a ◆ and choose linear, ease, ease in, ease out, overshoot or hold. Drag a key to move it in time.

## What are motion scenes?

Motion scenes are animated graphics the assistant inserts and you fine-tune. Ask for one in chat: "Add a lower third with my name," "Count up to 160 GB when I say it," or "Draw a circle around the signup button." The assistant starts from a template (lower thirds, titles, numbers, charts, annotations, calls to action, kinetic type) or writes its own. Once placed, a scene shows on the timeline and its copy, colors, timing and beats are edited in the inspector.

A scene sits either under the speaker (between the background and the video) or over the speaker (under captions). Beats can anchor to transcript words, so a counter lands on the word.

## How do animated layouts work?

Layouts can move the speaker. The speaker can ease into a rounded card above or below the frame, or into a round bubble in a corner, over a brand-colored background, with the face kept in frame and captions following the layout. Ask: "Put me in a card at the bottom and show the chart above me."

## Why does a motion scene look blank in preview?

Scenes render frame by frame in the background after each edit. Preview skips a frame that isn't ready yet, so a new scene can take a moment to appear. Export never skips: if a scene fails to render, export stops with that scene's error instead of exporting a blank.

## How do brand colors reach graphics?

The **Brand** tab holds the project look: colors, heading and body fonts, subtitle style and a scene motif. Text, shapes and motion scenes linked to the brand update together when you change it, in one undo step. Setting a linked value by hand unlinks only that value.

## Steps

1. Click T, R, O or L on the bar over the preview to add text, a rectangle, an ellipse or a line at the playhead.
2. Pick a look in the inspector's Style section.
3. Add an In and Out animation in the Animate section, or click ◇ next to a Transform property to set a key.
4. Move the playhead, change the value, and Vidiyo adds the next key.
5. Click a key on the timeline to set its easing, or ask the assistant for a motion scene.

## Frequently asked questions

### Can the AI edit layers I made by hand?

Yes. The assistant uses the same layer and keyframe model as the inspector, and anything it creates stays editable by hand. It can animate, re-key and restack layers.

### What motion graphics can Vidiyo make?

Lower thirds, titles, number counters, charts, hand-drawn annotations like arrows and circles, calls to action and kinetic type. They're HTML scenes rendered frame by frame, and their beats can be pinned to the words you say.

### Do graphics stay in sync if I cut the video?

Motion scene beats anchored to transcript words follow those words through trims and deleted pauses. If the anchor word is cut, the beat falls back to its default time.

### Is there a cursor-follow zoom for screen recordings?

No. Zooms are keyframed punch-ins and push-ins on a clip. The assistant can place them on the lines or UI moments you name.

## Related

- [Motion graphics without After Effects](https://getvidiyo.app/features/motion-graphics)
- [Layers and keyframes, by hand or by chat](https://getvidiyo.app/features/layers-and-keyframes)
- [Keyframe](https://getvidiyo.app/glossary/keyframe)
- [Easing](https://getvidiyo.app/glossary/easing)
- [Lower third](https://getvidiyo.app/glossary/lower-third)
- [Punch-in zoom](https://getvidiyo.app/glossary/punch-in-zoom)

Request access to the Vidiyo beta: https://getvidiyo.app/request