Motion graphics

Importing After Effects graphics

In After Effects, export the composition with the Bodymovin or LottieFiles plug-in as a .json or .lottie file, then import it like any other media (drag it into the Media panel). Cue keeps a self-contained copy in the project's graphics folder, so the project still works when the original download is gone.

• Graphics go on video tracks and keep their transparency, so lower thirds and overlays sit on the footage below. Move, scale, keyframe, fade and grade them like any clip; the export draws them at the size they appear, so vector art stays sharp.
• Past its end a graphic holds its last frame, or loops when Loop is on. If the file has a marker named outro (or out), a longer clip holds before it and plays the outro as the clip ends, so a lower third can stay up as long as you need.
• Some exports draw their text from letter shapes stored in the file rather than a font. Those texts are marked in the inspector: you can rewrite them, but only letters that are in the file will show.

Editing text and colours

Select a graphic's clip and the inspector lists its text layers and colours. Type new words into a text layer, or pick a new colour for any colour in the file (every use of it changes). The file itself is not touched: the changes belong to the clip, so two clips of the same graphic can say different things. Clear a field to go back to the original.

Agents do the same with update_clip and motion {text: {layerId: "…"}, colors: {"#from": "#to"}, loop}; list_media shows each graphic's text layers, colours and markers.

The Motion page

For graphics made in Cue, the Motion page (⌥8, or Open in Motion in the inspector) works on one graphic at a time, like an After Effects composition: its layers on the left, a large preview with its own play and scrub, and the picked layer's text, font, colours, position, rotation, opacity, order, entrance and exit on the right. Click a layer on the preview to pick it and drag it to move it. A graphic from a template shows the template's fields; changing any layer directly makes it your own design. Agents change single layers with edit_motion_layer, without the window.

The template library

Open the Library panel and choose Motion graphics for live previews of every template in a theme of your choice. Click one to add it at the playhead; transitions are centred on the playhead so they cover the cut. The inspector then shows the template's own fields: the words, the data, the theme, an accent colour and the length. Every change rebuilds the graphic and is one undo step.

Themes: Midnight, Editorial, Signal, Sunset, Ocean, Mono. Each sets a background, a surface for cards, the text colours and three accents; colors overrides any of them, for example your brand's accent.

The procedural clip transitions (paper tear, signal glitch, ink blot and the rest) are still in the inspector's Transition in section; see Look and motion. The transition templates are designed wipes in your theme's colours that sit on a track above the cut.

Charts and callouts from data

Charts follow their numbers: bars grow to their values, donut slices sweep to their shares and counters land on the exact figure, with a source line under the chart. Agents can also use two shortcuts that take plain data and pick the template:

The palettes map to themes (editorial to editorial, electric to signal, mono to mono), and the result is an ordinary template graphic, edited in the inspector or with update_motion_graphic.

How agents make graphics

An agent works with the same library and the same editor you see. Ask for what you want in words ("a lower third for Maya, Head of Research", "a chart of these four numbers", "a subscribe reminder bottom right") and it will:

1. Look for a fitting template with list_motion_templates, which lists every template's fields with an example, and the themes.
2. Make it with create_motion_graphic {template, params}, placed at startMs or, for a transition, centred on a cut with atCutMs.
3. When no template fits, read get_guide {topic: "motion"} (the spec format, what makes motion look professional, and patterns) and write a spec, often starting from a template's own spec (get_motion_graphic).
4. Look at the result with render_frame at the reveal, the hold and the exit, and fix what looks wrong with update_motion_graphic: new params merge with the old ones, a new spec replaces the graphic.

The motion spec

A spec is a short JSON description that Cue compiles into a Lottie animation. Positions are pixels on the canvas, times are milliseconds and layers are listed bottom to top. This one draws a rule and a two-colour title that rises in, and holds until the clip's end before it fades:

{
  "durationMs": 4000,
  "markers": [{ "name": "outro", "atMs": 3400, "durationMs": 600 }],
  "layers": [
    { "type": "rect", "name": "Bar", "x": 144, "y": 900, "origin": "left",
      "width": 520, "height": 8, "fill": "#ffcc00",
      "enter": { "preset": "grow", "atMs": 0, "durationMs": 700 },
      "exit": { "preset": "fade", "atMs": 3400, "durationMs": 400 } },
    { "type": "text", "name": "Title", "x": 144, "y": 850, "size": 56,
      "runs": [{ "text": "Chapter 2  ", "color": "#ffcc00" }, { "text": "The prototype" }],
      "enter": { "preset": "rise", "atMs": 200, "amount": 40 },
      "exit": { "preset": "fade", "atMs": 3400, "durationMs": 300 } }
  ]
}

What a spec can hold

• Layers: rectangles, ellipses, arcs (donuts and progress rings), lines, SVG paths (icons, logos, pins), text in four bundled typefaces, images and groups.
• Motion: enter and exit presets (fade, rise, slide, grow, pop, draw, type, blur, spin), keyframes with named or custom eases, clip rectangles that text rises out of, counters, typing, and routes a layer follows as a line draws.
• Text: runs set words in different colours or weights on one line, and text is measured with the fonts' own widths; the tools return where each text landed so boxes and underlines fit it.
• Markers: outro marks the exit so the graphic can hold; cut marks the moment a transition covers the frame.

Everything Cue ships is an original design built this way, so any template is a starting point for your own: ask an agent to change it, or to make a new graphic in the same style.