Claude animation

"Claude animation" can mean four different things, and only one of them is built into Claude. Claude Motion is Anthropic's beta feature for making short animations in the Claude app (Team and Enterprise plans, MP4 export). If you do not have it, or you need more control, Claude Code can write the animation as code: Remotion (React), HyperFrames (HTML and GSAP), or a JSON2Video movie that uses HTML snippets and animated components. This page compares the four, with a small example of each code route.

None of them uses a video generation model, so none creates realistic footage or people: they animate text, shapes, charts and images. For the full map of routes, see can Claude make videos?. Everything here was checked on 18 October 2026.

---

The four routes at a glance

Checked on 18 October 2026. Sources: Claude Motion (Anthropic Help Center), Remotion licence, HyperFrames, JSON2Video pricing.

---

1. Claude Motion: the built-in answer

Claude Motion was announced on 8 October 2026. You describe an animation, Claude builds it as code from a template inside the Claude app, you refine it in chat, and you export an MP4. Anthropic's own examples are explainers, animated charts and product walkthroughs.

• Who has it: Team and Enterprise plans, in beta. It is on by default for Team; on Enterprise it stays off until an owner enables it. Free, Pro and Max plans do not have it.
• Cost: no separate price. It counts toward your plan's usage limits, and longer or more complex animations use more.
• Limits: in Anthropic's words, it "doesn't use a video generation model, so it doesn't create realistic footage or people". It is an app feature: you cannot call it from your own code, so it does not fit batches of videos.

If you have it and need one good animation, start here. The routes below are for when you do not have Motion, when you need something it does not do, or when you need the same animation again and again from data.

Claude Design, which every plan has, makes slides, prototypes and visual designs. It exports PPTX, PDF or HTML, not video.

2. Remotion with Claude Code

Remotion turns React components into video. A frame is a function of the current frame number, so anything React can draw can move. Remotion publishes an official Claude Code plugin with agent skills:

claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion

Restart Claude Code, then ask for the animation you want; the plugin's remotion-create skill is the entry point. Claude writes the compositions, you preview them in Remotion Studio and render on your computer. This is a minimal composition of the kind Claude writes (a title that fades in and slides up over one second):

// src/Title.tsx
import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";

export const Title: React.FC = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
  const y = interpolate(frame, [0, 30], [40, 0], { extrapolateRight: "clamp" });

  return (
    <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", background: "#0f172a" }}>
      <h1 style={{ color: "white", fontSize: 120, opacity, transform: `translateY(${y}px)` }}>
        Launch day
      </h1>
    </AbsoluteFill>
  );
};

// src/Root.tsx
import { Composition } from "remotion";
import { Title } from "./Title";

export const RemotionRoot: React.FC = () => (
  <Composition id="Title" component={Title} durationInFrames={90} fps={30} width={1920} height={1080} />
);

npx remotion render Title out/title.mp4

When it fits: you want bespoke motion graphics, you or your team can read React, and a codebase is fine. When it does not: you want a one-off animation with no setup (use Motion), or you are a company of four or more people and do not want a licence (see the Remotion comparison). Remotion's older documentation MCP is deprecated; the plugin and skills replace it.

3. HyperFrames with Claude Code

HyperFrames is HeyGen's open-source framework (Apache 2.0). A video is an HTML file with timing data attributes, animated with GSAP; the renderer seeks each frame in headless Chrome and encodes it with FFmpeg. It needs Node 22 or later and FFmpeg. It has a Claude Code plugin:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

This is the shape of a composition (adapted from the project's README): a stage, a timed title and a paused GSAP timeline registered under the composition id.

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
    window.__timelines = window.__timelines || {};
    window.__timelines.launch = tl;
  </script>
</div>

npx hyperframes render

When it fits: you know HTML, CSS and GSAP and want frame-accurate motion without React. When it does not: you cannot install Node 22 and FFmpeg, or you need a template that non-developers fill in. HeyGen also lists a HyperFrames connector for claude.ai, in beta; its renders draw on HeyGen credits and the price is not published.

4. JSON2Video: animated components and HTML snippets

JSON2Video does not run an animation timeline you write in code. A movie is a JSON document, and Claude writes it through our MCP server (setup guide). Two elements cover motion graphics:

• Components are pre-built animated templates from our component library: title cards, lower-thirds, callouts. You pass text and colours in settings; the animation is built in.
• The html element renders an HTML snippet, optionally with Tailwind CSS, and composes it onto the video. You can fade it in and move or resize it with keyframes.

Be clear about the limit: the html element captures your HTML as an image and then animates that image, it does not play the CSS or GSAP animations inside it frame by frame. For intricate, frame-accurate motion graphics, Remotion or HyperFrames are the better tools. JSON2Video fits when the motion is a branded card or title over a video, and when you want to render the same design for hundreds of rows of data. This movie opens with an animated title component, then slides a Tailwind-styled stat card up on a dark scene:

{
  "resolution": "full-hd",
  "scenes": [
    {
      "duration": 3,
      "elements": [
        {
          "type": "component",
          "component": "basic/000",
          "settings": { "headline": "Q3 RESULTS", "subline": "Revenue up 24%" }
        }
      ]
    },
    {
      "duration": 4,
      "transition": { "style": "fade", "duration": 0.5 },
      "background-color": "#0f172a",
      "elements": [
        {
          "type": "html",
          "tailwindcss": true,
          "wait": 0.5,
          "html": "
Monthly revenue
$128,400
",
          "position": "custom",
          "x": 510,
          "y": 340,
          "fade-in": 0.6,
          "keyframes": [
            { "time": 0, "y": 440 },
            { "time": 0.8, "y": 340, "easing": "ease-out-cubic" }
          ]
        }
      ]
    }
  ]
}

The result is a 1080p MP4 of about 7 seconds: a title card with its built-in animation, a fade to a dark scene, and a white stat card with a progress bar that fades in and slides up. It costs 1 credit per second, so about 7 credits of the 600 in a free account. The movie passes the validate_movie check of the MCP server. To reuse it, ask Claude to turn the headline, the figure and the bar width into {{variables}}.

---

Which one should you use?

• Team or Enterprise plan, one animation, no setup: Claude Motion.
• Custom motion graphics and you write React: Remotion.
• Custom motion graphics and you write HTML: HyperFrames.
• Animated titles and overlays inside finished, narrated videos, or the same video for many rows of data: JSON2Video, optionally together with a code route for the hard shots.

The routes combine: render a complex intro with Remotion or HyperFrames, upload the MP4, and use it as a video element in a JSON2Video movie with voice-over and captions.

---

Frequently asked questions

More in this section: can Claude make videos?, video editing with Claude Code and video MCP servers for Claude.

Published on October 18th, 2026