Ordalin
Submit a tool

Ordalin guide

Claude Motion Graphics: 3 Ways to Make Them + 49 Free Demos

How to make motion graphics with Claude: the Claude Motion beta, Claude Code with an open-source skill, or After Effects. Setup, prompts, limits and 49 demo films.

Yes, Claude can make motion graphics. It does not generate video the way Sora or Veo do. Claude writes code (HTML and CSS, React for Remotion, Lottie JSON or After Effects scripts) that draws every frame from time, and a renderer turns that into an MP4. That is why text, numbers and charts stay sharp and why you can change one word without redoing the film. It is also why Claude cannot make realistic footage or people.

There are three ways to make Claude motion graphics today:

RouteWhere it runsBest forSetup
Claude Motion (official, beta)claude.ai, Team and Enterprise plansExplainers, animated charts and walkthroughs for workNone if your workspace has it
Claude Code + a motion graphics skillYour computer, through Claude CodeLaunch films, social clips, any plan with Claude CodeInstall a free skill, Node and ffmpeg
Claude + After EffectsAfter Effects, driven by Claude through MCP or scriptsMotion designers who finish in AEAn MCP bridge or pasted ExtendScript

Want to see results first? Jump to the 49 demos.

1. Claude Motion: the official way

Anthropic added Claude Motion to claude.ai on 8 October 2026. According to the Claude Help Center, checked on 12 November 2026:

  • What it makes: short animations such as an all-hands explainer, an animated chart for a board deck or a product walkthrough. Each one is an artifact built from the Motion template, and Claude animates the text, charts, shapes and images in it with code. It "doesn't use a video generation model".
  • Who has it: it is in beta on Team and Enterprise plans. It is on by default for Team. On Enterprise an owner turns it on in Organization settings > Artifacts. The page does not list Pro or Max.
  • How to start: ask for an animation in any chat, or select Output in the message box and choose Motion, or pick a Motion template in the Artifacts tab.
  • Editing: ask for changes in the chat (slow a scene, update a number) or edit directly in the editor. Because the animation is code, the rest stays the same.
  • Export and sharing: Export gives an MP4, the only format the page mentions. Animations start private; Share makes a link.
  • Cost: it counts toward your plan's usage limits, and longer or more complex animations use more.
  • Not published: a maximum length, export resolution or exact usage numbers.

Anthropic's tip for better results: say who will watch it, where it will play and roughly how long it should run, and attach the reports, data or images you want used.

2. Claude Code with a motion graphics skill

If you are not on a Team or Enterprise plan, or you want launch films and social clips rather than office explainers, use Claude Code with a skill. A Claude motion graphics skill is a folder of instructions and templates that teaches the agent one way of working: how to plan the shots, which renderer to use, how to time text and sound, and how to check its own frames before it renders. Most use one of three renderers:

  • HyperFrames: HTML pages rendered frame by frame. Apache-2.0.
  • Remotion: React components rendered to video. Free for individuals and small teams; companies above Remotion's threshold need a company licence.
  • Plain HTML + Playwright + ffmpeg: a headless browser steps through the page and ffmpeg encodes it. Several of the skills below do this, so there is nothing to license.

Popular free skills, checked on GitHub on 12 November 2026:

SkillStarsRendererLicenceGood for
heygen-com/hyperframes82.9KHyperFramesApache-2.0General video from HTML
remotion-dev/skills6.9KRemotionSee repoRemotion best practices
vincentsch/explainroo1.2KPlaywright + ffmpegMITNarrated explainers
Barty-Bart/motion-graphics1.2KHTML + own render scriptMITExplainers, B-roll for talking heads
whaleyxbt/claude-motion945Remotion + web simsMITFeature explainers, simulations
AbubakrChan/product-launch-motion451Playwright + ffmpegMITPolished product launch films

Install one, then ask Claude Code for a video in plain words:

# HyperFrames as a Claude Code plugin
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

# Or any skill from the skills registry
npx skills add remotion-dev/skills
npx skills add Barty-Bart/motion-graphics

A first prompt can be as short as: "Make a 20-second 1920×1080 launch video for [product]. Use only these facts: [list]. Show me stills of every scene before you render the MP4."

Do you need a skill at all?

Not to get a working video. The awesome-claude-video-skills list tested 16 skills with Claude Code on Opus 5.5 on 11 October 2026, giving each the same 15-second brief, plus one run with no skill. Every run, including the one without a skill, produced a 15-second 1920×1080 video that passed all four checks. The no-skill run took 4.4 minutes. explainroo was the fastest skill at 2.0 minutes and HyperFrames the slowest at 23.5.

What a skill changes is the look and the habits: the style, the pacing, whether there is sound, how many frames sit still. The motionmaxxing demos below show this directly, with the same brief rendered without and with the skill.

Which model is best for motion graphics?

No independent benchmark compares Claude models on motion graphics yet. What we can point to:

  • Several skill authors tune for Claude Opus 5.5. product-launch-motion says smaller models "follow the rules but miss the detail", and the Howseen launch film in the demos was made with Opus 5.5 in five iterations.
  • In our own Cinetic test, the same 15-second brief on Claude Fable 5.2 and Opus 5.5 both rendered a finished film with synced sound in 18 minutes. Fable 5.2 cost $6.26 and Opus 5.5 cost $3.60.
  • Skills are plain files, so most also run in Codex or Cursor. One of the motionmaxxing before-and-after films was made with GPT-6.1, so we left it out of this page.

3. Claude and After Effects

If you finish work in After Effects, Claude can drive it rather than replace it. Two ways:

  • An After Effects MCP server. Community projects such as a-y-ibrahim/after-effects-mcp (MIT) connect Claude Code to a panel inside After Effects. Claude can then create layers and keyframes, run ExtendScript and render a frame back as an image to check its own work. It is added with claude mcp add. These are small projects, so check which After Effects version each one supports.
  • Scripts and expressions. Without an MCP server, ask Claude for an ExtendScript (.jsx) that builds the composition, or for an expression (a wiggle, a bounce, a counter) and paste it in. You keep the timeline and finish by hand.

Claude does not ship an official After Effects integration.

Prompt tips that hold across all three routes

  • Say who will watch it, where it plays and how long it runs. That is Anthropic's own tip, and every skill asks for the same three things.
  • Give a fact list. Words and numbers the agent invents are the most common error. Charlie Hills's skill builds every word from a list he approves.
  • Ask for stills or a contact sheet before the render. Rendering is the slow part, and most skills check frames first.
  • Carry one idea. The strongest films in the wall follow one shape or one motif from start to end instead of cutting between slides.
  • Change one thing at a time. The film is code, so "make scene 3 half a second longer" changes only scene 3.

Limits to know

  • No real footage or people. Claude draws shapes, type, charts, UI and illustrations. Some skills add AI clips or AI narrators through other services; those demos are labelled.
  • Rendering takes minutes, not seconds. The test runs above took 2 to 24 minutes for 15 seconds of video.
  • Claude Motion is beta and limited to Team and Enterprise. Its length and resolution limits are not published.
  • Sound is up to you or the skill. Some skills synthesise sound effects or pick licensed music; others render silent video.
  • Licences differ. The skills are MIT or Apache-2.0, but Remotion, GSAP and some fonts and music they use have their own terms.

FAQ

Can Claude AI do motion graphics?

Yes. Claude writes code that animates text, charts, shapes and images, then renders it to MP4. Use Claude Motion on a Team or Enterprise plan, Claude Code with a free skill on any plan with Claude Code, or Claude with After Effects.

Which AI model is best for motion graphics?

For code-based motion graphics, most skill authors build and test on Claude Opus 5.5. In our Cinetic test Claude Fable 5.2 matched it on the same brief at a higher cost. Video-generation models such as Veo or Sora are a different tool: they make footage, not editable graphics.

Can Claude AI do graphics?

Yes. Claude makes static graphics as SVG, HTML or charts in artifacts and Claude Code, and the same code can be animated. It does not paint photographs; for that you need an image model.

How do I use Motion in Claude?

On a Team plan, ask for an animation in any chat, or select Output and choose Motion. On Enterprise, an owner first turns it on in Organization settings > Artifacts. Export the result as MP4.

Is Claude Motion available on Pro or Max?

The Help Center lists only Team and Enterprise for the beta. On Pro or Max, use Claude Code with a skill instead.

Can I use Claude motion graphics commercially?

Check Anthropic's terms for your plan on how you may use outputs. If you use a skill, check its licence and the licences of what it bundles. Remotion needs a paid company licence above a team-size threshold, GSAP has its own licence, and music and fonts carry their own terms.

More Claude video skills on Ordalin

  • Lemo-Opuscar: a skill that directs, draws, scores and renders a short film in one of 66 styles, with the author's demos.
  • Cinetic: product launch films in Remotion, with our Fable 5.2 and Opus 5.5 test films.
  • Stickman Video Director: narrated stickman videos in 11 styles.
  • rea-video: breaks a video down shot by shot and tells you how it was made.
  • Reanimate: rebuilds an animation from a site, video or GIF and compares it frame by frame.
  • Code animation prompts: prompts for animations written in code.

49 Claude motion graphics demos from open-source skills

Each film comes from the README or site of an open-source skill that runs in Claude Code. It plays from the author's own host, unchanged; the line under each card links the repository and its licence. Where an author names the model or says part of a film was AI-generated, the caption says so.

Launch films and product promos · 13

Cheerful launch film, made with product-launch-motion
Cheerful launch filmproduct-launch-motion. A 30-second launch film for cheerful.ai. The author says every frame is HTML computed from time, with no AI video model; the skill is tuned for Claude Opus 5.5.AbubakrChan/product-launch-motion · MIT
  • Product launch
Cheerful launch, glass pass, made with product-launch-motion
Cheerful launch, glass passproduct-launch-motion. The same launch film with a WebGL pass: refractive 3D shapes float through every scene.AbubakrChan/product-launch-motion · MIT
  • Product launch
  • 3D
One shape, never cut, made with product-launch-motion
One shape, never cutproduct-launch-motion. A 14-second seamless loop in which one element morphs through eleven UI states: button, loader, check, reel, slider, toggle, tabs, chart and more.AbubakrChan/product-launch-motion · MIT
  • UI motion
  • Loop
Hoopoe Club, made with product-launch-motion
Hoopoe Clubproduct-launch-motion. A 43-second Arabic launch film: readers’ cursors like, repost and reply to a post, then vote in a poll.AbubakrChan/product-launch-motion · MIT
  • Product launch
  • Right-to-left
Brag about brag, made with brag
Brag about bragbrag. The brag skill’s own vertical launch video, made by the skill it advertises.latent-spaces/brag · MIT
  • Vertical
  • Project launch
Fish Flight School, made with brag
Fish Flight Schoolbrag. A launch video for a made-up startup, one of brag’s examples of turning a project into a 22-second brag reel.latent-spaces/brag · MIT
  • Project launch
Horse Tinder, made with brag
Horse Tinderbrag. Another invented product, pitched with swipe cards, hearts and a punchline.latent-spaces/brag · MIT
  • Project launch
  • Humour
Taxi for Taxis, made with brag
Taxi for Taxisbrag. A spoof launch with bold type and quick cuts, in the same 22-second brag format.latent-spaces/brag · MIT
  • Project launch
Bicycles for Snakes, made with brag
Bicycles for Snakesbrag. A brag example built around quotes and big editorial type.latent-spaces/brag · MIT
  • Project launch
Psychologists for Chatbots, made with brag
Psychologists for Chatbotsbrag. A brag example that animates a product UI, an intake form, instead of type alone.latent-spaces/brag · MIT
  • Project launch
  • UI motion
showtime 0.2.0 launch film, made with showtime
showtime 0.2.0 launch filmshowtime. A 40-second launch film. The author says every frame comes from a real showtime example.FavioVazquez/showtime · MIT
  • Project launch
Howseen launch video, made with claude-motion-design
Howseen launch videoclaude-motion-design. The launch video of Howseen, made with Claude Opus 5.5 and this skill in 5 iterations, according to the author.howseen-ai/claude-motion-design · MIT
  • Product launch
  • Vertical
Launch film in deep blue glass, made with motion-graphics-skills
Launch film in deep blue glassmotion-graphics-skills. A 20-second launch film: deep blue glass, one glow, every word taken from an approved fact list, no screen recording.charlie947/motion-graphics-skills · MIT
  • Product launch

Product UI, release notes and social · 7

Release notes, rebuilt from source, made with claude-code-video-toolkit
Release notes, rebuilt from sourceclaude-code-video-toolkit. An 87-second release-notes video built from the toolkit’s release-notes template, with the product UI rebuilt in code and a cloned narrator voice.digitalsamba/claude-code-video-toolkit · MIT
  • Release notes
  • Narrated
Scheduling demo, made with claude-code-video-toolkit
Scheduling democlaude-code-video-toolkit. A 26-second synthetic product demo of scheduling a call. The narrator tile is an AI talking head (SoulX).digitalsamba/claude-code-video-toolkit · MIT
  • Product demo
  • AI narrator
Claude Code /effort, explained, made with claude-motion
Claude Code /effort, explainedclaude-motion. A 22-second motion graphic about the Claude Code effort setting, made by Claude from one prompt and one revision.whaleyxbt/claude-motion · MIT
  • Feature explainer
Wispr Flow: without vs with the skill, made with motionmaxxing
Wispr Flow: without vs with the skillmotionmaxxing. Top: the agent without the skill. Bottom: the same brief with it. 24 seconds with sound. Wispr Flow is its owner’s brand; this is an unofficial test.Tejashmakwana/motionmaxxing · Apache-2.0
  • Before and after
Spotify: without vs with the skill, made with motionmaxxing
Spotify: without vs with the skillmotionmaxxing. Left: a headline beside a phone mock-up in every frame. Right: one idea carried through, a green full stop that becomes a switch and then the icon. Spotify is its owner’s brand; this is an unofficial test.Tejashmakwana/motionmaxxing · Apache-2.0
  • Before and after
Your keyframes get a rating, made with motionmaxxing
Your keyframes get a ratingmotionmaxxing. motionmaxxing’s banner: the default word “motion” is measured and then re-timed. Typography and vectors only.Tejashmakwana/motionmaxxing · Apache-2.0
  • Kinetic type
250,000 followers milestone, made with motion-graphics-skills
250,000 followers milestonemotion-graphics-skills. A 12-second loop in which a night sky of points pulls into the author’s real LinkedIn follower count.charlie947/motion-graphics-skills · MIT
  • Social post
  • Loop

Explainers and data stories · 11

GitHub stars, charted, made with claude-code-video-toolkit
GitHub stars, chartedclaude-code-video-toolkit. A 31-second chart video of the toolkit’s GitHub star history: the line draws while the narrator explains each stretch.digitalsamba/claude-code-video-toolkit · MIT
  • Data
  • Narrated
Why is the sky blue?, made with claude-code-video-toolkit
Why is the sky blue?claude-code-video-toolkit. A 52-second vertical concept explainer from the toolkit’s explainer-short template, with a stock text-to-speech voice.digitalsamba/claude-code-video-toolkit · MIT
  • Vertical
  • Education
How explainroo makes a video, made with explainroo
How explainroo makes a videoexplainroo. An 86-second explainer that a coding agent made with explainroo, about how explainroo itself works.vincentsch/explainroo · MIT
  • Explainer
  • Narrated
Multi-head attention in Manim, made with manim_skill
Multi-head attention in Manimmanim_skill. Screen recording: Claude Code installs the skill, then builds a 3Blue1Brown-style visualisation of multi-head attention in ManimGL.adithya-s-k/manim_skill · MIT
  • Maths
  • Education
Design Agent explainer, made with design-agent
Design Agent explainerdesign-agent. A 112-second explainer for LangChain’s open-source design agent, from its README.langchain-ai/design-agent · Apache-2.0
  • Explainer
Cut-paper explainer reel, made with paper-reel
Cut-paper explainer reelpaper-reel. A 23-second vertical reel drawn in code as cut paper, about the author’s khan-explainer skill. Voice by Kokoro, running locally.haiderfarooq3/paper-reel · MIT
  • Vertical
  • Paper style
Clean product demo, made with motion-graphics
Clean product demomotion-graphics. A brief turning into a clean product demo, from the explainer-default skill.Barty-Bart/motion-graphics · MIT
  • Product demo
One-take product story, made with motion-graphics
One-take product storymotion-graphics. The same kind of brief told as a single continuous take, from the explainer-engaging skill.Barty-Bart/motion-graphics · MIT
  • Product demo
Hype promo, made with motion-graphics
Hype promomotion-graphics. A brief turned into a fast, high-energy promo, from the explainer-high-energy skill.Barty-Bart/motion-graphics · MIT
  • Promo
Meet the crew, made with showtime
Meet the crewshowtime. A 45-second film introducing showtime’s ten optional crew agents.FavioVazquez/showtime · MIT
  • Explainer
showtime 0.4.1 showreel, made with showtime
showtime 0.4.1 showreelshowtime. A 55-second showreel rendered in 2 min 23 s on a 64-core CPU with no GPU: seven real showtime films, then the features behind them.FavioVazquez/showtime · MIT
  • Showreel

Overlays for talking-head video · 3

Motion B-roll cutaway, made with motion-graphics
Motion B-roll cutawaymotion-graphics. A motion graphic cut in over the speaker and timed to their words, from the motion-broll skill.Barty-Bart/motion-graphics · MIT
  • B-roll
  • Talking head
Side panel over footage, made with motion-graphics
Side panel over footagemotion-graphics. A Claude Code style panel animated beside a speaker, from the same set of skills.Barty-Bart/motion-graphics · MIT
  • Talking head
Speaker on a new background, made with motion-graphics
Speaker on a new backgroundmotion-graphics. Original footage beside the same footage with the speaker cut out and placed on a new background, from the object-separation skill.Barty-Bart/motion-graphics · MIT
  • Talking head

Simulations and Lottie · 6

The crawler swarm, made with claude-motion
The crawler swarmclaude-motion. 256 spider agents crawl a wall of websites. Made by Claude with this toolkit; the author reports 340K+ views on X.whaleyxbt/claude-motion · MIT
  • Simulation
  • Vertical
One username, one dossier, made with claude-motion
One username, one dossierclaude-motion. Agents turn one username into a dossier pinned with red threads, rendered from a web simulation at 60 fps.whaleyxbt/claude-motion · MIT
  • Simulation
  • Vertical
Inside a rocket engine, made with claude-motion
Inside a rocket engineclaude-motion. The camera flies through a running rocket engine’s chamber; the sound is generated in Python.whaleyxbt/claude-motion · MIT
  • Simulation
  • 3D
Text to Lottie, made with lottie
Text to Lottielottie. The banner of diffusionstudio/lottie, a skill that writes Lottie animation files from a prompt.diffusionstudio/lottie · MIT
  • Lottie
Lottie, built in a live preview, made with lottie
Lottie, built in a live previewlottie. Screen recording: the agent builds a candlestick-chart animation, then a logo animation with colour and stroke controls you can edit.diffusionstudio/lottie · MIT
  • Lottie
  • Logo
Lottie demo: weights and collisions, made with lottie
Lottie demo: weights and collisionslottie. A second screen recording from the same skill: a small physics-style chart animation counting collisions.diffusionstudio/lottie · MIT
  • Lottie
  • Data

Hand-drawn and illustrated · 3

anidoodle launch film, made with anidoodle
anidoodle launch filmanidoodle. A 77-second launch film. The author says every frame and every sound was made with anidoodle, in code.alexgreensh/anidoodle · Apache-2.0
  • Illustration
  • Launch
Mechanical lepidoptera, made with anidoodle
Mechanical lepidopteraanidoodle. A 47-second 1080×1080 film with an original score; every frame and sample is generated in code.alexgreensh/anidoodle · Apache-2.0
  • Illustration
  • Short film
How to draw an owl, made with anidoodle
How to draw an owlanidoodle. A 95-second captioned drawing lesson: the owl draws itself step by step.alexgreensh/anidoodle · Apache-2.0
  • Illustration
  • Education

Template styles (Chinese captions) · 6

Beat-synced type, made with adu-motion-video
Beat-synced typeadu-motion-video. Template 01-E: kinetic type timed to the beat.adunext/adu-motion-video · MIT
  • Kinetic type
Paper scale, made with adu-motion-video
Paper scaleadu-motion-video. Template 02-A: a paper-cut stage with a presenter tile.adunext/adu-motion-video · MIT
  • Paper style
Paper gather, made with adu-motion-video
Paper gatheradu-motion-video. Template 02-B: paper notes and a box gathered into one idea.adunext/adu-motion-video · MIT
  • Paper style
Instrument desk demo, made with adu-motion-video
Instrument desk demoadu-motion-video. Template 04-A: a product shown on a glowing instrument desk.adunext/adu-motion-video · MIT
  • Product demo
Character and object relay, made with adu-motion-video
Character and object relayadu-motion-video. Template 05-A: a drawn character hands the story to objects.adunext/adu-motion-video · MIT
  • Character
Native vertical, made with adu-motion-video
Native verticaladu-motion-video. Template 06-A: built for 9:16 from the start.adunext/adu-motion-video · MIT
  • Vertical

Films © their authors, shown unchanged under each repository's licence (MIT or Apache-2.0) and linked to the source. Brand names in the before-and-after tests belong to their owners; those films are the skill authors' unofficial tests, not ads by the brands.