Motion Graphics
Direct-authoring contract
WorkBuddy authors new Motion Graphics directly. This path does not consume ChatCut generation credits.
- For a new asset, call
create_motion_graphic_from_code with the complete React/JSX source inline. Do not write the code to a local file or pass a file path.
- For an existing Motion Graphic, read its current code and use
edit_asset with the complete replacement source in json.code.
- Use
edit_item to place, resize, move, or update the Motion Graphic on the timeline.
- Do not route ordinary Motion Graphic creation to
submit_motion_graphic or describe direct authoring as credit-consuming generation.
Workflow
- Read the active timeline dimensions, fps, intended duration and placement, nearby visual language, captions, and subject-safe area.
- Reuse a suitable existing asset from
browse_library when it already performs the same viewer job and visual form; otherwise design a new editable MG.
- Decide the purpose, exact content, settled-frame composition, animation beats, natural asset box, palette, typography, and editable properties before writing JSX.
- Call
create_motion_graphic_from_code with code, name, width, height, one duration field, and editable properties when appropriate.
- Place the returned asset with
edit_item. Overlay assets should use a natural box around the visible graphic; use timeline dimensions only for an intentional full-frame MG.
- Read the project back and inspect composed settled frames when available. Verify timing, legibility, content, placement, caption clearance, and subject clearance.
Expose visible text, primary colors, and other likely-to-change values as editable properties. Use fonts that the cloud renderer can load, match the project visual language, keep motion purposeful, and avoid generic text-in-a-card layouts when the content calls for a more specific visual mechanism.
1---2name: motion-graphics3description: Add, directly author, edit, and place editable Motion Graphics in ChatCut from WorkBuddy using inline JSX, existing library assets, and timeline tools.4---5
6# Motion Graphics
7
8## Direct-authoring contract
9
10WorkBuddy authors new Motion Graphics directly. This path does not consume ChatCut generation credits.
11
12- For a new asset, call `create_motion_graphic_from_code` with the complete React/JSX source inline. Do not write the code to a local file or pass a file path.
13- For an existing Motion Graphic, read its current code and use `edit_asset` with the complete replacement source in `json.code`.
14- Use `edit_item` to place, resize, move, or update the Motion Graphic on the timeline.
15- Do not route ordinary Motion Graphic creation to `submit_motion_graphic` or describe direct authoring as credit-consuming generation.
16
17## Workflow
18
191. Read the active timeline dimensions, fps, intended duration and placement, nearby visual language, captions, and subject-safe area.
202. Reuse a suitable existing asset from `browse_library` when it already performs the same viewer job and visual form; otherwise design a new editable MG.
213. Decide the purpose, exact content, settled-frame composition, animation beats, natural asset box, palette, typography, and editable properties before writing JSX.
224. Call `create_motion_graphic_from_code` with `code`, `name`, `width`, `height`, one duration field, and editable `properties` when appropriate.
235. Place the returned asset with `edit_item`. Overlay assets should use a natural box around the visible graphic; use timeline dimensions only for an intentional full-frame MG.
246. Read the project back and inspect composed settled frames when available. Verify timing, legibility, content, placement, caption clearance, and subject clearance.
25
26Expose visible text, primary colors, and other likely-to-change values as editable properties. Use fonts that the cloud renderer can load, match the project visual language, keep motion purposeful, and avoid generic text-in-a-card layouts when the content calls for a more specific visual mechanism.
infometa