Video walkthroughs · Claude Code Club

Three Levels Of Motion Graphics With Claude Design

14 minute read · Companion guide to “Claude Fable 5.1 + Claude Design = STUNNING Motion Graphics!”

Motion graphics used to be the most expensive thing on a video budget. A sequence like the one that opens this video meant weeks of work from someone very good: modelling, shaders, camera moves, timing every letter by hand. The interesting part of what follows isn't that a model can now render one of those. It's that the model can write down the rules for how things move, save them as a file, and then produce an unlimited number of on-brand sequences from that one file. This page is the three levels that get you there, and you can climb all three in an afternoon.

Watch the full build: three levels of Claude Design motion graphics, from a bare prompt to a generated sequence with a real motion system behind it.

The worked example running through all of it is deliberately stupid. The topic is how to drink milk. A dumb topic is the right test, because there's no subject matter to hide behind. If the movement reads well on milk, the system is doing the work and not the idea.

Level 1: Ask for an animation with nothing but a topic

Claude Design used to live only in the browser. It now runs inside Claude Code in the desktop app, which means the design canvas and your project files sit in the same place. Open a folder, pick your model, type the design command, and describe what you want made.

The first prompt should be close to empty. Name the format, name the topic, and tell it to start from nothing. On this run the whole brief was: design an animation about how to drink milk, ignore any existing design assets or files, start from scratch. That's it. No palette, no reference, no timing notes.

That ignore clause is doing more work than it looks like. Anyone who's been building with Claude Code has design files sitting around, and the model will happily read them and blend them in. A level 1 run is only useful if nothing is quietly steering it, because the entire point is finding out what the model reaches for on its own.

What came back was fine. Not remarkable, definitely not something you'd put in front of a client. That's the correct result for level 1 and it isn't a reason to stop. You've just learned what bare capability looks like, which is the baseline every later level gets measured against.

Level 1: Treat the canvas and the alternates as the real output

Two things about the level 1 output matter more than the animation itself.

The first is that everything on the canvas stays editable. You can click any element, open the properties panel, and change it. If the animation is about milk and you'd rather it be orange juice, that's a text edit, not a regeneration. Nothing is baked into a flat image.

The second is that Claude Design always produces alternate versions of whatever you asked for. On the milk run it made the main animation, a type-only variant, and a small diagram version. You didn't ask for any of them and you didn't pay extra attention to get them. The alternates are where you find the direction you wouldn't have thought to brief, so read them before you judge the run.

Level 2: Hand it a reference video instead of adjectives

Level 2 is where this stops being a toy. Instead of describing the movement you want in words, you give the model something to look at.

Go to Pinterest, search motion graphics, and find a piece of animation you'd be happy to be compared to. You're not copying it. You're giving the model a target so it stops guessing. Look for a reference that's doing a lot at once: multiple element types, several transitions, text animation, a clear rhythm. A reference with only one trick in it produces a system with only one trick in it.

Then hand over the link with one instruction: create a motion design system from this reference. That's the whole prompt. Claude reads the video frame by frame and writes the rules out as a system you can open and read.

Describing motion in words is where almost everyone loses. Words like snappy, smooth, punchy, and premium mean nothing to a model because they mean different things to every person who says them. A reference video removes the translation step entirely.

Level 2: Read the rules it wrote before you generate anything

The system that came back on this run named itself scatter and settle, and it held eight rules. Naming matters more than it sounds: a named system is something you can point at in a later prompt in three words instead of re-describing it.

The rules were specific in the way a real motion brief is specific:

• Elements arrive, they don't fade. Fading is the default an unbriefed model reaches for, and it's why AI animation usually looks flat.
• They come in fast, overshoot the mark, then settle back. That single behaviour is most of what makes motion feel physical instead of computed.
• Text animates one letter at a time rather than as a block.
• Transitions between scenes are named and typed, so the same move repeats instead of being reinvented per cut.
• Animation curves are written out. These are the acceleration profiles that decide how a thing moves between two points, and they're the difference between professional and amateur far more often than the artwork is.

It didn't stop at the written rules. It built working demonstrations of each one: the grid animation from the reference, a landing element that overshoots and settles, a shuffle move, animated type, shape transitions. A system with runnable examples in it is a system you can verify before you spend anything on generation. Open it, watch the examples, and change any rule you disagree with while it's still cheap to change.

The motion design system is the expensive artifact, not the render

This is the idea worth taking even if you never make an animation. Most people prompt for an output. You should prompt for the rules that produce the output, then keep the rules.

A motion design system is a real deliverable in the design industry. Agencies produce them for brands, they take months, and they cost tens of thousands of dollars. The document exists because a brand needs every piece of motion it ever ships to feel like it came from the same place, and the only way to guarantee that is to write the behaviour down. That document is now a reference link and one prompt.

It changes four things at once:

• Every future sequence inherits the movement for free. Ads, intros, explainers, and social cuts all point at one file and come out as a family.
• Your prompts get short. You stop describing how things should move and start describing only what this particular clip is about.
• Feedback becomes editable. If the overshoot is too bouncy, you change one rule in one file instead of re-explaining it every run.
• Taste becomes transferable. A file can be handed to a teammate, a contractor, or a skill. A feel in your head can't.

The model stops reinventing your look the moment your look exists somewhere it can read. Everything in level 3 is downstream of that one move.

Level 2: Generate through the system in a separate artboard

With the system built, the second animation prompt was: in a separate artboard, use this motion design system to create an animation on how to drink milk. Same topic as level 1, new rules.

Separate artboard is a small phrase carrying real weight. It keeps the level 1 result intact next to the level 2 result, so you're comparing two things rather than remembering one. When you're evaluating a system, you need the before still on screen.

The result was better in the ways the system covered and unremarkable in the ways it didn't. Layout and composition were good. Colour was good. Text animation was good. Dynamism and transition variety were still soft, and that's a fair reading, not false modesty. The system covered how elements move. It didn't cover pacing across a whole sequence, so pacing stayed average.

That's the decision point at the end of level 2. If what's missing is a rule the system could hold, add it to the file and re-run. If what's missing is cinematography, camera, and real rendered texture, no amount of canvas animation will get you there, and you go to level 3.

Level 3: Turn the system into a timestamped video prompt

Level 3 combines the motion design system with an AI video model. The system stops being the thing that renders and becomes the thing that briefs.

The prompt was one sentence with four jobs in it: use the scatter and settle motion system and the reference style, write a prompt for Higgsfield and Seedance 2.5 for a motion graphics sequence on how to drink milk, be creative and consider transitions and dynamic camera movement, and ignore any pre-existing iterations because we want something fresh.

Notice what's being asked for. Not a video. A prompt. Claude reads its own system file, then writes the brief a video model needs, and that brief is far more structured than anything most people type by hand:

• A premise. What the sequence is about in one block, so the model has an anchor.
• An asset list. The specific elements that appear, named up front.
• A look. Pulled from the motion system rather than invented per generation.
• A beat sheet with timestamps. Second by second, every single thing that happens.

The timestamped beat sheet is the part that separates a usable generation from a lucky one. A video model given a paragraph of vibes returns a paragraph of vibes. Given thirty seconds broken into named beats, it has something to hit. Writing that by hand is slow and tedious, which is exactly why handing the job to the model that already holds your system is the right split of labour.

Level 3: Connect a video model to Claude Code

To generate inside the same run, Claude Code needs access to a video model. Higgsfield is the route used here because one connection gives you the current image and video models, including Seedance 2.5 and GPT Image 2.

1. In Higgsfield, open the MCP and CLI tab and copy the link.
2. In Claude, click the plus button at the bottom of the chat.
3. Go to connectors, then manage connectors.
4. Click add, then add custom connector.
5. Name it Higgsfield, paste the URL, and click continue.
6. Sign in with your username and password. Every image and video model on the site is now callable from inside your runs.

Once it's connected, watch the thinking rather than the spinner. On this run Claude went and found the motion design system folder on its own, read it, and only then wrote the video prompt. That's the behaviour you want to confirm. If it writes a prompt without opening the system, the system isn't being applied and you'll get a generic clip with your brand nowhere in it.

Decide whether to storyboard first or go straight to video

Both paths got tested on the same concept, which is the only honest way to compare them.

Straight to video means the timestamped prompt goes to Seedance and you get a sequence back. It's faster and it's fewer moving parts. The milk version came back with real style, a clean read from mood into the beats, and one visible flaw: the model couldn't spell the word gulp. Text rendering inside generated video is still the weakest link, and it's the single most common thing that ruins an otherwise good clip.

Storyboard first means asking for the board before the video. Claude used GPT Image 2 to produce twelve panels as one single image, then passed that image to the video model alongside the prompt. The result was similar in some places and different in others, but the important part is what a board buys you: a cheap look at composition and staging before any video credit is spent, and a visual anchor that keeps the generation from drifting.

Storyboard when someone other than you has to approve the result, or when the sequence has more than a few beats. Go straight to video when you're exploring, when the clip is short, and when you'd be happy to just regenerate it. For any client work, board first. The board is also the thing you show them.

Put yourself on screen, and get the sheet approved before you generate

The second intro clip has a real person in it, and it was built from a character sheet. Upload a few photos of yourself to an image model and ask for a character sheet of this person wearing whatever you actually wear on camera. That sheet becomes a reference you can pass into every future generation so the same face comes back every time.

From there the brief stacks pieces you already have: use this character sheet and this voice, the person in the orange hoodie is the on-screen talent, have them say the intro script word for word, pull the key words out and animate them on screen, hold this style, and change the camera between shots with slow push-ins and slight orbits.

Then the move that matters commercially. Before generating anything, ask it to build the motion design sheet, the shot list, and the camera angles first, so you can approve them. What came back was a full colour palette, the type treatment, small mockups of every camera angle, and little animated previews of the shots. It read like a pitch deck, and it cost no generation credits at all.

If you're doing this for clients, that's the actual product. Showing someone three motion sheets and a shot list before you render anything is how the deal closes, and it's how you stop paying to generate work that gets rejected. It also surfaces the one question worth answering early: eight separate shots stitched together, or one continuous generation. Stitching gives you control over each beat. A single generation gives you continuity and a much simpler edit. On this build the answer was one continuous twenty-two second generation with a timestamped prompt.

The failure modes we hit on this exact run

None of these are hypothetical. Every one showed up while making the milk sequences.

• Misspelled words inside generated video. The word gulp came back wrong and no prompt fix reliably prevents this. Fix: keep critical words out of the generated frame and add them as editable type over the top, or accept it on throwaway clips.
• Existing design files hijacking an experiment. If there are design assets in the folder, the model reads them and blends them in, and you'll think the model has no taste when it was following your old rules. Fix: say start from scratch and ignore existing assets, by name.
• A reference with only one trick. A thin reference video produces a thin system, and every clip after that inherits the thinness. Fix: pick a reference with multiple transition types, several element behaviours, and text animation in it.
• The system written but never applied. Claude can write a video prompt without ever opening the system file, and the output looks generic. Fix: watch the thinking and confirm it read the folder before it wrote the prompt.
• Flat pacing. Level 2 output that's well composed and still feels static usually means the system covered element behaviour but not sequence rhythm. Fix: add pacing and transition variety as explicit rules, or move to level 3 where the video model handles camera.
• Iteration contamination. Later runs on the same topic quietly copy earlier attempts. Fix: tell it to ignore pre-existing iterations when you want something genuinely fresh.

Four of those six are scope and instruction problems, not capability problems. The model was able the whole time. It just wasn't told where the edges were.

Package the working pipeline once it works twice

When level 3 works two runs in a row, it's stopped being an experiment and become a procedure. That's the moment to encode it, so the next sequence is a topic and a wait rather than an afternoon.

A motion graphics skill has to hold five things, and you decided all five while climbing the levels:

• The path to the motion design system file, so every run inherits the movement
• The beat structure: how long the sequence is, what the opening beat does, what the closing beat does
• The scope fence, so the model produces the sequence and stops
• The generation path: board first or straight to video, and which models
• The character sheet reference, if a person appears on screen

We built exactly that as an installable mograph skill: you hand it a topic and it runs the whole chain, from motion system to finished sequence, without you writing any of the prompts. The skill and the exact prompts behind it live inside the Claude Code Club for nine dollars a month at https://www.skool.com/claudecodeclub/about. Everything above this line you can run by hand today, and it works.

The path from reading this to having a clip

The shortest honest sequence from finishing this page to having something you'd actually show someone. One sitting.

1. Make a folder for the project and open it in Claude Code in the desktop app.
2. Run the design command with a bare brief on a topic you don't care about, and tell it to start from scratch. Look at what it reaches for, and read the alternates.
3. Go to Pinterest, search motion graphics, and find one reference with several transitions and real text animation in it.
4. Give Claude the link and ask it to create a motion design system from that reference.
5. Open the system, watch the example animations, and change any rule you disagree with while it's still free to change.
6. Ask for a new animation in a separate artboard, generated through that system, on the same topic. Compare it to the level 1 result side by side.
7. Connect Higgsfield as a custom connector so a video model is callable from inside the run.
8. Ask Claude to write a timestamped beat by beat video prompt from the motion system, and read the beats before you let anything render.
9. For anything with an audience, ask for the storyboard and the shot list first and approve those before generating.
10. Save the motion design system somewhere permanent and point your next sequence at it.

Step ten is the one people skip, and it's the one that compounds. The clip is this week. The system is every week after that.

Read this online at claudecodeclub.ai