Making Animation with LLMs: No Drawing, No Filming — AI Writes the Code, the Renderer Computes Every Frame

Mr.Kow — Sun, 25 Oct 2026 14:04:38 +0000

There's a new way to make animation that's been catching on: you just describe what you want in words, the LLM writes the code, and a browser or rendering engine computes the frames from that code, one by one. This isn't AI video in the Sora sense — no pixels are being "generated." The intermediate artifact is code: fully readable, editable, and reproducible. This article explains what code animation is, how it works under the hood, how to write prompts for it, how to actually produce a video with it, and which pitfalls to avoid.

01 · What is code animation?

Code animation (code-based / programmatic animation) means defining "what to draw and how it moves" in code: the elements are text, shapes, charts, formulas, and data; the motion is a function of time applied to properties like position, scale, rotation, opacity, and color. Nothing is hand-drawn frame by frame, and no pixels are generated frame by frame either.

What LLMs changed is who writes the code. That used to be programmers and motion designers. Now a large language model acts as "screenwriter + storyboard artist + programmer," translating your natural-language request into runnable HTML/CSS/JavaScript, SVG, or Python — while you step back into the director's chair, reviewing cuts and asking for changes in plain language.

Anthropic put it best when it launched Claude Motion (beta) on October 8, 2026:

"Claude writes code to animate your words, charts, shapes and images, so you can change any word, any number, any moment in time. It doesn't use a video generation model. There are no generated assets, and no AI-generated people."
— Anthropic's official article, Build live dashboards and animate explainers with Claude, claude.com

This also pinpoints the essential difference from diffusion-based AI video: models like Sora are diffusion models — they start from a frame of static-like noise and "guess" a pixel sequence over many denoising steps, with no editable representation in between. Code animation's intermediate artifact is readable, editable, diffable, greppable text. Every frame is computed by a deterministic renderer — mistype one character and you fix that one line instead of re-rolling the whole clip.

Three ways to make animation — where they actually differ

Dimension	Traditional hand-keyed animation	Diffusion AI video (Sora-style)	LLM code animation
Intermediate artifact	Keyframes + timeline project files; a human keys frames one by one	A pixel sequence denoised from latent noise; no editable intermediate representation	Source code (text): HTML/SVG/JS, React, Python
Who decides each frame	The animator sets keyframes by hand; the software interpolates	The model "guesses" pixels from its training distribution	Code + rendering engine: given time t, the frame is uniquely determined by a function
Changing one detail	Go back into the project and edit keyframes — controllable but slow	Rewrite the prompt and re-roll; nearby details often drift too	Change one line of code or one sentence; everything else stays put
Text / numbers / charts	Accurate (typed by a human)	Weak spot: misspelled words, numbers that jump around	Strong spot: text is just text, and data can drive the visuals directly
Realistic people / real scenes	Needs filming or 3D modeling — expensive	Strong spot: photorealistic, cinematic footage	Weak spot: can only draw what code can describe; realism needs external assets
Reproducibility	Reproducible as long as the project file survives	Same prompt and seed still don't guarantee frame-identical output	Same code + same renderer = frame-identical output
Interactivity	A "dead" video once exported	A "dead" video	In web form it can be clicked, dragged, and fed live data; only becomes a dead video after export
Typical output	Film/TV animation, commercials	Realistic short clips, mood shots	Explainer animations, data animations, UI motion, kinetic typography, algorithm/math visualizations

Why did this take off in 2024–2026?

Models got good enough at writing code. Developer Simon Willison has long benchmarked new models with one request — "generate an SVG of a pelican riding a bicycle" — and follows up with "now make it move." That this joke benchmark is so widely shared tells you something: "a model drawing and animating with code" has become a capability the public can actually feel.
The preview loop moved into the chat. Claude's Artifacts open the generated animation right next to the conversation — editable and shareable. The in-conversation visuals launched in March 2026 likewise run on HTML and SVG, not image generation.
Rendering pipelines started being "built for agents." HeyGen's open-source HyperFrames leads with "Write HTML. Render video. Built for agents."; Remotion has repositioned itself as video "for the agent era." At the time of this research, HyperFrames had roughly 69,000 GitHub stars.
An official product landed the final kick. Claude Motion entered beta on October 8, 2026 (Team / Enterprise plans), packaging the community's hand-rolled pipeline into a product: describe → generate → edit in the editor or the chat → download an MP4.
A veteran animation library went free. After Webflow acquired GreenSock, GSAP became 100% free in autumn 2024 — including formerly paid plugins like SplitText and MorphSVG — which lowered the bar for "premium" effects considerably.

02 · The principle: how does code become animation?

The whole pipeline is five steps, and understanding it means understanding all of the "magic" behind code animation:

The LLM plays four roles at once: director (storyboard, pacing, style), artist (drawing the elements with SVG/Canvas/Three.js — there are even cases of simple scores synthesized with Web Audio), programmer (timelines, easing, data binding, physics formulas), and QA (in an agent environment it screenshots keyframes, reads error messages, and fixes a round of problems itself before you ever see it). Your job is producer + reviewer: supply the assets and data, accept the result, ask for changes.

The core idea: the frame is the truth

Remotion's official docs state the core idea very cleanly: a video is a function of images over time — hand it a frame number and a blank canvas, change something on every frame, and you have animation. In code, that's a pure function render(t): time t goes in, the frame at that moment comes out. The picture doesn't depend on a wall clock ("wherever playback happens to be"), so you can seek to any point, render frames in parallel, and reproduce the output frame for frame.

The demo embedded at this point in the original article works exactly like this: drag the slider, and every frame you land on is computed on the spot by the time function — identical to what you'd see during playback. That's precisely why frame-by-frame export doesn't drop frames or drift off the beat.

Three more concepts: keyframes, interpolation, easing

Keyframes: you only define the state at a few key moments (start, end, turning points). In native CSS that's @keyframes with from { … } to { … }. What animators used to drag around on a timeline is exactly what programmers now write as duration / delay / ease / stagger parameters.
Interpolation (tweening): the engine computes the in-between frames proportionally. Remotion's interpolate(frame, [0, 30], [0, 1]) maps a frame number to opacity; Manim's Transform(square, circle) interpolates a square's point set into a circle.
Easing: interpolation looks good precisely because it isn't uniform — ease-out (fast, then settling), back.out (overshooting, then snapping back), elastic.out, bounce.out. Easing is what gives animation its "feel." When you need exact timing, use linear interpolation; for natural entrances, Remotion's spring() swaps in spring physics (damping / stiffness) instead.

Tech stack quick reference: how each one works, and what it's for

Stack	How it works	Best for	Export
HTML/CSS/JS (vanilla)	DOM elements + CSS @keyframes / Web Animations API; zero dependencies, runs from a single file	Beginner animations, logo/text motion, simple explainers	Plays in the browser; screen-record or headless frame capture → MP4
SVG	Vector paths + CSS/JS-driven stroke growth (stroke-dashoffset), transforms, etc.	Icon/logo stroke animations, architecture-diagram animations, illustrated explainers	Is itself a web page; convertible to MP4/GIF; scales without blurring
Canvas 2D	JS redraws pixels on a canvas every frame	Particles, pixel-game aesthetics, physics simulations, data plotting	Frame capture → MP4/GIF
WebGL / Three.js	GPU-rendered 3D scenes; the animation loop mutates rotation/position	3D product showcases, game effects, 3D camera moves	Same pipeline as Canvas; complex scenes can go the Blender Python route
GSAP	JS timeline library: tweens + timelines + stagger + plugins, orchestrating DOM/SVG properties	Web motion design, kinetic typography, the main animation engine inside HyperFrames	Exports with the HTML pipeline
p5.js	Creative-coding library: setup() creates the canvas, draw() is called ~60 times per second	Generative art, particle/noise patterns, teaching prototypes	Preview/share in the online editor; frames → MP4
Remotion	React components + useCurrentFrame(); video written as components, data can drive batch generation	Programmatic video, product launch videos, data-driven personalized video at scale	Command-line render to MP4/GIF/WebM
Manim (Python)	Build math objects in a Scene (circles, axes, formulas), play them with play(Create/Transform)	Math/physics explainers (the 3Blue1Brown engine), formula derivations	Command renders MP4 directly; GIF possible
Motion Canvas	TypeScript generator functions describe the animation; ships an editor with live preview and timing controls	Science explainers, knowledge videos tightly synced to narration	Editor exports image sequences/video
HyperFrames	HTML as the composition: data attributes lay out timing and tracks; headless Chrome + FFmpeg render deterministically	Fully automated agent pipelines, product videos, batch templates	Command-line MP4 render (needs Node 22+, FFmpeg)

Why is it controllable, reproducible, and interactive?

Controllable: every parameter is a plain-text number — start at 2.3 s, move 200 px, color #5AD19A. Changing one thing doesn't drag anything else along, which is exactly what re-rolling a diffusion model can't do.
Reproducible: the picture is a pure function of time; add a fixed random seed and the same input always yields the same output. The counterexample also comes from community practice: Math.random() lands on ban lists precisely because re-rolling it every frame gives a different picture at the same timestamp.
Interactive: in web form the code is still running, so mouse, keyboard, and live data can all change the picture. Render it to MP4 and it degenerates into an ordinary video.
Resolution-independent (with a caveat): SVG, text, and DOM are vector descriptions, so the same code can be re-rendered at 720p, 1080p, or 4K without blurring. But Canvas bitmap drawing and raster image assets are still bound by pixel density. The accurate statement is: "the vector parts are resolution-independent."

03 · Main approaches and community examples

Approaches at a glance

Approach	Entry point / tool	Good for	Barrier
Single-file HTML animation	A chat with Claude / ChatGPT / Gemini; just ask for "one self-contained HTML file"	First attempts, simple explainers, logo/text motion, social-media clips	Lowest: double-click the file or paste it into CodePen and it plays
Claude Artifacts	The Artifacts panel next to a Claude conversation	Iterate while chatting, instant preview, share links, remix others' work	Low: the official help docs say all plans can create artifacts in conversations
Claude Motion	In Claude, pick Motion from the Output menu or type /motion (Team/Enterprise beta, 2026-10-08)	Work-report explainers, animated charts, product demos; downloads an MP4 directly	Low, but plan-gated
SVG animation	The model outputs SVG directly, or HTML with embedded SVG	Logo stroke intros, icon motion, animated architecture/flow diagrams	Low–medium
Manim math animation	Have the model write Manim Python; render in Colab / locally / on a hosted platform	Math formulas, geometry, algorithms, physics simulations	Medium: needs a Python environment (or a hosted platform to sidestep that)
Remotion programmatic video	Agents like Claude Code / Cursor + the Remotion skill pack	Product launch videos, data-driven batch video, video projects that need version control	Medium–high: a Node/React project
HyperFrames pipeline	Agents like Claude Code + the HyperFrames skill pack / CLI	Fully automatic "prompt → MP4", batch-templated production	Medium: Node 22+, FFmpeg
p5.js generative art	The p5.js online editor / a single HTML file	Generative art, particles, interactive installations, classroom creative coding	Low–medium
Three.js / Blender route	The model writes Three.js (web 3D) or Blender Python (offline 3D)	3D effects, game cinematics, realistic lighting	High

The same goes for other LLMs: as long as the code generation is up to it, all of them can take the "single-file HTML" route; what differs is first-try success rate and error-fixing ability. One caveat: the case library has never run a same-task head-to-head comparison, so "model X is definitely the best" is not a conclusion anyone can draw. The Claude ecosystem currently has the most cases because its product loop — Artifacts / Motion / Skills — is the most complete.

What the community is actually making: the real distribution of the case library

As of October 10, 2026, the Prompt Motion case library had collected 233 cases from 216 creators, 230 of them with the original prompt attached. Counting by tag (tags overlap), the most popular types are:

Data source: an analysis of the Prompt Motion case library (counted on October 11, 2026), seo.whoops.com.tw. Among the 56 cases that named their tooling: pure HTML/Canvas + headless-browser screenshots, 23; Remotion, 13; HyperFrames, 10; Three.js, 5; Manim/Blender/Python, 5.

They boil down to five big categories — which happen to be exactly the directions readers of this article are most likely to start with:

Algorithm visualization: sorting (bars swapping, comparisons highlighted), graph search, dynamic-programming tables filling in. The steps are driven by actually executing the real algorithm, so it can't "draw it wrong."
Data animation: bar-chart races, rolling counters, growing line charts. Hand the model a real CSV/JSON, and stress that "the numbers must match what I gave you exactly."
Teaching explainers: math (Riemann sums closing in on the area under a curve, function transformations), physics simulations (projectiles, collisions, waves), recipe steps, operating procedures.
Logo / text animation: SVG stroke writing, letters popping in one by one, kinetic type layouts — the case library's second-largest category.
Physics simulation and generative art: p5.js particles and flow fields, Three.js 3D, pixel-art loops, plus stylistic experiments in hand-drawn, paper-cut, and watercolor looks.

The original article embeds a live example of category 1 at this point — a bubble-sort visualization. Animations like this compute every step with the real algorithm, so you can play it back and verify it by hand.

And here's the category that's best suited to practice: SVG stroke animation — logo intros and handwriting openers both rely on it (also demoed live in the original).

04 · Prompts: structure, real examples, and three templates

The advice below synthesizes the case library's analysis of those 230 prompts plus several hands-on tutorials. A good prompt is the following "seven-piece set." You don't have to use all seven — but whichever piece you leave out, the model will happily improvise for you:

Goal and audience: who it's for, and the one core idea they should walk away with — not a special-effects tour.
Specs: duration (seconds), canvas size/aspect (1920×1080 16:9 / 1080×1920 9:16 / 1:1), frame rate (30/60 fps).
Storyboard timeline: scene by scene, "what happens from second X to second Y." Rhythm can be quantified in BPM (e.g., one change per beat at 120 BPM) instead of empty words like "dynamic."
Style recipe: hex codes for colors, fonts that support your language, a texture (flat / hand-drawn / pixel). Eight motion keywords are worth copying straight into your prompt: easing, stagger, anticipation, overshoot, stroke, morph, parallax, loop.
Data and copy: give the real numbers and the exact wording, and declare "must match what I gave you exactly" — if the model hands you approximations, approximations are what end up on screen.
Output constraints: a single HTML file, no external dependencies (or only a specified CDN), double-click to run, and the picture decided by a time function render(t) / seek(t) (this is what makes frame-by-frame export possible).
Acceptance and self-check steps: show me the storyboard + keyframe thumbnails first, then build the full piece; after rendering, screenshot it second by second and check for text overflow, missing glyphs, and timing problems — and report what you find.

If you can't remember the seven pieces, start with the "SCENE five-box method": Subject, Canvas, Effect, Narrative (storyboard), Export.

Bonus: the negative list

Only 16 of the 230 prompts included a negative list — yet they took 4 of the top 20 spots by interactions (interaction counts are influenced by the author's follower count, so this isn't proof of causation, but it's very much worth copying). The most-banned items: glow/neon effects, "anything that looks like a template," particle explosions, dead air longer than 1 second, cross-dissolves, bounce easing, gradients, decorative corner text, and Math.random. The technique is to pair every ban with an alternative — e.g., "no cross-dissolves; every shot grows out of the previous one."

A real prompt that got copied everywhere (and its lesson)

The most-reused prompt on the whole site is a single 26-word English sentence, recycled by 33 cases:

make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out.

Notice, though: those 33 outputs all have different topics and styles, and their like counts range from single digits to 17,023 — whatever you don't specify, the model decides for you. That's exactly why the "seven-piece set" exists. At the other extreme, the site's second-most-liked case used a 474-word spec-sheet prompt: one geometric shape continuously morphing through a dozen-plus UI states, beat markers at 120 BPM, head and tail joined into a loop — and it required the model to ask for assets first, and to output beat thumbnails before writing any code.

The three templates below are reproduced verbatim in Chinese — they are copy-paste prompts, written for Chinese-language workflows.

Template A · Beginner animation (logo / text / simple shapes)

请做一个秒的动画，输出为一个自包含的单文件 HTML（所有 CSS/JS 都写在文件内，
不依赖外部图片和网络资源，双击即可在浏览器播放并自动循环）。

1920×1080（16:9），背景色 #0F172A，画面居中构图。
主角是文字「」，先以 SVG 描边方式一笔一画写出（2 秒），
再填充颜色并轻轻回弹定格（overshoot），下方小字「」淡入。
扁平极简，配色只用 #FFFFFF、#38BDF8、#FACC15 三色，字体用系统无衬线字体并确保中文不缺字。
动作使用 ease-out 缓动，各元素错开 0.15 秒依次入场，不要粒子、不要光晕、不要渐变。
先用文字告诉我分镜（每段起止秒数），我确认后再写代码；代码里画面必须只由时间决定，
不要用随机数。最后告诉我如何把这个 HTML 录成 MP4。

Template B · Teaching explainer (concepts / step-by-step walkthroughs)

请做一支秒的教学讲解动画，主题是「」，
输出单文件 HTML（或 Manim Python 代码，二选一并说明理由），16:9。

分 4 个场景，每场只讲一个要点，场景之间用图形变形衔接、不要黑屏、不要交叉溶解：
场景1（0—8s）提出问题：大字呈现；
场景2（8—22s）核心过程动画：，每出现一步，同步在画面下方显示该步的名称和关键数字；
场景3（22—37s）换一个例子/极端情况验证：；
场景4（37—45s）一句话总结定格：，停留到结束方便截图当封面。
所有数字、名称、顺序必须与我上面给的完全一致，不许自行编造或改写。
扁平插画讲解风，配色，中文字幕用简体中文、字号足够大，手机上也能看清。
先给分镜表让我确认；完成后再逐秒截图自查：文字有没有溢出画面、数字对不对、每段文字停留够不够读完，并回报检查结果。

Template C · Data / algorithm visualization

请做一个秒的数据/算法可视化动画，输出单文件 HTML，画布 1920×1080，深色背景。

可视化。
用呈现，柱子数值与我给的数据一一对应；算法类：正在比较的两个元素用 #FACC15 高亮、
正在交换的用 #F87171、已排好的变 #34D399，并在画面角落实时显示当前步骤的伪代码并高亮正在执行的那一行。
每一步停留约 0.6 秒让观众看清，整体匀速；不要为了好看跳过步骤或合并步骤。
极简科技风，只用我给的配色；标题「」在前 2 秒淡入，结尾停留在最终结果画面 2 秒。
单文件、无外部依赖；动画由时间函数驱动（给定任意 t 能算出画面），不要用 Math.random；
数据直接写在代码开头的数组里并加注释，方便我换数据重跑。
先告诉我总步数和预计时长；完成后自查：柱子数量、最大值、排序结果是否与原始数据一致，并回报。

Iterating: change one thing at a time

Generation is just the start; revision is the daily routine. Effective revision instructions look like this: "Slow scene 2 down to 1.5× its current length and change nothing else." "The title overflows the frame — shrink the font size or wrap it, and don't touch any other element." "Change the green to #5AD19A." "Add one more rule at the end: no such-and-such effect." Pasting a screenshot of the broken frame back into the chat and pointing at the spot is far more precise than describing it in words. Claude's Artifacts also puts a "Try fixing with Claude" button next to errors — one click carries the error details back so the model can fix it itself.

05 · Hands-on: from one sentence to a finished video

Route 1 · The simplest route (install nothing; first video in about 10 minutes)

Write the prompt: use the templates from the previous section, and practice on something under 10 seconds with few scenes.
Generate + preview: send it in a Claude conversation and ask for a "single-file HTML animation" — the result appears in the Artifacts panel and plays right there. Or save the code the model gives you as animation.html and double-click it in a browser. ChatGPT and Gemini work the same way — just have them output a complete HTML code block.
Iterate: watch the whole piece first, then comment — one change at a time (a word, a hex code, one segment's duration). Save important versions separately; Artifacts themselves keep versions you can roll back to.
Share the web version: Artifacts can be published/shared via link (note: artifacts are private to you by default, and the sharing rules vary by plan and version — before sending a link to someone without a Claude account, test it yourself in a private window). Or upload the HTML to any static host — GitHub Pages, Cloudflare Pages, Vercel, CodePen — and get a public link.
When you need a video: export via Routes 2/3 below, or use Route 4's screen recording in a pinch.

Route 2 · The official easy route (if you have a Team / Enterprise plan)

In Claude, pick Motion from the Output menu, or type /motion → describe the animation → revise it in the editor or via chat → Export to download the MP4. On Enterprise plans, an admin first has to enable Motion under Organization settings > Artifacts.

Route 3 · Local frame-by-frame rendering (best quality, batch-friendly — the creator mainstream)

Describe what you need in a coding agent like Claude Code / Cursor; the agent writes an HTML or React project (with HyperFrames, the flow is check → preview → render; Remotion previews in its Studio).
Local setup: Node.js (HyperFrames needs v22 or later), FFmpeg.
One command renders the MP4. For a GIF, convert from the MP4 with FFmpeg's two-pass palette method — the quality is noticeably better than converting directly.
The Manim route: install Manim (or use Colab / a hosted platform) → the model writes scene.py → confirm with a low-res preview, then render the final HD MP4 or GIF.

Route 4 · Screen recording as a last resort (fastest, worst quality)

Play it fullscreen in the browser and record with OBS / QuickTime / the system recorder; trim the head and tail and you're done. The downside is non-determinism: system stutter gets recorded, the start and end frames differ every time, and every revision means re-recording. The community's comparison is unambiguous: the headless frame-by-frame method gives you "every frame exact, every render identical," while recording "bakes" the stutter into the video. Fine as an emergency measure — don't make it the routine.

06 · Watch out: common pitfalls and how to dodge them

The generated code errors out or won't run. This is common enough that the official help docs have a dedicated "fixing errors" section and the "Try fixing with Claude" button — with the honest caveat that fixes aren't guaranteed to work. Frequent causes: referencing library versions or APIs that don't exist, wrong CDN paths, cramming multi-file dependencies into a single file, and long code getting truncated by output limits.
Timing doesn't line up. With Remotion, for example, the total length is set by the project's duration parameter; if the internal animation's frame count doesn't match it, you get truncation or dead space. Frame-rate-to-seconds conversion errors are a classic bug. Audio sync is the same story: fix the narration's word-level timestamps first, then lay out the visuals — don't let picture and voice each run on their own clock.
"Every frame is decided by time" isn't actually implemented. Community workflows that accumulate state with setInterval, re-roll Math.random() every frame, or rely on wall-clock CSS animations will misalign, flicker, and become irreproducible under frame-by-frame export. State it explicitly in the prompt: a pure time function + a fixed random seed.
Performance problems. From practical experience: tens of thousands of particles, SVG paths with too many nodes, full-screen blur/shadow filters, and relayout on every frame will make previews stutter and renders crawl. Fixes: animate transform / opacity preferentially (GPU-friendly), cap the particle count, preview at low res before rendering HD.
External resources fail. A dead CDN link, a font file, a hotlinked image, or a webfont that's unreachable from the render machine will leave you with missing glyphs or blank areas. Countermeasures: single file + inlined assets, system fonts or embedded fonts, images stored locally with relative paths — and one offline test run before the real render.
Chinese-specific pitfalls. Take an English case from the library and swap in Chinese, and the character counts, line breaks, and glyph widths all change — the original layout no longer fits. Fonts without Chinese glyph coverage produce missing-character boxes. Porting a 16:9 landscape piece to 9:16 portrait requires re-layout, not just translation. After exporting, play the entire MP4 to check; don't rely on the preview alone.
Copyright and licensing. Verified: the Prompt Motion footer states that the videos and prompts belong to their respective creators, and the site offers no blanket commercial license — learning the techniques is fine, but lifting someone's finished work for commercial use means going back to the original author. Commercial fonts, brand logos, and existing songs need licenses too. Remotion additionally requires a Company License for larger companies, and GSAP runs on its own license terms (free, but not MIT) — check the current official terms before commercial use.
Security of generated code. The Cloud Security Alliance's guidance is to treat LLM-generated code as "untrusted input": run it in a sandbox/container, disable network access by default, whitelist libraries, and require human approval for sensitive operations. Mapped onto animation work: don't just double-click HTML from unknown sources (it may contain scripts calling home) — open it first in a browser environment with no important accounts signed in, and check the code for requests to unfamiliar domains. And don't casually feed unreleased company assets or product screenshots into services that retain data.
Complex animations that aren't split up will crash and burn. From experience: generating a 3-minute piece with a dozen scenes in one shot will almost inevitably break on timing, consistency, or output length. The right posture: storyboard first → generate and approve scene by scene → stitch at the end. Real projects have been made exactly this way, in 9 chapter-sized segments that were composited afterwards. Character consistency comes from restating the fixed spec — palette, design description, reference images — in every segment.
Not every effect suits code animation. Official positioning: Claude Motion explicitly says it's for "explaining your own work" — no generated assets, no AI characters. For realistic people, real locations, and cinematic camera moves, reach for a diffusion video model or a camera, and (optionally) use code animation for the charts, captions, and packaging layer inside it. Conversely, diffusion models are bad at precise text, numbers, and flowcharts — the two approaches complement each other; neither replaces the other.

The pre-flight checklist (run through it before you ship)

The prompt covers the full seven-piece set: audience / specs / storyboard timeline / style hex codes / real data / output constraints / acceptance steps
A negative list is included (glow, particle explosions, cross-dissolves, decorative corner text, Math.random...), and every ban is paired with an alternative
Storyboard + keyframe thumbnails approved before building the full piece; a 2-second test clip before the long version
"The picture is decided only by time t, fixed random seed, single file, no external dependencies" is stated explicitly
Data and copy were supplied verbatim with a "must match exactly" declaration, and every number in the finished piece has been checked against them
One change at a time; a version kept before each change (file copy / Artifacts version / git commit)
When something errors, the full error text goes back to the model, with a browser-console screenshot attached
Chinese projects, extra checks: the font covers Chinese glyphs, line breaks don't overflow, portrait versions are re-laid-out, text stays on screen long enough to read
Export with frame-by-frame rendering, not screen recording; afterwards, play the full MP4 to review instead of trusting the preview
Before commercial use, check four things: font licenses, image/music licenses, the current license of the framework you used, and the original authors' licenses for any cases/prompts you borrowed
Security: unfamiliar code runs in an isolated environment first, external domains are checked, no unreleased company data gets fed in
Choose by asking "realism or accuracy?": realism → diffusion video / filming; accuracy, editability, batch → code animation; both → a hybrid pipeline

The one-sentence best practice: treat the LLM as "a fast motion-graphics contractor who needs a reviewer" — you own the storyboard, the data, and the acceptance criteria (and you write all of that into the prompt); it owns the code and the rework. Once the process assets (prompt templates, palettes, rules files) accumulate, the second and tenth video of the same kind come out noticeably steadier than the first. That's exactly why the community is moving from "one-off prompts" to "Skills that package the workflow and the self-checks for reuse."

07 · Claims to take with a grain of salt

The fastest way to ruin an explainer is to repeat marketing copy as fact. The following points from this research are unverified or fast-moving — cite them with care:

"Viral numbers" with no second source: view counts, celebrity reposts, production costs, and similar figures claimed by individual Chinese reposts couldn't be cross-checked against independent sources; at most, write "as reported by Chinese media."
Official spec details of specific models: release dates, cost reductions, and the like mostly circulate via secondary sources — before citing, confirm on the model vendor's official site.
No same-task head-to-head experiments: there is no public, controlled comparison of Claude, ChatGPT, and Gemini making the same animation, so any "X is the strongest" is anecdote.
Plans and terms move fast: Claude Motion's beta scope, Artifacts' sharing rules, and Remotion's / HyperFrames' license terms are whatever the official pages say on the day you use them; the case-library counts in this article (233 cases, etc.) are a snapshot from mid-to-late October 2026.

To wrap up: code animation took off, at bottom, because the means of production of animation shifted from "pixels" to "code" — and code happens to be what LLMs are best at producing and humans are best at checking. When changing a video drops in cost from "redo it" to "edit one line," content where accuracy matters more than beauty — explainers, data, teaching — gets an animation pipeline with near-zero marginal cost for the first time. That's probably reason enough to try it once yourself.

References

Official docs / official sites (full text opened and verified)
Anthropic, Build live dashboards and animate explainers with Claude (2026-10-08, the official Claude Motion launch) — https://claude.com/resources/articles/dashboards-and-motion
Anthropic Help, What are artifacts and how do I use them? — https://support.claude.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-them
Remotion official docs, The core idea — https://www.remotion.dev/docs/idea
Manim Community official docs, Quickstart — https://docs.manim.community/en/v0.18.0/tutorials/quickstart.html
HyperFrames GitHub (by HeyGen, open source, Apache-2.0) — https://github.com/heygen-com/hyperframes
Official (verified via index)
GSAP official timeline docs — https://gsap.com/docs/v3/GSAP/gsap.timeline()/
Webflow official blog, Webflow makes GSAP 100% free — https://webflow.com/blog/gsap-becomes-free
Motion Canvas official docs — https://motioncanvas.io/docs/flow/; GitHub https://github.com/motion-canvas/motion-canvas
MDN, Using CSS animations — https://developer.mozilla.org/en/CSS/CSS_animations
p5.js official tutorial, Get Started — https://p5js.org/tutorials/get-started/
Remotion GitHub — https://github.com/remotion-dev/remotion
Tech blogs / community practice
Prompt Motion case-library analysis (Whoops — 233-case statistics, prompt structure, negative lists, tooling distribution) — https://seo.whoops.com.tw/prompt-motion-claude-opus-animation/
BusinessNext (《数位时代》), Making videos with Claude: prompt templates in 10 styles (2026-10-12) — https://www.bnext.com.tw/article/92576/claude-opus-5.5
Flowtivity, Claude Makes Motion Graphics Without an Image Generator — https://flowtivity.ai/blog/claude-animations-without-image-gen/
BlogDuWebdesign, Motion design IA : créer une animation vidéo avec Claude (hands-on test + templates, 2026-10-21) — https://www.blogduwebdesign.com/blog/tech/motion-design-claude.html
AI 邮报学院 (AI Post Academy), Claude animation design in practice (the SCENE method / 8 motion keywords) — https://academy.aiposthub.com/p/flash-lesson-09-claude-opus-animation
Layer3Labs, How to Animate with Claude Motion — https://www.layer3labs.io/guides/claude-motion
OpenReplay, Making Videos with Claude Code and Remotion — https://blog.openreplay.com/making-videos-claude-code-remotion/
Remotion vs Motion Canvas vs Manim comparison — https://beginnersinai.org/remotion-vs-motion-canvas-vs-manim/
DEV, HTML/CSS Animation to Video (MP4): the Headless, Deterministic Way — https://dev.to/dsplce-co/htmlcss-animation-to-video-mp4-the-headless-deterministic-way-incl-claude-4a2
Simon Willison's "pelican riding a bicycle" SVG benchmark collection — https://simonwillison.net/tags/pelican-riding-a-bicycle/?page=3
MacRumors, Claude Can Now Create Interactive Visuals (2026-03-12) — https://www.macrumors.com/2026/03/12/claude-visuals-conversations/
Cloud Security Alliance, LLMs Writing Code? Cool. LLMs Executing It? Dangerous — https://cloudsecurityalliance.org/blog/2025/06/03/llms-writing-code-cool-llms-executing-it-dangerous

This explainer was compiled from online research conducted on October 22, 2026: official documentation and case-library data were verified by opening the full text, and community experience is flagged as such ("based on practitioner experience") where it appears. The three demos embedded in the original page are themselves code animations — computed in real time by the very principles this article describes (time functions, keyframes, interpolation, stroke drawing), using no video or image assets whatsoever.

DEV Community: Mr.Kow