Motion Graphics
AI-generated 2D motion graphics including lower thirds, title cards, kinetic typography, and animated shapes.
Overview
The Motion Graphics node uses an LLM (configurable via the model selector — any of the shared LLM registry’s models, Claude Sonnet by default) to generate a plan for 2D motion graphics compositions. It supports lower thirds, title cards, kinetic typography, animated shapes, and SVG path animations. A live preview is available in the config panel. Maximum duration is 60 seconds.
Reasoning-capable models additionally show an Effort selector next to the model picker (Auto by default — the vendor default, no charge change). xhigh/max bill one tier up — see Pricing below and the Generate Text node’s Reasoning effort section for the exact formula and worked examples.
The node ships with two engines (see below). The default Lottie engine has the LLM author a complete Lottie animation with named editable slots. The Classic engine produces a compact elements DSL rendered with pure Remotion primitives and a built-in FONT_MAP.
Engines
The Engine field selects how the composition is authored. It does not change the inputs, outputs, or the rendering pipeline downstream (both engines emit a composition plan that connects to a Render Video node).
| Engine | Value | What it does |
|---|---|---|
| Classic (elements) | elements |
The original behavior. The LLM returns a compact elements DSL (text, shapes, SVG paths, transitions) that the renderer maps to Remotion primitives. Synchronous and fast. |
| Lottie (AI-authored) | lottie (default for new nodes) |
The LLM authors a complete Lottie animation with named, editable slots. Choose this for richer, hand-animation-style motion. |
Lottie engine specifics:
- Asynchronous generation. Running the node enqueues a job; the authored plan arrives when the job completes (unlike the Classic engine, which returns inline). The live preview updates once the plan is ready.
- Vector-only. The animation may not reference image assets — image-backed plans are rejected and regenerated. Shapes, paths, gradients, and text are all supported.
- Expressions are stripped. Any Lottie expressions are removed server-side for security before the plan is accepted.
- Text uses a font safelist. Text layers are limited to a 20-font Google Fonts safelist that the renderer self-hosts; unknown font families are snapped to Inter.
- Size caps. A plan may contain at most 50 layers and serialize to at most 128 KB. Plans exceeding these caps are rejected.
- The authored animation contains named slots (e.g. a primary color, a headline string) that later enable free, no-credit edits.
The default background is fully transparent (
#00000000) for both engines, so motion graphics layer cleanly over other video.
Slot editing
Once a Lottie plan is generated, its named slots appear as controls in the node’s config panel (under a Slots section, below the preview). Colors render as a color picker, text as a text field, and numeric/point slots as number inputs. Each control shows a reset affordance once you’ve changed it.
These edits are free — they adjust the existing plan in place, so there are no credits and no regeneration. The preview updates live as you edit.
Slot names stay stable across regenerations: when you re-run the node, the engine is told to keep the existing slot names, so your adjustments survive a regeneration rather than being discarded.
Exposing slots as app inputs: when this node is added as an input in the publish dialog, each slot becomes an editable field (color / text / number) in the published app and in presentation mode. End-users adjust them per run without regenerating — the same free, no-credit edit, surfaced to your app’s audience. See the embed-app guide for the override mechanics.
Presets
The node ships a curated factory preset catalog — 22 presets across six folders, all targeting the Lottie engine. Each preset is a complete art-direction brief that pre-fills the prompt, aspect ratio, duration, and background, and declares the stable, editable slots it exposes (a brand color, a name string, etc.) so your edits survive regeneration and surface as fields in published apps.
| Folder | What’s inside |
|---|---|
| Titles & Text | Lower Third, Title Card, Kinetic Typography, Quote Card, End Card (CTA) — name/role, headline/subtitle, and CTA cards with staggered entrances and clean exits. |
| Intros & Logos | Logo Sting, Channel Intro, Countdown — punchy brand reveals with anticipation/overshoot, plus a keyframed 5→1 ring countdown. |
| Social & CTA | Subscribe Reminder, Like + Follow Bug, Sale Badge, Story Highlight — transparent overlays and a vertical (9:16) story card for short-form. |
| UI & Icons | Loader / Spinner, Success Check, Error Cross, Progress Bar, Notification Pop — draw-on / trim-path UI states, mostly square and transparent. |
| FX Overlays | Confetti Burst, Sparkle Shimmer, Speed Lines — particle-style overlays (built with repeaters to stay light), all transparent for compositing. |
| Backgrounds | Gradient Blob Loop, Geometric Pattern Loop — 8-second seamless looping backdrops on an opaque dark fill. |
Overlay presets set a transparent background (#00000000); standalone presets (title cards, intro, countdown, backgrounds) set an opaque dark background. Text slots ship placeholder copy (e.g. “Jane Doe”, “SUBSCRIBE”) for you to retype.
Selecting a preset overwrites the prompt and canvas settings (engine, aspect ratio, duration, background) and clears any previously generated plan, so the old animation never lingers under the new prompt. After generating, tweak the named slots for free (no credits, no regeneration). The full catalog is documented in the Presets reference.
Pricing
Credits follow the standard LLM pricing tiers, evaluated at each engine’s typical token profile. The Lottie engine authors a much larger payload than the elements DSL, so it costs more at the same tier.
| Engine | Tier | Credits |
|---|---|---|
| Classic (elements) | Economy | 1 |
| Classic (elements) | Standard | 2 |
| Classic (elements) | Premium | 3 |
| Lottie | Economy | 1 |
| Lottie | Standard | 5 |
| Lottie | Premium | 8 |
The tier is determined by the selected LLM model (Economy / Standard / Premium).
Why Lottie costs more. A Lottie author call on the Standard tier authors a substantially larger payload than the Classic engine’s elements DSL at the same tier, which is why Standard lands at 5 credits for Lottie versus 2 credits for Classic — both derived from the same formula, evaluated at each engine’s typical output size.
Reasoning effort and tier. Selecting xhigh or max effort on a reasoning-capable model bills one tier up (economy → standard, standard → premium; premium is unchanged) — the same rule the Generate Text node documents in full at Reasoning effort. Auto and every other level apply the vendor default and never change the tier shown above.
Configuration
| Field | Type | Default | Description |
|---|---|---|---|
| Engine | enum | "elements" |
Authoring engine. Options: elements (Classic — elements DSL), lottie (AI-authored Lottie with named slots). See Engines. |
| Motion Graphics Prompt | string | "" |
Natural language description of the desired motion graphics. An info guide is available in the UI for prompt tips. |
| FPS | number | 30 |
Frames per second. Options: 24, 30, 60. |
| Duration | number (seconds) | 5 |
Duration of the output. Range: 1–60 seconds (hard maximum). |
| Aspect Ratio | enum | "16:9" |
Output aspect ratio. Options: 16:9, 9:16, 1:1, 4:5. |
| Background Color | hex string | "#00000000" |
Background color. Supports alpha channel for transparency (8-digit hex). Default is fully transparent. |
Inputs & Outputs
Inputs:
in– Optional input for context or reference data.
Outputs:
composition– Motion graphics plan (JSON). Connect to a Render Video node for final output.lottie– (Lottie engine only) The authored Lottie JSON’s URL. Appears when the Engine is set to Lottie, and can be connected to a Lottie Overlay node’slottieinput so the authored animation is placed and timed over a video. (The Classic/elements engine does not expose this handle.)Best Practices
- Use the info guide in the prompt field for tips on what the AI can generate.
- Specify colors, fonts, and animation styles explicitly for consistent branding.
- Use transparent backgrounds (
#00000000) when layering motion graphics over other video content. - Keep duration under 15 seconds for lower thirds and title cards; use longer durations for kinetic typography sequences.
Common Use Cases
- Creating animated lower thirds for interviews or presentations.
- Building kinetic typography sequences from quotes or lyrics.
- Designing animated title cards with branded colors and fonts.
- Producing shape and SVG path animations for explainer content.
- Generating transparent motion graphic overlays for compositing.
Tips
- The default background is fully transparent (
#00000000), making it ideal for overlaying on other video. - The
FONT_MAPprovides a curated set of fonts. Describe the desired font style in your prompt (e.g., “modern sans-serif” or “elegant serif”). - Duration is capped at 60 seconds. For longer motion graphic sequences, chain multiple nodes.
- Preview is always available in the config panel (unlike After Effects, which requires a source video).
- For precise text content, include the exact text in your prompt rather than relying on the AI to generate copy.