How to Make AI Motion Graphics with Claude and VdoBloom
Claude writes the animated titles, charts and transitions as code; VdoBloom supplies the AI footage, voice-over and music through its MCP server. Setup, prompts and a full build.
Contents (10 sections)
The quickest way to make motion graphics with AI is to split the job. Claude writes the moving text, shapes, charts and transitions as code (HTML and CSS, SVG, or a React video framework such as Remotion) and renders them. VdoBloom, connected to Claude as an MCP server, makes the parts code cannot draw: AI video backgrounds, product shots, a voice-over and a music bed.
Quick facts
- Connect:
https://vdobloom.com/mcp. In Claude Code, oneclaude mcp addcommand. In the Claude app, a custom connector with a sign-in. - What VdoBloom adds:
generate_video,generate_image,generate_speechandgenerate_music, plusrun_toolfor tools such as the video background remover. - Typical cost: a 5-second Seedance 2 Fast background clip is 24 credits at 480p or 50 credits at 720p. A Nano Banana still is 6 credits. The graphics Claude writes as code cost no VdoBloom credits.
- Billing: pay per use with credits that never expire. No subscription. New accounts get 10 credits on sign-up.
- Video walkthrough: our tutorial on YouTube.
Why split the work between code and AI video
Motion graphics are mostly exact things: a headline that slides in on frame 12, a bar chart that grows to 37%, a logo that holds for two seconds. Video models are bad at exact. They misspell words, wobble shapes and change timing from one run to the next.
Code is the opposite. Text is always spelled right, numbers are always correct and every render looks the same. What code cannot do well is a realistic background: a city at dusk, steam off a coffee cup, a product turning on a table. That is where an AI video model earns its credits.
So the rule is simple. Anything with words, numbers or brand shapes goes in code. Anything that should look filmed goes to VdoBloom.
Step 1: connect VdoBloom to Claude
In Claude Code, make a key in Settings → Developer (tick the API terms box; the key starts with vdb_ and is shown once), then run:
claude mcp add --transport http vdobloom https://vdobloom.com/mcp \
--header "Authorization: Bearer vdb_your_key"In the Claude app, open the connector settings, add a custom connector with the URL https://vdobloom.com/mcp, and sign in to VdoBloom when asked. No key to paste.
Check it works: ask Claude to "show my VdoBloom balance". For a deeper setup guide, including ChatGPT, see generating images and video from Claude or ChatGPT.
Claude Code is the better fit for motion graphics, because it can write files, install a framework and run the render on your machine. The Claude app can still plan the piece, write the code for you to copy, and generate the VdoBloom clips.
Step 2: write a short brief
Give Claude the facts it cannot guess. A good brief has five lines:
- Length and size: "20 seconds, 1080x1920, 30 fps."
- Message: the exact words on screen, in order.
- Brand: two or three hex colours and a font name.
- Footage: what the background should show, for example "slow push-in on a desk with a laptop, warm morning light".
- Audio: voice-over text, or "music only, calm electronic, 90 bpm".
Then ask Claude to plan before building: "List the scenes with start and end times, what is code and what is a VdoBloom clip, and the credit cost of each clip. Wait for my OK." Claude can read prices with list_models and your balance with get_balance, so the plan comes with a real total.
Step 3: generate the footage, voice and music
Once you approve the plan, Claude calls VdoBloom for each asset:
- Background clips with
generate_video. Ask for the same aspect ratio as the final piece, and for slow camera moves; fast motion fights with text on top. See our camera movement prompts for wording. - Stills with
generate_image, for a texture, a product hero or a first frame thatgenerate_videocan animate from. - Voice-over with
generate_speech. Send the whole script in one call (up to 10,000 characters); it is billed per 1,000 characters, rounded up on every call, so line-by-line calls cost more. - Music with
generate_music. It is instrumental unless you ask for vocals.
Videos take 1-10 minutes. Claude polls get_status and gets a link when each job finishes. The links are temporary, so ask Claude Code to download every file into the project's assets folder right away.
Step 4: build the graphics in code
Now Claude writes the animation. Two common routes:
| Route | Good for | How it renders |
|---|---|---|
| HTML, CSS and SVG | Title cards, lower thirds, simple kinetic type | A headless browser records the page frame by frame, then FFmpeg joins the frames |
| Remotion (React) | Longer pieces, data-driven charts, many scenes | Remotion renders the composition straight to MP4 |
Either way, the VdoBloom clips sit on the bottom layer and the code draws on top. Ask Claude to keep text inside a safe area (about 10% in from each edge for vertical video), to add a slight dark overlay so white text stays readable, and to time cuts to the voice-over.
Remotion has its own license terms. Read them on remotion.dev before you use it for client or company work.
Step 5: review and fix one thing at a time
Render a draft and watch it. Then give Claude one change per message: "The headline in scene 2 enters too late, start it at 1.2 s." Code changes cost nothing, so iterate there. Only regenerate a VdoBloom clip when the footage itself is wrong, and ask Claude to estimate the cost first.
Prompts that work well
Short, specific requests give Claude less room to guess. A few that work:
- "Make a 6-second 1080x1920 background with VdoBloom: slow push-in on a wooden desk, morning light, no people, no text." To test the footage part by hand first: Try this prompt
- "Animate these three headlines one after another, 1.5 s each, sliding up with a soft fade, in #1E1E2E on a #F5C542 bar."
- "Add a progress bar along the bottom that fills over the full length of the video."
- "Write the voice-over in one block, generate it with VdoBloom, then time each scene to the sentence it matches."
For a still to animate from, the same idea works in the image generator (Nano Banana 2.1, 3 credits at 1K): Try this prompt
Always add "no text" to background prompts. Words from the video model would clash with the real titles on top.
How to do it on VdoBloom: a 20-second product teaser
- Connect VdoBloom to Claude Code with the command above.
- Paste a brief: 20 seconds, 9:16, three headlines, brand colours, "music only".
- Ask Claude for a plan with costs. A typical plan here is two 5-second background clips at 720p (100 credits) and one music track.
- Approve. Claude generates the clips and music, then downloads them.
- Claude writes the animated headlines and an end card with your logo, then renders the MP4.
- Watch, ask for fixes in code, and render again. If you want more polish on the footage, run it through the video upscaler before the final render.
Prefer clicking to prompting? The logo animation tool and the AI video editor do parts of this inside VdoBloom without code.
Make a background clip in Text to Video
Common mistakes
- Asking the video model for the headline. It will misspell it. Put every word in code.
- Mismatched sizes. A 16:9 clip under a 9:16 layout gets cropped. Ask for the final aspect ratio in every generate call.
- Waiting to download. Result links expire. Save files as soon as each job finishes.
FAQ
Can a video model make motion graphics on its own?
It can make stylised motion, but on-screen words and numbers often come out wrong or shift between frames. Keep text, charts and logos in code and use the model for backgrounds.
Do I need to know how to code?
No. Claude Code writes and runs the code. You need to read the plan, watch the drafts and say what to change.
What does a piece like this cost in VdoBloom credits?
Only the AI assets are charged. Two 5-second 720p Seedance 2 Fast clips are 100 credits; at 480p they are 48. Voice and music prices are listed in list_models with type audio. Claude can total it before it starts.
Can I use my own footage or logo?
Yes. In Claude Code, put the files in the project folder. If a VdoBloom tool needs your file, Claude can call create_upload and give you a link to upload it.
Which video model is best for backgrounds?
For slow, clean B-roll, Seedance 2 Fast is a cheap default. Ask Claude to compare a few models with list_models and run one short test before committing.
Related reading: AI for motion designers, How to make AI videos with ChatGPT or Claude and How to add music to a video with AI.
Try it yourself
Background Remover
Pick a model, add a photo or a prompt, and see the credit price before you generate. Pay per use with credits that never expire.