I asked Claude to make motion design. It wrote HTML.

Most people picture AI motion design as a model that dreams up frames. When we built Ultim's Kinetic style, that is not what happened. The model wrote a plan. Code wrote a web page. A headless browser took 30 photographs of it per second. The video is, literally, a rendered web page.

So how does a language model end up making motion design without generating a single image, what does each step actually do, and what does it cost? Here is the whole pipeline, with the numbers from the reels that are on our homepage.

The constraint that shaped everything: no AI pictures

The style was defined by rules the owner wrote after rating real reels. Two of them decide the architecture:

"Real material only: site photos, screenshots, logo, palette. No illustrated or fake UI, no AI people, nothing too dark."

"Only facts with a quote from the site or brief. No invented numbers, people, reviews or results."

If you cannot generate pictures and cannot invent facts, the only things left to animate are the brand's own words, numbers, photos and screenshots. (The metadata levers a generator can set are worth about 3x at best; see what an AI reels generator actually changes.) That is motion design in the classic sense: type, counters, bars, photos moving on the beat. It turns out a web browser is a very good motion design renderer.

Step 1: the model writes a scene plan, not a video

The script writer receives the brand brief and returns structured data. Each beat has the spoken sentence and a scene with one of eleven templates: hook, stat, bar_race, counter, photo_stat, screenshot, quote, before_after, list, offer and end_card. A scene carries a headline of 1 to 10 words, optional data (bars with labels and values, a counter value and unit, up to four list items) and the assets it uses: a brand photo or video by reference, or a screenshot of a page on the brand's own domain with a text to centre on.

The writer has rules that code can check: every headline must appear in that beat's spoken text; every number in a headline or in the data must appear in the brief; end_card is the last beat; at most one offer; a photo or video is used in at most one beat; with three or more photos available, a reel uses at least three distinct ones. When a beat names a piece of software (a widget, a dashboard, a checkout), the scene must show a screenshot of the page that has it.

The QA step is deterministic. It fails the script, says why, and the writer tries again, up to three times. In the production round on 13 October 2026 one reel failed QA three times because the script came out at about 32 seconds against a 20 to 30 second target; the retry was written as a short and rendered fine. A write with retries took 200 to 340 seconds on Claude Opus 5.5, which is why a script is written in the background rather than while a page waits.

Step 2: the voice comes back with timestamps

Each beat is voiced by ElevenLabs. The important output is not the audio file but the word timestamps that come with it. They are saved next to the audio and drive two things: on-screen words light up as they are spoken, and each scene's duration is the beat's voice duration plus a small tail. Nothing is timed by hand or by a fixed grid.

Cost: $0.00022 per character. The 296 character English script for our NextCrime example cost about $0.07.

Step 3: code writes one HTML document per reel

The renderer takes the scene plan, the voice timestamps and the assets and writes a single HTML page: scenes stacked on a GSAP timeline, type set in the brand's palette, counters that count, bars that race, photos cropped to what is being spoken. Screenshots are captured by the worker's own headless Chrome from the brand's public pages and cached.

The crop logic is where most of the quality lives. After the owner rated the first production reels 3 out of 5 ("some were cut off badly"), cover crops became content-aware instead of centred, and a photo whose aspect ratio is far from the card's is shown whole on a blurred, darkened copy of itself.

Scene starts are snapped to the nearest music beat within 120 ms. Every scene has inner motion; a scene longer than 5 seconds gets a mid-scene move. The end card lasts 3 seconds at most.

Step 4: HyperFrames turns the page into frames

HyperFrames is HeyGen's open-source engine for this exact job. Its own tagline is "Write HTML. Render video. Built for agents." It is Apache-2.0 licensed, needs Node 22 or later and FFmpeg, and the renderer "seeks each frame in headless Chrome and encodes the result with FFmpeg". Timing is declared with data attributes on the elements. The README says it was inspired by Remotion, with the difference that you write HTML instead of React components, and it ships skills for coding agents including Claude Code (github.com/heygen-com/hyperframes).

For us the deterministic part is the point. The same plan renders to the same MP4, so a reel can be re-rendered after one sentence changes and only that part differs.

Render time on our final homepage examples: 27 to 28 seconds per reel on an AWS c7i.2xlarge spot instance, plus about 9 seconds for muxing, encoding and the poster frame. On the always-on production worker (a c7a.large at $0.1035 per hour) a reel renders in 82 to 122 seconds, which comes to $0.003 to $0.004.

Step 5: the mix

Voice, a music bed whose mood follows the brand (tense for crime, warm for a bakery, electro for SaaS), and two to four subtle sound effects that never play over the voice. The bed is ducked about 18 dB under speech; the mix is normalised to -14 LUFS and encoded at 1080 by 1920, 30 frames per second, 15 to 30 seconds long.

What it costs, per reel

Reel (13 Oct 2026, production)	Length	Script	Voice	Render	Total
NextDeskLamp	16.6 s	$0.114	$0.052	$0.003	$0.169
ViewInRoom	22.5 s	$0.100	$0.054	$0.003	$0.157
NEXT.REAL	18.1 s	$0.103	$0.050	$0.003	$0.155
NextCars	31.3 s	$0.202	$0.086	$0.003	$0.291
EveryJobShop	24.4 s	$0.178	$0.055	$0.004	$0.236

Five finished reels, $1.009 in total. The script is the biggest line because it includes the QA retries; the render is almost free because a web page is cheap to photograph. There is no image or video generation line at all.

Before Kinetic, the same product made reels from generated images, and the admin cost page put those at $0.86 to $1.18 per reel. The motion design style is roughly five times cheaper and, by the owner's ratings, better.

What the model is good and bad at here

Good: choosing which fact to lead with, writing a hook that breaks a belief, matching a scene template to a sentence.

Bad, and therefore handled by code: saying the headline out loud in the voice line (the worker still reports "headline not spoken; taken from the line" on some scenes), using the videos the crawler found (one brand had four site videos and the writer used none), and keeping the reel inside the length target on the first try.

That split is the honest answer to "can Claude make motion design". It can plan it well. Rendering, timing and cropping are code, and they should be.

What this means for your reels

If your business has a website with real numbers and real photos, you already own the raw material for motion design reels. You do not need stock footage, a generator or an editor. You need a plan that only uses facts with a source, a renderer that is deterministic, and a loop that tells you which hooks worked.

The costs above are small enough that volume becomes the strategy. Based on our analysis of 4.5 billion TikTok posts, an account with 100 or more posts has a 39% chance of at least one top 1% hit, against 1.6% at three or four posts. At $0.16 to $0.29 a reel, a hundred attempts is less than a single day of a freelance editor. The piece that decides the outcome is the hook; see how to make viral reels for the hook families that still carry lift.

Ultim's Kinetic style is what every account gets today. Paste your site into /tools/reel-hooks to see the five hooks it would open with, written from your own pages.

FAQ

What is HyperFrames?

HeyGen's open-source engine, Apache-2.0 licensed, that renders HTML, CSS and animation into an MP4 by seeking each frame in headless Chrome and encoding with FFmpeg. It needs Node 22 or later and FFmpeg.

Does Claude render the video itself?

No. A language model writes the script and the scene plan as structured data. Code turns that into an HTML document, a headless browser renders the frames, and FFmpeg encodes and mixes the audio.

How much does a motion design reel cost this way?

Five production reels on 13 October 2026 cost $0.155 to $0.291 each: $0.10 to $0.20 for the script, $0.05 to $0.09 for the voice and under $0.01 for the render.