Want to access all premium content?
Become a paying subscriber to get access to all courses, guides like this, prompts and skills library, and $500+ worth of AI tools.
Opus 5.5 can create motion graphics by writing code that draws each frame. Use it for product teasers, animated charts, or name reveals, then render the video inside the Claude app without installing tools on your computer.
We'll make a six-second loop for Pebble, a fictional notes app, revise it by frame, and export it for X. You'll need the Claude app with Opus 5.5 and code execution enabled. The original workflow was tested on Max; availability on other plans still needs checking.
Step 1: Test the renderer. Make sure Claude can produce an MP4.
Step 2: Write the brief. Specify colors, sizes, timing, and movement.
Step 3: Render the loop. Check stills before making the full video.
Step 4: Refine the frames. Give precise notes without rebuilding the whole piece.
Step 5: Export for X. Create your files and check the loop.
Step 1: Test the renderer
Start a new chat in the Claude app and select Opus 5.5. [CHECK ON DEVICE]
Claude will write an HTML animation, capture its frames, and combine them into a video in its workspace.
Check that your account can complete the process before starting the main piece:
Run a render test.
Create one self-contained HTML file showing a coral circle growing on a light background. Use a 1080x1080 canvas, 2 seconds, and 30 fps.
Render the frames in your workspace, encode an MP4, and send me the file. Don't load fonts, scripts, or other assets from external websites.
Open the MP4 and check that it plays. You don't need to read the accompanying code.
If Claude can't execute code or create files, look under Settings, then Capabilities for the relevant controls. The exact labels still need checking. [CHECK ON DEVICE]
The workspace used for the original test couldn't access Google Fonts or script CDNs. Ask Claude to use installed fonts and self-contained code.
Step 2: Write the brief
"Make it premium" leaves Claude to choose almost every detail. Specify the decisions that matter: the background color, text size, shot length, and how each element moves.
You don't need to describe every frame. Give each shot one main action and enough detail to judge the result.
Line | What to specify | Example |
|---|---|---|
GOAL | What viewers should remember | Pebble and its tagline |
CANVAS | Size and output | 1080x1080, MP4 |
TIMING | Duration, frame rate, loop | 6 seconds, 30 fps, 180 frames |
LOOK | Colors, font, text sizes | #F7F4EF background, 96 px name |
MOTION | How elements enter and exit | Ease-out entrance, faster exit |
SHOTS | Actions and frame ranges | Notes drop in during frames 0 to 45 |
AVOID | Effects you don't want | Glow, particles, gradients |
CHECKS | What to review first | Five named still frames |
SHOTS controls the sequence. AVOID helps prevent effects you don't want from returning in later drafts.
Start with this Pebble brief:
GOAL: A 6-second launch loop for Pebble, a notes app. Viewers should remember "Pebble" and "Notes that sort themselves."
CANVAS: One self-contained HTML file, 1080x1080. Render in your workspace and send an MP4. No external assets.
TIMING: 6 seconds at 30 fps, 180 frames. Frame 179 should flow into frame 0.
LOOK: Background #F7F4EF, text #1E1E1E, accent #3B6EF5 on the notes only. Use installed Inter Bold; if unavailable, tell me which installed fonts are suitable. Name: 96 px. Tagline: 40 px.
MOTION: Entrances use cubic-bezier(0.16, 1, 0.3, 1). Exits use cubic-bezier(0.7, 0, 0.84, 0) and take half as long. At most one small bounce per landing.
SHOTS:
Frames 0 to 45: Three paper notes drop in, six frames apart, with a small squash on landing.
Frames 45 to 90: The notes slide into a stack.
Frames 90 to 150: The stack flips into "Pebble". The tagline rises underneath ten frames later. Leave time to read both.
Frames 150 to 179: The name turns back into three notes, returning to the opening state.
AVOID: Purple or blue gradients, glow, lens flares, particles, dark backgrounds, and all elements fading in together.
CHECKS: Draw each frame from time alone using window.renderAt(t). No timers or unseeded randomness. Before rendering the video, send frames 0, 45, 90, 120, and 179 with a one-sentence description of each.
Step 3: Render the loop
Review the five stills alongside Claude's descriptions. If a description doesn't match the image, point out the difference.
Check that:
The name and tagline are readable.
The colors and font match the brief.
The final frame is positioned to flow into the opening.
Fix problems in the stills before spending time on a full render. If the font looks wrong, ask Claude to confirm which font it used.
Then request the video:
Render all 180 frames and send the MP4.
Also create one contact sheet showing every 15th frame, labeled with frame numbers.
Watch the video several times. Check the sequence first, then the pacing and the transition back to the start. Use the contact sheet to locate anything you want changed.
Step 4: Refine the frames
Give Claude a location and a change it can make.
What needs work | A more useful note |
|---|---|
The name needs emphasis | At frame 100, scale the name from 1.0 to 1.08 and back over six frames |
The hold feels slow | Shorten this hold by eight frames and explain where those frames go |
The effects feel generic | List the decorative effects used and remove the ones in AVOID |
The text jumps | Compare frames 89 to 91 and find the cause before editing |
If you can't describe the problem, ask for a closer look:
Something jumps around frame 90.
Show frames 88, 90, and 92 side by side. Explain what changes before editing.
Fix only the cause of the jump, then render those three frames again.
Send one or two changes per round. That makes it easier to see whether each fix worked and whether it affected anything else.
Add useful decisions back to the brief. If a particular entrance, hold, or text treatment works, keep it for the next piece.
Step 5: Export for X
Ask for both formats:
Export the final animation as:
1. An MP4 using H.264, yuv420p, and fast-start metadata.
2. A 1080-pixel-wide GIF using one palette for the whole clip.
Join the MP4 to itself three times and send that preview so I can check the loop transitions.
Use the MP4 for video posts. The GIF is an option for inline loops where supported, but it can be larger and show fewer colors. Check X's current upload requirements before posting.
If the loop hesitates, inspect the last few frames and the first few together. A duplicated opening frame is one possible cause. Confirm the export contains frames 0 to 179 rather than an extra frame at the endpoint.
Make sure the animation makes sense without sound. Preview the upload on your phone before publishing.
Use cases
Keep working in the same chat so Claude can reuse the brief's structure and visual choices.
Use case #1: Animate a stat
Turn a small dataset into a chart that builds over time.
Use my brief format for an animation showing newsletter signups rising from 1,200 to 2,400 over four weeks.
Ask me for all four weekly values before drawing the chart. Don't invent the middle values.
CANVAS: 1080x1350, MP4.
TIMING: 5 seconds at 30 fps.
SHOTS: Reveal each week's bar 15 frames apart, then show the final total.
AVOID: 3D bars, shadows, and gridlines.
CHECKS: Send frames 0, 60, and 149 first.Check the bar heights, labels, and final number against your data.
Use case #2: Reveal a name
Create a short intro for your videos.
Use my brief format.
GOAL: A three-second reveal of [NAME].
TIMING: 90 frames at 30 fps, no loop.
SHOTS: Letters arrive two frames apart, settle with one small bounce, then hold for the final 30 frames.
LOOK: [COLORS AND INSTALLED FONT].
CHECKS: Send frames 0, 40, and 89 first.View it at phone size and check that the name stays visible long enough to read.
Use case #3: Tease a launch
Give each feature its own shot.
Use my brief format.
GOAL: A ten-second teaser for [PRODUCT] covering [FEATURE 1], [FEATURE 2], and [FEATURE 3].
TIMING: 300 frames at 30 fps.
SHOTS: One feature per shot, 90 frames each. Hard cuts between shots. Show the product name for the final 30 frames. One moving element per shot.
CHECKS: Send a contact sheet of every 30th frame before rendering the full video.Check the feature descriptions against the product before publishing.
Confirmed limitations
This workflow uses code execution and file creation in the Claude app. It is separate from Anthropic's Claude Motion feature, whose availability should be checked independently.
Workspace tools, fonts, and network access may differ by account. Run the two-second test before relying on the full workflow.
Stills help catch drawing errors, but they don't prove the movement feels right. Watch the exported video yourself.
Each revision uses part of your plan's allowance. Short clips and still-frame checks help avoid unnecessary full renders.
Closing
Start with the Pebble brief and finish one complete loop. Review the stills, make a small revision, and check the exports so you understand the whole process.
Then adapt it to your own product. Keep the structure and change one or two choices at a time; you'll quickly see which details improve the result.
See you in the next one :)