10 Claude Animation Prompts for Better Motion Graphics

Ask Claude to "add an animation" and you'll usually get something that fades in over 0.3 seconds with a default ease. It works. It also looks like every other AI-generated page.

The difference between that and motion that feels designed is almost always in what you specify: timing, easing, order and purpose. Claude is very good at following those details when you give them. Below are ten prompts I'd actually use, with the reason each one works. Swap the bracketed parts for your own project.

They work in a Claude chat for HTML, CSS and JavaScript, and in Claude Code for full scenes rendered to video.

1. Give motion a job

Animate [element] so the motion explains [the idea],
not just decorates it. Describe in one sentence what the
movement should make the viewer understand, then build it.

Why it works: asking Claude to state the purpose first stops it reaching for a generic fade. If the movement can't be explained in a sentence, it probably shouldn't be there.

2. Specify easing like a designer

Use a custom cubic-bezier instead of ease or linear:
fast out, slow settle, for example cubic-bezier(0.22, 1, 0.36, 1).
Entrances 450–600ms, exits 200–250ms. Exits are always faster.

Why it works: default easing is the single biggest reason animations feel cheap. Faster exits than entrances is a small rule that makes interfaces feel responsive.

3. Stagger instead of animating everything at once

Reveal the [cards / list items / words] one after another with a
60–80ms stagger, each moving up 12px while fading in.
Cap the total sequence at 700ms no matter how many items there are.

Why it works: staggering creates a reading order. The cap matters: without it, a list of 20 items takes forever.

4. Animate on a timeline, not with scattered delays

Build this as one timeline object with named beats and their
start times in seconds, so I can retime the whole sequence by
editing one place. Then render the animation from that timeline.

Why it works: this is how video tools think. One source of timing means "make the second beat half a second longer" is a one-line change.

5. Ask for anticipation and settle

Before [element] moves, give it a tiny anticipation (2–3% in the
opposite direction, ~80ms). At the end, a subtle overshoot that
settles back. Keep it understated.

Why it works: these are classic animation principles. Even at a few percent, they make movement feel physical instead of mechanical.

6. Make numbers count, not jump

Animate this number from [start] to [end] over 1.2s with an
ease-out curve, using tabular figures so the width doesn't jitter.
Format with thousands separators while it counts.

Why it works: counting numbers are everywhere in explainers and dashboards. Tabular figures are the detail people forget, and the jitter is what makes it look broken.

7. Draw lines instead of showing them

Draw this SVG path on screen using stroke-dasharray and
stroke-dashoffset over 1s, then fade in the labels along it
in the order the line reaches them.

Why it works: a line that draws itself guides the eye along a chart, a route or a process, which is exactly what an explainer needs.

8. Respect reduced motion from the start

Wrap all non-essential motion in
@media (prefers-reduced-motion: no-preference).
For people who prefer reduced motion, show the final state
immediately or use a simple opacity change.

Why it works: it's an accessibility requirement that's painful to add later and free to add now.

9. Render frames you can check

In Claude Code: write a Node script that renders this animation
frame by frame with canvas at 1080x1920, 30fps.
First export only frames at 0s, 2s, 4s and the last frame as PNGs
so we can review them before rendering the full MP4 with ffmpeg.

Why it works: checking a handful of stills catches overlaps and cut-off text before you spend time on a full render. It's how I make my own explainer videos with Claude.

10. Lock a style so the next one matches

Write a short style guide for this animation: colour values,
font, type sizes, easing curves, durations and the rules we
followed. I'll give it to you at the start of the next one.

Why it works: the first good animation is luck plus effort. A written style guide turns it into something you can repeat, and it's the core of what makes a Claude skill reusable.

Putting them together

You don't need all ten every time. For a UI micro-interaction, prompts 2, 3 and 8 cover most of it. For a short explainer video, 1, 4, 9 and 10 do the heavy lifting. Start with the purpose, be specific about timing, and always review a few frames before calling it done.

If you'd rather start from a style that already works, my own video styles are packaged as Claude skills on the video styles page, and Rays is free.