Claude Motion Graphics in 2026: Where to Get Prompts and How to Make Them Look Good

Short answer: "Claude motion graphics" means asking Claude to write code (HTML/SVG/Canvas, React via Remotion, or HTML via HyperFrames) that animates text, charts and shapes, then rendering that code to video. Since Claude Opus 5.5 (Sept 22, 2026) and the Claude Motion beta (Oct 8, 2026), feeds have filled with these clips. The prompts are easy to find; the clips that look good come from a tight brief, reference material, and a render-inspect-fix loop. Here is the full workflow, with prompts you can copy.

What people are actually doing

There are two separate things behind the hype, and it helps to keep them apart:

1. Claude Motion, an official product. Anthropic launched it in beta on Team and Enterprise plans on October 8. Claude "writes code that animates your text, charts, shapes, and images," it "doesn't use a video generation model," and you export an MP4 (Claude blog, Help Center). Pro and Max plans don't get it.
2. Opus 5.5 + code renderers, the bigger community wave. Most viral clips predate Motion. They were made in Claude chat or Claude Code, usually as a single HTML file rendered frame by frame, or as a Remotion (React video) project. Three.js, GSAP and HyperFrames (HeyGen's open-source HTML-to-MP4 renderer) also show up. In a 3,599-video archive analysed by createmotion.io, tool mentions were led by Claude Code (478), Three.js (353) and Remotion (244). Claude Motion itself got just 32 mentions.

None of this is generated footage. Every frame is code, so you can change a number, a word or a timing and re-render without anything else drifting. That's the main advantage over prompt-to-video models.

Trend timeline

Date (2026)	Event	Source
Sept 22	Anthropic releases Claude Opus 5.5; the announcement notes it scored highest on "graphics and polish" in a one-prompt game test	Anthropic
Sept 22	Claude-made motion videos in the motif archive jump to 164 that day, up from single digits per day before	createmotion.io
Sept 25	Stephan Livera posts a one-line "showreel" prompt result on Max effort; several other creators then post results from the same line	claude-motion.com gallery, AY Automate
Sept 28	AY Automate snapshot: Livera's post at 16,608 likes	AY Automate
Oct 8	Claude Motion beta launches (Team/Enterprise) alongside Claude Dashboards	Claude blog
Oct 16	Launch post reported at ~11.2M views; r/MotionDesign users complain AI Claude animations are "literally the entire sub now"	createmotion.io

The backlash is part of the story. Critics on X call many demos "SLOP motion": pretty, but generic. One common counter-argument, from @notdwd among others, is that Opus "falls back to the same generic" output when it has no references. Most of the "make it look good" section below comes from that point.

Step-by-step workflow

Step 1: Pick your renderer

• No setup, Team/Enterprise plan: Claude Motion. Ask for an animation in any chat, or pick Output → Motion in the message box, or choose a Motion template in the Artifacts tab. Edit in chat ("Slow down the second scene") or in the editor, then Export → MP4.
• No setup, any plan: ask for "a single self-contained HTML file" in a normal chat. It previews as an artifact. You still need a render step to get a video file (Step 5).
• Best quality and control: Claude Code + Remotion. Install the official plugin:

claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion
# or project-local skills that also work in Codex/Cursor:
npx create-video --yes --blank my-video && cd my-video
npx remotion skills add
npm run dev        # Studio preview, then run `claude` in a second terminal

The Remotion skills include /remotion-create, /remotion-markup, /remotion-render, /remotion-captions and /remotion-maps.

• HTML-native agents: npx skills add heygen-com/hyperframes, then npx hyperframes init my-video, npx hyperframes preview, and npx hyperframes render -o output.mp4 (Node 22+ and FFmpeg required, per its CLI README).
• Niche: Manim for math explainers, After Effects expressions/ExtendScript if you need to finish in AE, Lottie JSON for lightweight in-app UI animation. Claude can write all three, but none of them was a large part of the October wave.

Step 2: Write the brief (template)

Anthropic's own tip is to say who will watch it, where it will play, and roughly how long it should be, and to attach your real data and images. Here is the full structure I use:

SUBJECT:     [what the clip explains / sells, one sentence]
AUDIENCE:    [who watches, where it plays, sound on/off]
ASSETS:      [attached CSV / logo / screenshots, "use only these, don't change numbers"]
STYLE:       [palette hex codes, font, 1-2 reference videos or brands, banned looks]
STRUCTURE:   [scene list with seconds: 0-1.5s hook, 1.5-4s ..., end frame + hold]
TIMING:      [total duration, BPM if music-cut, max hold length]
EASING:      [springs or ease-out cubic; no linear; exits faster than entrances]
FORMAT:      [1920x1080 or 1080x1920, 30 or 60 fps]
OUTPUT:      [one HTML file rendered frame by frame / Remotion composition / MP4 + GIF]
CONSTRAINTS: [animation is a pure function of time; no CSS transitions, timers or random;
              show 4 still frames before rendering the full video]

The last constraint matters most. An animation computed purely from t can be scrubbed, re-rendered and exported deterministically. Timers and CSS transitions drop frames when captured.

Step 3: Storyboard and stills before motion

Ask for a beat sheet first, then one still per scene. Text costs little, and animation eats usage. The Help Center notes longer Motion animations "use more of your limit." Approve composition and type on stills; fix motion afterwards.

Step 4: Iterate with director notes

Give one specific note per round: "slow every zoom to 0.7x," "move the callout 40px right," "change 38% to 41%." Notes like "make it better" lead to generic rewrites. In Remotion you can also select an element in Studio and edit it by hand.

Step 5: Render and export

• Claude Motion: Export → MP4.
• Remotion: /remotion-render, or npx remotion render for MP4/still.
• Single HTML file: capture frames with a headless browser, then encode with FFmpeg. That's how the sample below was made:

for f in $(seq 0 119); do
  google-chrome --headless=new --window-size=960,540 \
    --screenshot=frames/f$(printf %03d $f).png "file://$PWD/anim.html?f=$f"
done
ffmpeg -framerate 30 -pattern_type glob -i 'frames/*.png' -c:v libx264 -pix_fmt yuv420p out.mp4
ffmpeg -i out.mp4 -vf "fps=15,scale=480:-1,split[a][b];[a]palettegen[p];[b][p]paletteuse" out.gif

• Lottie: ask Claude for Lottie JSON directly for simple shape/UI motion and test it in a Lottie previewer. Complex scenes are better done as video.

A real sample, rendered on this blog's box

I wrote a ~60-line SVG + JS file in the same style these prompts ask for. The title rises out of a mask, bars come in on staggered closed-form springs, a counter ticks with ease-out, and a callout pops and then "breathes." Every value is a pure function of time. Below are 10 frames from the 4-second, 30fps render, and the GIF.

Copy-paste example prompts (written for this article)

Example 1: data explainer (Claude Motion or chat artifact)

Make a 20-second 16:9 explainer for our Monday all-hands, playing muted on a TV.
Use ONLY the numbers in the attached CSV; never round or invent values.
Scene 1 (0-2s): title rises out of a mask line. Scene 2 (2-10s): bar chart of weekly
signups, bars enter left to right on a spring with 80ms stagger. Scene 3 (10-16s):
the last bar turns orange #FF7A45 and a callout pops in with the change since W1.
End frame (16-20s): the headline number, held 3 seconds.
Dark background #0F1115, one sans-serif font, max 8 words on screen per scene.
No linear easing, no glows, no particles.

Example 2: product launch reel (Claude Code + Remotion)

/remotion-create A 15-second 1080x1920 launch reel for [PRODUCT], 30fps, cut to a
118 BPM track I'll provide (something changes on every 2nd beat).
Use my attached logo and 3 real UI screenshots; break the screenshots into
separate components so buttons, cards and text animate individually.
Rules: springs or bezier with clamp, never linear; entrances animate 2-3 properties
together; exits are faster than entrances; all timing derived from fps; colors and
easings live in one theme.ts. First show me a beat map and 4 stills, wait for my OK,
then render. After rendering, inspect frames at 0s, 5s, 10s, 15s and fix anything
clipped, overlapping or unreadable on a phone.

Example 3: kinetic typography loop (single HTML file)

Create one self-contained HTML file: a 6-second seamless loop of kinetic typography
for the phrase "SHIP IT FRIDAY", 1920x1080. Render from a function render(t) that is
a pure function of time, read t from ?f=<frame>&fps=30 for frame capture, and
otherwise play with requestAnimationFrame. Letters enter from a baseline mask with a
40ms stagger, swap weight on beat 3, and the word "FRIDAY" splits into a stacked
outline/fill echo. Off-white #F4F1EA on near-black, one variable font from Google Fonts.
No CSS transitions, no setTimeout, no Math.random.

Where to get prompts

Source	What you get
AY Automate: Opus 5.5 motion graphics	48 real X posts with 10 creator prompts copied word for word (showreel, prompt-to-website reveal, Apple-keynote film)
claude-motion.com gallery	Individual viral clips with the exact prompt, model and effort level
Remotion: Prompting videos with coding agents + Agent Skills	Official setup plus skills that encode Remotion best practices
remotion-motion-graphics-skill	Four skills (choreography, camera, terminal inserts, article highlights) with a QA gate
claude-remotion-skill	"10 rules" skill: no linear interpolation, stagger, faster exits, render-inspect-fix loop
charlie947/motion-graphics-skills	13 Claude Code skills for launch-style motion graphics
awesome-opus-5-5-video-prompts	Prompt list organised by use case
Claude Help Center	Anthropic's own example prompts for Motion

The well-known one-liner is: "make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out." It's fun as a capability test. Because so many people have run it, though, the results tend to look alike, and that sameness is exactly what the "slop" critics are reacting to.

Make it look good

• Timing: one idea per scene, a hook in the first second, no hold longer than ~1s unless it's the end frame. Cut to a BPM if there's music.
• Easing: ban linear. Use springs for entrances and ease-out for counters. Exits should be faster than entrances. Write springs as closed-form functions of time so they render deterministically.
• Layering: background → assets → graphics → grade → grain/vignette (the five-layer stack from claude-remotion-skill). Let idle elements "breathe" with a small sine wave.
• Typography: one family, two weights, and the fewest words you can manage. Don't repeat the voiceover on screen; save on-screen text for real numbers and UI.
• Color: a background, a neutral, and one accent reserved for the thing that matters (the orange bar in the sample).
• References beat adjectives: attach a reference clip or brand assets and name each state ("bar chart → morphs into donut → collapses to the number").
• Iteration trick: have Claude render stills at fixed timestamps and review them itself before you watch the video.

Common failure	Fix
Generic "template" look	Attach references, brand palette, banned-looks list
Jittery or dropped frames in export	Pure render(t); no CSS transitions/timers; frame-by-frame capture
Text clipped or unreadable on mobile	Set safe margins; render 1080x1920 stills and check them
Everything moves at once	Stagger 40-120ms; one focal motion per beat
Numbers changed by the model	"Use only the attached data; never round" and check end frame
Burning usage on re-renders	Storyboard + stills first; one note per round

Caution: Claude Motion is a beta limited to Team/Enterprise, and cost figures in viral posts are creators' own API-price estimates, not bills.

---

← Back to all posts