AI UI Animation: How to Make Animated UI Videos With Claude Code

What AI UI animation is

AI UI animation is a video of an interface in motion that a coding agent builds and renders, instead of you recording it live. Windows open, a cursor travels and clicks, a list scrolls, and the view zooms onto the button that matters. App demo videos, launch clips and the “here is how I do it” moment in a talking-head video all use these moves.

There are two kinds of footage behind animated UI videos. A screencast, in Wikipedia’s words, is a digital recording of computer screen output, often with narration. A rebuilt UI is different: the interface is recreated as a web page and every move is written in code. AI UI animation usually means the second kind, because a coding agent can write that page and its motion from a screenshot and a short brief.

The rebuilt version is a mock-up. It can show how a workflow feels, but it is not evidence that a product does something. If the screen shows a real product, make it match what that product actually does.

Three ways to make an animated UI video

The three routes are recording the screen, rebuilding the UI in HTML and CSS, and rendering the rebuilt UI with a framework.

Screen recording plus edit. ffmpeg can capture the screen through its input devices: gdigrab captures a region of the display on Windows, x11grab captures a region of an X11 display, and avfoundation is the device for macOS. Watch the pointer. avfoundation’s -capture_cursor option defaults to 0, so the cursor is left out unless you turn it on, while gdigrab’s draw_mouse defaults to 1. Zooms and pans come afterwards. ffmpeg’s crop filter evaluates its x and y position on every frame, so a pan across a recording is one expression. Its width and height are normally fixed when the filter is set up, so an animated zoom needs a script that scales each frame.

Recreate the UI in HTML and CSS. Claude Code rebuilds the screen from your screenshots and animates it with CSS or the Web Animations API. MDN describes Element.animate() as a shortcut that creates a new animation, applies it to the element and plays it.

Render with a headless browser or Remotion. The rebuilt page is captured frame by frame with Playwright, or written as Remotion scenes, and ffmpeg encodes the frames into a video.

How Claude Code builds and renders UI scenes

Claude Code builds a UI scene as a small web page, then renders it one frame at a time. Anthropic’s best-practices guide for Claude Code describes the loop for the first half: paste a screenshot, ask Claude to implement the design, then have it take a screenshot of the result, compare it with the original, list the differences and fix them.

Each interface move then becomes a piece of code:

• Cursor. An SVG arrow in the page, moved along a path with an easing curve. If Claude drives a live page instead, Playwright’s mouse.move() with a steps value sends interpolated mouse moves between two points.
• Click. A short scale-down on the button, plus a ripple from the cursor tip.
• Typing. Text revealed one character at a time. Playwright’s screenshot hides the text caret by default, so ask for a drawn, blinking caret.
• Scrolling. Content moves up inside a fixed window. Playwright’s mouse.wheel() scrolls a live page, but an animated translateY gives exact control over speed.
• Zoom. transform: scale() on the whole window, with transform-origin placed on the target. MDN notes that the default origin is the element’s centre, so without it a zoom pushes an off-centre button towards the edge of the frame.

Time has to be set, not played. CSS animations and Web Animations can be paused and moved to each frame’s moment through Animation.currentTime, which MDN says returns and sets an animation’s time in milliseconds. Motion driven by JavaScript timers is different: Playwright’s clock API overrides Date, setTimeout, requestAnimationFrame and related functions, so time can be paused and advanced on command. How AI renders motion graphics walks through the full frame-capture loop.

Three settings keep the output clean. A deviceScaleFactor of 2, which Playwright’s docs use to emulate a high-DPI screen, gives text twice the pixels. omitBackground produces transparent screenshots for layering. And Playwright’s built-in recording is the wrong tool for final output, because its videos default to the viewport scaled down to fit 800×800.

In Remotion, each scene is a <Sequence> with a start frame and a length, and the components inside it count frames from that start. For a transparent UI layer, Remotion’s docs give the flags for ProRes 4444 (--image-format=png --pixel-format=yuva444p10le --codec=prores --prores-profile=4444) or for VP8 or VP9 WebM with the yuva420p pixel format.

Placing the UI around a talking head

You can put the interface above you, beside you, in front of you or behind you.

• Above. UI World turns the top of a vertical frame into a chat window where thumbnails slide in and a command types itself out, while your footage sits in the lower 55%.
• Beside. Phone Mockup floats a tilted phone in the top-right quarter, next to your face, and taps its button at the second you choose, usually the word where you state the result.
• In front, as a card. Checklist slides a frosted glass card into the top 30% and ticks an item when you say its trigger word.
• Behind. A person mask decides which pixels are you, so interface windows can sit behind your head while you stay full frame.

The layering is ffmpeg’s overlay filter, which takes two inputs and places the second on top of the first at an x and y position you set. The timing comes from your transcript. With word timestamps, a click can land on the word “export” instead of a guessed second. AI kinetic typography covers that word timing in more detail.

What to do next

Start your first AI UI animation with one screen, one action and one sentence of your video. Put a screenshot in your project folder and send Claude Code a brief like this:

Recreate screens/dashboard.png as an HTML page, 1080×1350.
Take a screenshot of your version, compare it with the original, list the differences and fix them.
Then animate it, 6 s at 30 fps:
1) The window slides up 60 px and fades in over 0.4 s, ease-out.
2) An SVG cursor moves from bottom left to the "Export" button in 0.8 s, ease-in-out.
3) Click: the button scales to 0.95 and back in 0.15 s, with a ripple from the cursor.
4) Zoom the window to 1.6× with transform-origin on the button, over 0.6 s.
Capture every frame with Playwright at deviceScaleFactor 2 and encode with ffmpeg.

Check the rebuilt screen before any motion is added, because a wrong label is cheaper to fix in a still. Then watch the render at full speed and give one note at a time.

For a ready-made layout, start from the free UI World or Phone Mockup prompt. If you want interface windows behind your head in every video, the Depth UI style packages that as a Claude Code skill: it keeps you full frame and redraws your screenshots as clean windows behind you.