Motion graphics from a sentence.

AI motion graphics are made in one of two ways. A generative video model paints every frame as pixels, straight from your prompt. Or an AI coding agent writes animation code, for example with Remotion, and a renderer turns that code into a video file.

For title cards, product demos and anything with exact text, logos or brand colors, the code route wins. The result is precise and identical every time, and each change is a quick re-render instead of a new roll of the dice. This guide explains both approaches, then walks you from a one-paragraph brief to a finished MP4.

01What are motion graphics?

Nothing in a motion graphic is filmed. Every element is designed, which is why the format suits things that must be exact: a product name, a price, a chart, a brand color.

Until recently, making one meant learning a tool such as After Effects and setting keyframes by hand. A keyframe fixes a property, like position or opacity, at one moment, and the software fills in the motion between two of them. AI now takes over much of that work, in two very different ways.

02Code-based motion vs generative video

Generative video models learn from huge amounts of footage and paint each frame as pixels. Code-based motion works more like a web page. An agent writes code that describes every frame, and a renderer records those frames into a video.

The two mix well: generated footage in the background, code-based titles and captions on top. For the footage side, see our comparison of AI video generators, and for cutting it together, see AI video editing.

03How code-based motion works

Remotion is the clearest example of this approach. It treats a video as a React component, the same building block used for web pages, plus a frame number. Its docs put the idea in one line: a video is a function of images over time.

Every Remotion video has four settings: width, height, frame rate and length in frames. Your code reads the current frame number and decides what to draw. Here is the core of a title card that fades and grows its headline into place:

import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";

export const TitleCard = ({ title }: { title: string }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Fade in over the first half second.
  const opacity = interpolate(frame, [0, 0.5 * fps], [0, 1], { extrapolateRight: "clamp" });
  // Grow into place on a smooth spring, with no bounce.
  const scale = spring({ frame, fps, config: { damping: 200 } });

  return (
    <AbsoluteFill style={{ backgroundColor: "#101014", justifyContent: "center", alignItems: "center" }}>
      <h1 style={{ color: "#f5f1e8", fontSize: 120, opacity, transform: `scale(${scale})` }}>
        {title}
      </h1>
    </AbsoluteFill>
  );
};

You will rarely write this yourself. What matters is that an agent can, and that you can read it. Want the headline to arrive faster? That is one number, not a new generation.

One rule trips up beginners and agents alike: every movement must come from the frame number. Remotion renders in several browser tabs at once, so animations that run on their own clock, such as CSS animations, break in the final file. Remotion publishes official Agent Skills that teach coding agents this rule and its other best practices.

04From a sentence to a rendered video

The sentence you start with should be a brief, not a wish. Name the format, the length, the look and the beats, meaning the moments in order with their timing. Every choice you make is one the agent does not have to guess.

Make a 15-second vertical video (1080 x 1920, 30 fps) announcing [shared playlists] in [app name].
Look: background [#101014], text [#F5F1E8], one accent color [#7C5CFF]. Font: [Inter], bold headlines.
Beats:
0 to 2 s: the logo from [public/logo.svg] scales in and settles.
2 to 6 s: the headline "[Playlists, together]" appears one word at a time.
6 to 12 s: three short feature lines slide up in turn, each with a simple icon.
12 to 15 s: "[Try it today]" and the web address, held still for the last second.
Rules: drive every animation from the current frame, keep text 100 pixels from every edge, and use only the files I named.

Then work through it in five steps.

1. 01

   Set up a project

   Remotion’s guide for coding agents uses these commands. You need Node.js and a coding agent such as Claude Code, Codex or OpenCode.

   npx create-video --yes --blank my-video
   cd my-video
   npm install
   npx remotion skills add
   npm run dev

   The last command opens Remotion Studio, a preview in your browser with a timeline you can scrub. In any Remotion project, npx remotion studio does the same.

2. 02

   Prompt the agent

   Open a second terminal in the same folder, start your agent, and paste the brief. It writes the components, and you watch the result in the Studio.

3. 03

   Give notes like an editor

   Watch once at full speed, then step through the key moments. Give one or two specific notes at a time, such as “hold the headline 20 frames longer” or “ease the logo in instead of popping it”. Numbers beat adjectives like “snappier”.

4. 04

   Add sound

   Music and voice do much of the emotional work. Add them once the timing is locked, then ask the agent to line up key moments with the beat. Our guide to AI music covers what you may use commercially.

5. 05

   Render the file

   Run npx remotion render. By default it writes an H.264 MP4 to the out folder. Add --codec prores for a high-quality master to edit elsewhere, or --codec png for an image sequence that can keep a transparent background.

05What AI motion graphics are good for

Code-based motion is strongest where accuracy and repetition matter.

If you do not have a clean logo yet, start with our guide to AI logos and brand assets. A logo made as a vector file animates far better than a flat picture. The same code-based approach suits an animated pitch deck too, which our guide to AI presentation makers covers on its own.

06Is Remotion free? The license in plain English

Remotion’s code is public on GitHub, but it is not open source in the usual sense, because larger companies must pay. As of September 2026, the terms look like this:

The free license covers making videos, commercial or not, and changing the code for your own needs. It does not let you sell, rent or relicense your own version of Remotion. Terms change, so check Remotion’s license page before you commit.

Budget for the agent too. Remotion’s own guide notes that most coding agents need a paid subscription.

If you need an open-source license or a different language, look at these instead:

07Before you publish

08FAQ

Next, compare the footage side in our guide to AI video generators, or give your video a soundtrack with AI music.