Edit Claude HTML Motion Graphics in Motion Studio

The short answer

Ask Claude (for example Claude Opus in Claude Code) or Codex to write the motion graphic as HTML, CSS and SVG with one paused GSAP timeline registered as window.__timelines.main, and to tag every element you want to edit with a data-cv-id attribute. Have the agent add it to your project through Creavit Studio's in-app Agent panel, or from an external agent through the Creavit MCP server. The graphic is rendered to a transparent VP9 WebM on your timeline.

To change it, open it in Motion Studio's HTML panel. Every tagged element appears as a layer: select it, drag it, retype the text, and change the color, font, size and timing. The graphic stays HTML the whole time; it is not converted into native vector layers.

How the pieces fit together

There are four parts, and it helps to know which one does what:

The agent writes. Claude, Codex or another agent produces a self-contained HTML composition: elements, a style block, and a script that builds a paused GSAP timeline.
The agent delivers. There is no "upload HTML file" button in Creavit Studio. The upload button in the motion library takes JSON and Lottie files. HTML graphics come in through an agent: the in-app Agent panel and Auto FX, or the open MCP server for agents running outside the app.
Creavit renders. The app plays the timeline frame by frame and renders it to a transparent VP9 WebM that sits on your timeline above the video.
You edit. Motion Studio reads the HTML and shows the tagged elements as layers you can change without touching code.

Creavit Studio also accepts pages that expose a window.seek(t) function and motion-kit fragments, but the paused GSAP timeline is the format the editor understands best.

Step 1: Decide where your agent runs

Inside the app

Open the Agent panel in Creavit Studio. It uses Claude Code or Codex CLI already installed on your Mac, or a local Ollama model. Ask for the graphic in plain language and the agent adds it to the open project. Auto FX uses the same path when it plans scenes and generates motion graphics for a whole video.

From an external agent through MCP

If you already work in Claude Code or Codex in a terminal, connect it to the Creavit Studio MCP server. It needs Node 18 or later and runs on macOS.

For Claude Code:

claude mcp add creavit-studio -- npx -y creavit-studio-mcp

For Codex CLI, add this to ~/.codex/config.toml:

[mcp_servers.creavit-studio]
command = "npx"
args = ["-y", "creavit-studio-mcp"]

To check the setup, run npx creavit-studio-mcp --doctor. Keep Creavit Studio open with your project loaded; the agent talks to the running app.

Two tools matter for motion graphics. creavit_fx_add adds one graphic to the Auto FX motion row and returns frames from the real canvas across its life (build-up, hold, exit), so the agent can check placement and readability. creavit_motion_html_set replaces the composition of the graphic open in Motion Studio, as one undo step.

Step 2: Give the agent a clear prompt

Good results come from a prompt that states the format, the content and the timing. Here is an example you can adapt:

Create a lower-third motion graphic for my Creavit Studio project and add it
with creavit_fx_add at 4.0 s, lasting 5 s, placement "box" near the bottom left.

Format:
- One HTML composition: elements, a <style> block and a <script>.
- Build ONE paused GSAP timeline and register it as window.__timelines = { main: tl }.
- Transparent background, absolute pixel positions, inline SVG only, no external images.
- Put a data-cv-id on every element I may want to edit: the name, the role,
  the accent bar and the background card.

Content:
- Name: "Maya Chen"
- Role: "Product Designer, Northwind"
- Accent color #4F7CFF, white text, a system sans-serif font.

Motion:
- Accent bar draws in from the left (0.4 s), card fades and slides up (0.5 s),
  name then role reveal word by word with SplitText.
- Hold, then exit in reverse during the last 0.6 s.

After adding it, look at the returned frames and fix anything that is cut off or hard to read.

The rules in the "Format" block are the ones Creavit Studio's tools ask for. GSAP's SplitText, DrawSVG, MotionPath, CustomEase and Text plugins are loaded, so the agent can use them without adding script tags. Placement can be full (the whole canvas), box, cover or transition.

Step 3: Check the graphic on the timeline

The graphic appears on the timeline as a transparent motion item. Play through it at normal speed. Check:

it starts slightly before the moment it supports (the agent can set the start time),
the text is readable at the size viewers will watch,
it does not cover the part of the screen recording people need to see.

You can move or trim the item on the timeline like any other. For a graphic that should sit behind a person, the MCP tool also supports placing it between the background and the camera subject on camera videos.

Step 4: Edit the layers in Motion Studio

Open the graphic in Motion Studio. The HTML panel has three tabs:

Design

The Design tab lists the graphic's Elements, Texts and Colors. Click a text to retype it; change a color once to change it everywhere it is used. Typography sets font, weight and size. Replace image… swaps an embedded image.

Turn on the live view (the eye icon) to pick elements directly on the canvas and drag them into place.

Timing

The Timing tab lists the animations from the GSAP timeline. Adjust All timings or the Speed of the whole graphic, or change one animation. If the length changes, Apply renders the graphic again at the new length.

Code

The Code tab shows the full HTML. Selecting an element highlights its line, which is handy when you want to make a precise change by hand.

Ask AI

At the bottom, "Ask AI to change the graphic…" sends a request to your agent. With an element selected, the prompt becomes "Change this element…", so the agent knows exactly what you mean. You can also continue in the full AI chat, which receives the graphic and the selected element.

Changes you have not applied can be thrown away with Discard, and undo and redo work as usual.

What to expect, and what not to

It stays HTML. Motion Studio edits the HTML document. It does not turn the graphic into native shape layers, so very complex scripted animations may expose fewer editable controls than a simple one.
Only tagged elements are layers. If the agent forgets data-cv-id on an element, you cannot select it as a layer. Ask the agent to add the tags, or edit it in the Code tab.
No direct file upload. You cannot drag an .html file into the motion library. Use the Agent panel or MCP.
Self-contained graphics only. Keep assets inline; external images are not allowed in the composition.

When should you use this instead of a template? Use it when you want a graphic that does not exist yet (a custom chart, a branded lower third, a product callout), or when you want an agent to make ten variations quickly. For a standard title, the built-in Motion Studio presets are faster.

Checklist for an editable graphic

One paused GSAP timeline on window.__timelines.main.
Transparent background and absolute pixel positions.
No external images; keep SVG and other assets inline.
A data-cv-id on every element you may want to change.
A sensible start time and duration on the timeline.
A check of the frames for cut-off or unreadable text.

Keep going

See the AI HTML motion graphics page for an overview, the free motion graphics editor for Motion Studio itself, and how to edit screen recordings with an AI agent for the wider agent and MCP workflow. If you need the graphic outside Creavit Studio, read about transparent video export.

Download Creavit Studio for Mac ->