> ## Documentation Index
> Fetch the complete documentation index at: https://docs.goframe.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Motion graphics
> Generate animated titles, lower thirds, charts, countdowns and logo reveals in your project's style, edit them by asking, and prepare them for export
Ask GoFrame Editor Agent for an animated overlay and it writes a motion graphic to order: a title card, a lower third with a speaker's name, a stat that counts up, a countdown, a logo reveal, an end card. The result is a **Motion** clip on the timeline that renders at your project's resolution and follows your project's visual identity.
## Before you start
* **The text and the job.** What the graphic says, what it's for and where it sits in the edit. Colors, fonts and timing come from the project's visual identity, so you don't need to spell them out.
* **A visual identity (recommended).** Run `/visual-identity` once with a few style words. The agent writes a design brief (`DESIGN.md`, visible in the chat's **Workspace** files) with palette, typography, motion personality and a list of things to avoid. Every motion graphic, image and video after that follows it. Without one, the agent uses a built-in clean look.
* **Assets (optional).** A logo or photo in the Media pool that the graphic should use. Reference it with `@`.
* **Credits.** Motion graphics are written by the agent rather than a media model, so there is no per-clip media price; the credits used for the prompt count as agent usage, which you can review in **Settings → Advanced → Usage**.
## Ask the agent
Describe the graphic's purpose, not its pixels. Start with `/motion-graph-gen` or plain language.
```text theme={null}
/motion-graph-gen animated lower-third with the speaker name
```
```text theme={null}
Add a title card at the start: "Quarterly Review" with the subtitle "Q3 2026", 4 seconds, full build and exit.
```
```text theme={null}
Make a stat callout that counts up to 4.2M users. Place it at 0:42 for 5 seconds.
```
```text theme={null}
Logo reveal using @logo.png, 3 seconds, at the end of the timeline.
```
```text theme={null}
Same style as the first lower third, but for "Maya Chen, Head of Design", at 1:10.
```
## Options
| What you can specify | Values |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Type** | Title card, lower third, chapter marker, stat or count-up, chart, logo reveal, countdown, end card, quote, badge, social overlay |
| **Duration** | Any length; 8 seconds if you don't say |
| **Motion style** | Static (watermarks, always-on labels), entrance only (lower thirds, notifications), loop (countdowns, pulsing), full lifecycle (build, hold, resolve; title cards and chapter markers) |
| **Position** | A time ("at 0:42"), a relative spot ("after the intro"), or "at the playhead" |
| **Style source** | The project identity; "same style as" an earlier graphic; "same template, only change the text"; or `/style-ref` an asset or link to borrow its look |
| **Assets** | Images from the Media pool or a URL |
The graphic is written by the agent's editing model (Claude Sonnet 5 by default). The agent renders frames of the graphic and looks at them before reporting back; if something is off (a color, spacing, timing), it fixes the graphic and re-renders, then tells you what's left to adjust.
## Where the result lands and what to do next
* The graphic is registered in the **Media pool** (filter chip **Motion**) and placed on a video track above your footage at the time you asked for.
* A **Motion graphics** job card shows progress in the chat.
* Select the clip and adjust it like any other: **Position**, **Layout**, **Opacity**, **Animate** presets and keyframes in the [Inspector](/editor/inspector). It re-renders at whatever size you give it.
* Change it by asking: "make the lower third smaller and move it left", "slow the count-up down", "swap the logo". Reuse it: "duplicate this for every speaker".
### Get it ready for export
Motion graphics are rendered frame by frame when you export, like burned-in captions, which makes the export slower than usual. Two ways to handle it:
* Turn on **MG optimization** in the Media pool. It bakes motion graphics to video in the background, and the **Background tasks** popover in the top bar shows the job while it runs, so the export itself is quicker.
* Or just export. The **Export Settings** dialog notes that the export will be slower, prepares the graphics and then renders.
Motion-graphics layers are not carried into **Project for editing (NLE)** exports; the dialog says so and asks you to recreate them in your editor. Export a video file instead, or export the graphic's section as a video clip and bring that into Final Cut Pro, Premiere Pro or Resolve. See [Export for Final Cut, Premiere and Resolve](/editor/export-for-nle).
## A quicker alternative: Text FX
For a simple animated text reveal you don't need a generated graphic. Add a text clip (`T`), open **Text FX** in the Inspector, choose **By word**, **By letter** or **Scramble**, set the **Reveal** length in seconds and the **Easing**, then click **Convert to text reveal**. The conversion is reversible from the new clip; existing keyframes aren't carried over. See [Text and shapes](/editor/text-and-shapes) and [Animate clips](/editor/animation-and-keyframes).
## Tips
* Say what it's for. "A lower third for the CEO in a serious investor update" gets a better result than "a blue lower third".
* Batch related graphics in one message ("a lower third for each of these three speakers") and the agent makes them in one go, in one style.
* If you don't like the look, change the identity, not the single graphic: "make the visual identity warmer and more playful", then regenerate.
* Check the graphic paused, not just in motion. A title must read as a still frame.
## Related
* [Text and shapes](/editor/text-and-shapes)
* [Animate clips with presets and keyframes](/editor/animation-and-keyframes)
* [Export video](/editor/export)
* [Skills and workflows](/editor/skills)