How Does AI Make Motion Graphics? HTML-to-Video Rendering Explained

What an AI agent makes when you ask for motion graphics

An AI coding agent makes a program that draws the video, not the video itself. Ask Claude Code for a 12-second product animation and it writes files: code that says where every element sits at every moment. Running that code produces the pictures.

There are three common ways to write it.

• HTML, CSS and JavaScript. The animation is a web page sized to the video frame, for example 1080×1920. Text, shapes, images and CSS animations do the moving.
• A React-based video framework. Remotion is one example. Its documentation calls a video “a function of images over time”. A component reads the current frame number with useCurrentFrame() and draws what belongs on screen at that frame. A composition sets the width, height, frame rate and length in frames.
• Python drawing. A script draws each frame as an image, for example with Pillow’s ImageDraw module for simple 2D graphics. The free effect prompts on this site mostly work this way on your own footage: Python reads each frame of your video, adds the layers and hands the result to ffmpeg.

The route depends on the job. HTML is natural for type and interface screens; the Phone Mockup effect has Claude design an app screen in HTML and animate it over your clip. Python is natural when every frame of existing footage has to be changed.

How the code becomes frames

Rendering means producing one still image for every frame of the finished video. A 12-second video at 30 fps needs 360 of them.

For an HTML animation, the agent opens the page in a headless browser, which is a browser with no visible window, using a browser-automation library such as Playwright. Playwright can screenshot a whole page or a single element, and it can hand back the image as data instead of saving a file.

The hard part is time. A browser plays animations in real time, but a renderer needs frame 90 to show exactly the moment at 3.0 s, whether the computer is fast or slow. Browsers list every running animation, CSS animations and transitions included, through document.getAnimations(). A render script can pause each one, set its current time to the frame’s moment, take the screenshot and move on. Time is set, not measured, so a slow machine still produces correct frames. It just takes longer.

A framework does this bookkeeping for you. Remotion’s renderFrames() function renders a composition as a series of images using Puppeteer, a browser-automation tool, and a separate step stitches those images and the audio into a video.

Python is the simplest case. The script calculates each frame and saves it, so no browser is involved.

How ffmpeg turns frames into a video

ffmpeg reads the numbered frame images and encodes them into one video file. Its documentation calls it a universal media converter that takes any number of inputs and writes any number of outputs. For an image sequence, you give it a frame rate and a filename pattern:

ffmpeg -framerate 30 -i frames/%04d.png -i voiceover.wav -shortest out.mp4

Here is what each part does:

• -framerate 30 sets how many images make one second of video.
• frames/%04d.png matches files numbered with four zero-padded digits: 0001.png, 0002.png and so on.
• The second -i adds an audio file as another input.
• -shortest stops writing when the shorter stream ends.
• The .mp4 ending tells ffmpeg which output format to write, because it guesses the format from the file extension.

Codec, quality and pixel-format options can be added to the same command, and the quality settings in particular decide whether the file looks crisp or soft. If a render looks blurry, the quality note in the Combine & Fix workflow is a good place to start.

Code rendering versus text-to-video generation

Code rendering draws pixels from instructions, while text-to-video models sample pixels from a trained model.

The research paper Video Diffusion Models shows the second approach. Sampling starts from random Gaussian noise, and a neural network removes that noise step by step, steered by a conditioning signal such as a text caption. Each model in the paper is trained on a fixed number of frames at a fixed resolution. Nowhere in that process is there a line that says “headline: 96 px, #F5F5F7”. The model produces pixels that match the prompt more or less closely.

That difference explains most of the practical gap.

• Exactness. Code places the word, hex colour and logo file you gave it. A generated clip has no guarantee that a word you typed appears letter for letter.
• Repeatability. The same code renders the same frames on every run, as long as it does not read the clock or use unseeded random numbers. A new sample from a diffusion model starts from new noise.
• Editing. Changing “0.4 s” to “0.3 s” in code changes one move and nothing else. Changing one detail in a generated clip usually means generating again.
• Strengths. Generation can produce what code cannot draw from shapes: realistic people, places, light and organic movement. Code is strongest at type, shapes, charts, interface screens and product images you already have, such as the line chart in Chart Grow.

Four ways to make motion graphics, compared

Each approach trades control, speed and realism in a different way.

Trade-offs to plan for

Code rendering is precise, but it costs time and needs a clear brief.

Render time is yours. Every frame is drawn and captured on your computer. Preview at a lower resolution while you iterate, and render full size once the timing is right.

The agent judges stills, you judge motion. Claude can inspect individual frames and contact sheets. Rhythm, weight and flicker only show when the video plays, so your notes cover what a still cannot.

A vague brief gets default motion. Code does exactly what it is told, so unspecified durations and easing become whatever the agent picks. How to write a video prompt Claude can follow breaks a brief into the parts that matter.

Realism has a ceiling. Gradients, blur and shadows go a long way, but code will not invent a believable street or face. Mix approaches when you need both: generated or filmed footage underneath, code-drawn type and graphics on top.

Frameworks have their own licences. Read the licence of any framework before you use it in paid client work.

Long scene-by-scene prompts for product films, written for this code-first workflow, are coming to the motion design prompts section for members.