motif.THE MOTION INDEX

A little guidance. A lot of possibility.

How to make motion
with Claude.

You don’t need to know how to animate to begin. Start with a few words, turn them into a moving idea, and make it your own.

Make your first motion Beginner friendly · A browser + a Claude account
A small example of where to start.
THE SHORT ANSWER

How does Claude make motion?
It writes the code.

To make motion with Claude, you ask it to write code (HTML, CSS, SVG or React) that plays as an animation; Claude does not generate video footage. Claude Motion (beta, Team and Enterprise) exports MP4s inside Claude. With a Claude account, ask for a self-contained HTML artifact. For rendered video files, use Claude Code with Remotion or HyperFrames.

Your first motion in four steps

  1. Describe one small ideaSay what moves, how it moves and how it should feel, and ask for a self-contained HTML artifact.
  2. Preview it in ClaudePaste the prompt into any conversation. The artifact opens beside the conversation.
  3. Change one thing at a timeAsk for follow-ups in plain language: slower timing, a softer ease, a cleaner loop.
  4. Save it or make an MP4To keep it, export it as standalone HTML if you used the Design template, or ask Claude to put the complete HTML file in its reply, save it as a .html file and open it in a browser. For video, export from Claude Motion, render with Remotion or HyperFrames, or screen-record it.
Which route should you use?
RoutePlan or accessYou getBest for
Route 1HTML animation in chatAny Claude plan, with Cloud code execution and file creation (called Create and edit files in the updated Settings layout) turned onAn HTML animation that opens beside the conversationYour first animation, loops and quick experiments
Route 2Claude Motion (beta)Team and Enterprise plansAn editable animation with Export > MP4An MP4 without leaving Claude
Route 3Claude Code + Remotion or HyperFramesClaude Code (included in paid Claude plans, or pay-as-you-go API credits)An MP4 rendered on your machineRepeatable, versioned video projects
01 / THE STARTING POINT

A good motion starts
with a clear idea.

A prompt is simply a description of what you want to make. Tell Claude what moves, how it moves, and what it should feel like.

Pick a starting point, then edit the words, colors or timing in the prompt. Small and specific is a good place to begin.

Need an idea? Explore the archive
TRY THINKING IN THREE PARTS

What moves + how it moves + the feeling

A wordmark that gently slides into place, calm and minimal.
YOUR FIRST PROMPTEDIT → COPY → CREATE

Select the prompt text and copy it manually. Open Claude to continue.

02 / FROM WORDS TO MOVEMENT

Now, bring it to life.

Open a conversation in Claude and paste your prompt. The HTML artifact, a small interactive page, opens beside the conversation and starts private to you.

When it appears, play the animation. You can ask for changes in the same conversation, using everyday language.

In the Claude iOS and Android apps you can view and edit artifacts in the Artifacts tab; to change sharing settings, use Claude on the web or Claude Desktop.

Open Claude
YOUR FIRST PREVIEW

Look for the movement,
not perfection.

  • Can you read the text comfortably?
  • Does each move have a little room to breathe?
  • Does the loop return smoothly to the start?
Only seeing code, or something broke?

Ask: “Show this as a working HTML artifact I can preview.” If no preview opens, turn on Cloud code execution and file creation (called Create and edit files in the updated Settings layout) in Settings > Capabilities (Team and Enterprise: Organization settings > Capabilities). If there’s an error, paste its message back into the conversation and ask Claude to fix it.

03 / THE PART THAT MAKES IT YOURS

One small change.
A different feeling.

Change one thing at a time. Try one of these follow-ups in the same conversation and see what happens.

TIMING

Let it breathe.

“Slow the movement down by 25% and hold the final frame for one second. Keep the rest the same.”

CHARACTER

Give it a little spring.

“Add a subtle overshoot when the shapes settle. Keep it gentle, with no extra bounce.”

FINISH

Close the loop.

“Make the ending flow back into the beginning without a jump. Keep the same colors and layout.”

FROM ANIMATION TO VIDEO FILE

Need an MP4?
Four ways to get one.

The prompt above makes a browser animation. These routes turn motion into a video file you can post or edit. Claude Code can also publish its work as an artifact page: a live page at a private URL that updates as the session goes on and that you can share. Since Claude Code v2.1.311 (October 26, 2026), it makes explainers and visual or interactive work into pages rather than documents. A page is not a video file, so for an MP4 you still render with Remotion or HyperFrames.

CLAUDE MOTION · TEAM AND ENTERPRISE PLANS

Export from Claude Motion

Claude Motion is Anthropic’s Motion artifact, in beta. It builds each animation as code, then exports it as a video. Team: on by default. Enterprise: an owner turns it on in Organization settings > Artifacts.

  1. Ask Claude for an animation, choose Output > Motion in the message box, or pick a Motion template in the Artifacts tab.
  2. Edit by chatting or in the editor.
  3. Choose Export > MP4. Animations start private; use Share to show someone.
Get started with Claude Motion
CLAUDE CODE · REMOTION

Render with Remotion

Remotion renders React compositions to MP4. Install its official agent skills, then ask Claude Code to build a composition and render it. Needs Node.js; Remotion ships its own FFmpeg.

npx skills add remotion-dev/skills

Or use the Claude desktop app: select Code, open Customize, choose Plugins, then Discover, search for “remotion” and add the Remotion plugin. It includes Remotion’s agent skills.

Check the Remotion licence before you use it for work.

Remotion agent skills
CLAUDE CODE · HYPERFRAMES

Render with HyperFrames

HyperFrames, HeyGen’s open-source renderer (Apache-2.0), turns HTML into MP4 with headless Chrome and FFmpeg. Needs Node.js 22+ and FFmpeg. Install it as a Claude Code plugin:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
HyperFrames on GitHub
ANY ROUTE · NO INSTALL

Screen-record the artifact

Open your saved .html file in a browser, play it full screen and record it with a screen recorder. The video matches what your screen shows, so set the window size you want first.

Giving Claude API keys for a third-party video generator? Set a prepaid or hard spending cap so an agent loop cannot run up charges.

WHEN THE FIRST RESULT FEELS FLAT

Make it look
less generic.

First results rarely land in a single prompt — plan to iterate. They tend to be generic, or too fast and crammed. These habits help.

  1. Start from a reference

    Share a frame you like or your brand assets (logo, colors, fonts) instead of describing a style from scratch.

  2. Storyboard before code

    Ask for a beat list first: each scene, what moves and for how long. Approve it, then ask for the animation.

  3. Change one thing at a time

    One follow-up per change, timing or color or layout, so you can tell what helped.

  4. Check still frames first

    Ask Claude to check still frames before the full render, so problems surface before you wait on a video.

  5. Give each scene room

    First results are often too fast and crammed. Ask for longer holds and fewer elements per scene.

  6. Give numbers, not adjectives

    Ask for a “smooth, polished” animation and, per @0xCodio’s tutorial, you get default timing and a bounce on everything. Give numbers instead: durations in milliseconds, the easing curve, the delay between items and how much overshoot.

  7. Make every frame a function of time

    Ask for code where any frame can be drawn from its time alone, with no timers and no random values that change from one render to the next. Then Claude can render stills or a contact sheet for you to review before the full render. Explained by Arqam Waheed and Tommaso Nervegna.

  8. Use your real product

    For a product video, give Claude your real app screens, components or brand files instead of letting it invent the UI. In Rishabh Saxena’s case study of a 30-second promo for Habitmon, the author’s own app, Claude ported the app’s real components into the video project; the author reports about 14 hours from an empty project to the final files.

FROM THE ARCHIVE

Examples from
the archive.

The most liked motions in the archive whose creators shared their prompt. Watch one, then borrow its prompt.

  1. Claude motion designer showreelby Stephan Livera
  2. Interactive lab explains focus with an exploded camera lensby Ryan Sael
  3. Shape morphing through UI statesby zero
  4. Pixel-art neural network learning to read a handwritten 2by Carlos Santana
  5. Paperclip planet tagged permanent underclass in an AI shortby donald
  6. Life-size LEGO Microduck assembled brick by brick in 3Dby Victor M
More Claude animation prompts from real videos
FREQUENTLY ASKED

Questions about
motion with Claude.

Can Claude make videos?

Not filmed footage. Claude writes code (HTML, CSS and JavaScript, SVG or canvas, React or Three.js) that plays as an animation. A video file comes from Claude Motion’s Export > MP4, from a renderer such as Remotion or HyperFrames driven by Claude Code, or from a screen recording.

Do I need Claude Motion, and which Claude plan has it?

No. Claude Motion is Anthropic’s Motion artifact, in beta since it was announced on October 8, 2026. It is available on Team plans (on by default) and Enterprise plans (an owner turns it on in Organization settings > Artifacts). It is not listed for Free, Pro or Max plans. Without it, ask Claude for a self-contained HTML artifact or use Claude Code with a renderer.

How do I get an MP4 from Claude?

Choose Export > MP4 in Claude Motion; ask Claude Code to render the animation with Remotion or HyperFrames; or open your saved .html file in a browser and screen-record it. How to turn a Claude HTML animation into an MP4 compares the options.

Should I use Opus 5.5 or Sonnet 5.5 for motion?

Either can write animation code. In this archive, creators credit 3,146 videos to Opus 5.5 and 92 to Sonnet 5.5. Model credit follows each creator’s claim, so it shows what people used, not which model is better.

Why does my Claude animation look generic, and how do I fix it?

First results are often generic, or too fast and crammed. Give Claude a reference or your brand assets, ask for a storyboard or beat list before any code, change one thing at a time, ask it to check still frames before the full render, and give each scene room to breathe.

How much does it cost, and how much usage does it take?

Claude Motion counts toward your plan’s usage limits, and longer or more complex animations use more. Chat artifacts use your Claude account’s usage limits. Claude Code is included in paid Claude plans and shares their usage limits, or you can use pay-as-you-go API credits. Remotion has its own licence terms, so check the Remotion licence before you use it for work. If you give Claude API keys for third-party video generators, set a prepaid or hard spending cap so an agent loop cannot run up charges.

Do I need to know how to code?

No. You describe the motion in plain language and Claude writes the code. The chat route needs Cloud code execution and file creation (called Create and edit files in the updated Settings layout) turned on in Settings > Capabilities (Team and Enterprise: Organization settings > Capabilities). Claude Motion is on by default on Team; on Enterprise an owner turns it on. The Claude Code routes run commands in a terminal and need Node.js installed.

Can Claude Motion make realistic footage or people?

No. Claude Motion has no video model. It builds each animation as code, so it does not produce realistic footage or people.

Can Claude make GIFs?

Yes. Claude writes code that draws each frame and saves the result as a GIF. Anthropic’s slack-gif-creator skill (Apache-2.0) makes animated GIFs sized for Slack and checks them against Slack’s requirements, and elayadesign’s MIT-licensed design-to-motion skill turns a static design into a looping animation and exports a website GIF and an 800×500 GIF next to an MP4; see Agent skills for motion.

Can Claude animate in Blender?

Yes, through Blender’s Python API. The official Blender connector, built by the Blender developers, gives Claude access to your open scene; it works in Claude Desktop on any plan, including Free, but not on claude.ai in the browser. Claude Academy lists Blender 4.2 or later, but the current add-on (v1.0.3) needs Blender 5.1 or later. See Claude with Blender and After Effects.

Can Claude make painted animated shorts?

Yes. Coding-agent skills write each scene as code in a painted style: huashu-art-motion (MIT; its instructions are mostly in Chinese) has recipes for styles such as Van Gogh and Monet, and Tobi’s Shorts Animator paints looks such as oil or watercolour and adds narration and music. Shorts Animator is Tobi’s own product: his page listed it as free on October 27, 2026, it arrives by email as a zip, needs Claude Code (paid plan) or Codex and runs an installer on your machine; his tutorial is in Written tutorials.

Can Claude make ASCII animations?

Yes, and creators in the archive have shared ASCII animations made with Claude. The bas3line/ascii skill (MIT) teaches Claude Code and other agents a library of 240 animated ASCII pieces for React, Next.js, Astro or one HTML tag, plus a kit for your own pieces and an image-to-ASCII tool; the no-build tag loads from ascii.rest, and the README thanks its sponsors (Command Code, Vercel and Cloudflare). It is listed in Agent skills for motion.

Which skill should I install?

Pick by the output you want: Remotion’s official agent skills or HeyGen’s HyperFrames plugin for an MP4 from Claude Code, slack-gif-creator or design-to-motion for GIFs, huashu-art-motion for painted styles and bas3line/ascii for ASCII. Agent skills for motion lists motion skills with their licence, stars and last update. A skill can include scripts that run on your machine, so read it before you install it.

YOU HAVE SOMETHING MOVING. NOW WHAT?

Keep the idea going.

Your artifact is saved in Claude’s Artifacts tab. To keep a copy, ask Claude to put the complete HTML file in its reply, save it as a .html file and open it in a browser. Use Claude’s sharing options when you’re ready to show someone.

Need an MP4? This starter creates a browser animation. For a video file, explore a rendering workflow such as Remotion in the resource library.

Find tools & video workflows Go deeper with the Claude motion guides Learn more about motion Find your next idea

Sources

Facts checked · Claude Motion is in beta, so details may change.