create-motion-graphics

name	create-motion-graphics
description	Use whenever Local Video Editor needs to add, create, hand-author, patch, or place Motion Graphic JSX assets in a project. Covers project visual language, editable properties, inline JSX authoring, existing asset updates, timeline placement, and verification.

Create Motion Graphics (Local Adaptation)

⚠️ MG rendering is NOT available in Local Video Editor. Motion Graphics can be authored and stored as code but cannot be rendered to video frames (Remotion-based rendering is not available).

Key Differences from Cloud-Based Editors

Feature	Local Video Editor	Cloud-Based
create_motion_graphic_from_code	✅ Creates MG assets storing code	✅ Creates and renders
edit_asset	✅ Updates code/properties	✅ Updates code/properties
MG visual rendering	❌ Not available	✅ Remotion-based render
manage_design_style	✅ list_presets/apply_preset/get	✅ Full support
search_fonts	✅ Available	✅ Available

Asset and Timeline Flow

Create a New Asset

Use local-video-editor_create_motion_graphic_from_code to create MG assets. The tool accepts inline JSX, editable property metadata, width, height, and duration. The asset stores the code but cannot render it to video frames.

Pass the MG's natural box as width/height. Use timeline dimensions only for intentional full-frame MGs. The asset creation step only creates the asset; timeline placement is separate.

// Example: create_motion_graphic_from_code payload shape
{
  "name": "Lower Third Title",
  "width": 500,
  "height": 120,
  "duration": 150,         // frames
  "code": "const Component = ({ item }) => { ... }",
  "properties": [
    { "key": "title", "label": "Title", "type": "text", "defaultValue": "Speaker Name" },
    { "key": "subtitle", "label": "Subtitle", "type": "text", "defaultValue": "Role" },
    { "key": "accentColor", "label": "Accent Color", "type": "color", "defaultValue": "#3B82F6" }
  ]
}

Patch an Existing Asset

Use local-video-editor_edit_asset to update an existing MG asset's code or properties. Before patching, inspect the existing asset code and property schema. Preserve unrelated behavior, property keys, and timeline timing unless the requested change requires otherwise.

Place on the Timeline

Use local-video-editor_edit_item (adds/updates) for placement, movement, trimming, and per-instance property overrides.

Design Style

Use local-video-editor_manage_design_style for visual style management:

• action: "list_presets" — list available design style presets (optionally filter by scenario and locale)
• action: "apply_preset" — apply a selected preset
• action: "get" — inspect the active design style details

Style alignment gate

• If there is no active Design Style and the user has not named a style, stop and ask.
• Prefer catalog Design Style presets: call list_presets, present reasonable visual choices.
• Generic quality adjectives ("clean", "modern", "premium") are goals, not a visual language.
• For batch MGs, create exactly one representative MG, place it, then stop for confirmation.

Fonts

Use local-video-editor_search_fonts to find available fonts. Pass the returned canonical family name verbatim as the fontFamily value.

Motion Graphic Code Contract

Violations cause runtime crashes. Strict compliance required.

1. Syntax: Pure JavaScript JSX. No TypeScript.
2. Imports: No import statements. Globals are pre-injected: React, spring, useCurrentFrame, useVideoConfig, interpolate, interpolateColors, Math, random, Easing, AbsoluteFill, Sequence, Series, Img, Video, and Audio.
3. No Remotion global: Never use Remotion.xxx or const { ... } = Remotion.
4. Exports: No export default. Define const Component = ....
5. Timing: No Sequence wrappers inside the component. Use flat frame-driven logic.
6. Logic: No inline logic in JSX props. Pre-compute values in variables before return.
7. Helpers: No undefined functions. Use interpolateColors plural.
8. AbsoluteFill: AbsoluteFill is a component, not a style object.
9. Root element: The root must be <div style={rootStyle}>.
10. Assets: <Img> and <Video> sources must read from image/video editable props.
11. Hooks: Get frame from useCurrentFrame(), not from useVideoConfig().
12. Local box: Component must accept ({ item }) props.
13. Layout control: Use flexbox, grid, SVG, or absolute geometry as appropriate.
14. Editable props: Component must read editable values from item.props.
15. Property schema: Declare matching editable properties.
16. Image/video props: Guard empty URLs.
17. Background: Default background is transparent.

Verification

A successful tool call is not verification. Since MG rendering is not available, verification is limited to:

• Re-read asset state after asset creation or update
• Re-read timeline state after placement, movement, trimming, or property overrides
• For visual changes, use local-video-editor_view_timeline_frames if the MG appears on the timeline (note: rendered output will not include MG visual effects since Remotion rendering is unavailable)

If the result is wrong, classify the failure before retrying: invalid tool shape, invalid JSX, missing/incorrect property key, timeline placement, or async asset readiness.