Free trial
Find your creative flow.
$0 to get started
Try the studio before choosing your plan.
- Screen and camera recording
- Explore the editing timeline
- Try Motion Studio
- 5 free exports
Motion Studio · HTML + GSAP
Edit AI-Generated HTML Motion Graphics in Motion Studio
Let Claude, Codex or another AI agent write a motion graphic as HTML, CSS, SVG and a GSAP timeline. Creavit Studio renders it as transparent video on your timeline, and Motion Studio lets you change the text, colors, fonts, sizes and timing without asking the agent to start over.
- HTML + CSS + SVG + GSAP
- Editable layers via data-cv-id
- Transparent WebM output
What You Can Do With an AI-Written Motion Graphic
The agent writes the first version. Motion Studio is where you adjust it by hand, in code, or by asking the AI again.
01
Written by Claude, Codex or Another Agent
Claude (for example Claude Opus through Claude Code), Codex or another AI agent writes the motion graphic as HTML, CSS and SVG with a paused GSAP timeline on window.__timelines.main. Pages that expose window.seek(t) and motion-kit fragments are also accepted.
02
Comes In Through the Agent or MCP
Use the in-app Agent or Auto FX, or connect an external agent through the open Creavit MCP server with tools like creavit_fx_add and creavit_motion_html_set. The agent places the graphic directly into your project.
03
Layers From data-cv-id
Elements tagged with data-cv-id appear as layers in Motion Studio's HTML panel. Select one, drag it, retype its text, or change its color, font, size and timing without opening the code.
04
A Code Tab for Exact Changes
When a change is easier to make in the source, open the Code tab and edit the HTML, CSS or timeline directly. The graphic is still the same HTML document the agent wrote.
05
Ask AI for the Bigger Changes
Use "Ask AI" in Motion Studio to request a change you would rather describe than make by hand — a different entrance, an extra line, a new layout — and keep editing the result.
06
Transparent WebM on the Timeline
The graphic is rendered to transparent VP9 WebM and sits on the timeline over your recording, so titles, callouts and lower thirds composite cleanly over the footage.
Why HTML Is a Good Format for AI Motion Graphics
Language models write HTML, CSS, SVG and GSAP well, because there is a huge amount of it to learn from. That makes HTML a practical format for asking an agent for a title card, an animated chart or a product callout. The weak point has always been the last 10%: the headline is one word too long, the brand color is slightly off, the second line enters too early. Re-prompting for each of those is slow and can change things you liked. Motion Studio lets you make those fixes directly on the graphic the agent produced.
It Stays HTML
Motion Studio does not convert the graphic into native vector layers. The HTML document remains the source of truth, and the layer view is built from the elements tagged with data-cv-id. That means layer edits, Code tab edits and Ask AI edits all act on the same file, and nothing is lost in a conversion. It also means only tagged elements show up as layers; untagged elements are still there and can be edited in the Code tab.
Getting an HTML Graphic Into Your Project
There is no "upload .html file" button — the upload button in Motion Studio takes JSON and Lottie. HTML graphics come in through an AI agent: ask the in-app Agent or Auto FX, or connect Claude Code to the open Creavit MCP server with: claude mcp add creavit-studio -- npx -y creavit-studio-mcp (the creavit-studio-mcp npm package, Node 18 or newer). From there, ask Claude for a lower third or an animated intro and it adds the graphic to your timeline, where you can open it in Motion Studio.
Editing in Motion Studio vs Re-Prompting the Agent
Feature
Creavit
Re-Prompt and Re-Render Each Change
Fix a typo in a headline
Retype the text layer
Prompt again and re-render
Change a color or font
Edit the layer's properties
Prompt again or edit raw code
Adjust timing
Change the layer's timing
Edit the GSAP timeline by hand
Placing it over a recording
Transparent WebM on the timeline
Screen-record a browser or export frames
Larger rewrites
Ask AI inside Motion Studio
Back to the chat window
Source format
Stays HTML, editable in the Code tab
Flattened into a video file
Explore More
Motion Graphics EditorMotion Studio's presets, templates and Lottie support.Transparent Video ExportExport graphics with an alpha channel for use in other editors.AI Agent Editing on MacHow the in-app agent and MCP server edit your projects.Guide: Edit Claude's HTML Motion GraphicsFrom an MCP prompt to a finished, edited graphic.
Your whole studio.
Your choice of plan.
Start for free. Pay monthly, save with a year, or make it yours for life.
One app for recording, editing, motion, and AI.
Pay monthly
Save 50%Monthly Plan
$19.80$9.90/month
Billed monthly
Cancel anytime.
- Unlimited 4K exports
- Free lifetime updates
- Use on up to 5 devices
- Access all features
Annually Plan
Save 50%Best value. Pay yearly and save.
$8.32$4.16/month
$49.90 billed yearly
Cancel anytime.
- Unlimited 4K exports
- Free lifetime updates
- Use on up to 5 devices
- Access all features
One-time payment
Save 50%Lifetime Plan
$198$99one-time
Pay once, own it forever
Lifetime access, no subscription.
Only 7 spots left at this price.
- Unlimited 4K exports
- Free lifetime updates
- Use on up to 5 devices
- Access all features
One license. Up to five Macs. 14-day money-back guarantee.
Let the Agent Write It, Then Fix the Details Yourself
Download Creavit Studio free and try an HTML motion graphic from the in-app agent or your own Claude Code setup through MCP. The trial includes 5 free exports with no signup.
Frequently Asked Questions
How HTML motion graphics get into Creavit Studio and what stays editable.
Which AI models can write motion graphics for Creavit Studio?
Claude (for example Claude Opus via Claude Code), Codex, or another AI agent. The in-app Agent uses Claude Code, Codex CLI or a local Ollama model already on your Mac; external agents connect through the Creavit MCP server.
What format does the HTML need to be in?
HTML with CSS and SVG and a paused GSAP timeline exposed as window.__timelines.main. Pages exposing window.seek(t) and motion-kit fragments are also accepted. Elements tagged with data-cv-id become editable layers.
Can I upload an .html file directly?
No. There is no .html upload button; Motion Studio's upload button takes JSON and Lottie files. HTML motion graphics come in through an AI agent — the in-app Agent or Auto FX, or an external agent using the Creavit MCP server.
Is the HTML converted into vector layers?
No. It stays HTML. Motion Studio shows elements tagged with data-cv-id as layers you can select, drag, retype and restyle, but the underlying graphic is still the HTML document.
What can I change without touching code?
On tagged layers you can select, drag, retype text, and change color, font, size and timing. For anything else, use the Code tab or Ask AI.
How do I connect Claude Code to Creavit Studio?
Run claude mcp add creavit-studio -- npx -y creavit-studio-mcp. It uses the creavit-studio-mcp npm package and needs Node 18 or newer. Claude Code can then use tools such as creavit_fx_add and creavit_motion_html_set.
What does the graphic look like on export?
It is rendered to transparent VP9 WebM on the timeline, so it composites over your recording and exports with the rest of the video.