Motion Graphics as Code

Motion graphics as code is the practice of writing animated titles, lower thirds, charts, maps and other motion design as software components, rather than keyframing them by hand in a timeline tool. A component is a function of time and parameters. Given a frame number and inputs such as a name, a color or a data series, it returns the picture for that frame, and a renderer turns the sequence into video. The approach is as old as scripting in animation software. It became newly important in 2025 and 2026 because AI code generation made it possible to describe a graphic in plain language and get a working component back, which is a large part of what makes video as code practical.

The Main Approaches

Approach	Language	Typical use
Remotion	React and TypeScript, rendered in a headless browser	Data-driven and templated video, captions, explainer graphics
Motion Canvas and its forks	TypeScript generators, with a live-preview editor	Explainer animations and diagrams timed to a voiceover
Lottie	JSON vector animation, usually exported from After Effects	Interface and web animation played back natively in apps
After Effects expressions	JavaScript snippets attached to layer properties	Procedural behavior inside a keyframed project
Manim	Python	Mathematical and technical animation

As of October 2026 these projects are in very different states. Remotion ships frequent releases (v4.0.537 on October 19, 2026). Motion Canvas's last stable release, 3.17.2, dates from December 2024, and much of the visible development now happens in community forks such as Canvas Commons and Revideo (see Remotion vs Motion Canvas). Lottie began in 2015 as an After Effects export format created by Hernan Torrisi. It is now specified by the Lottie Animation Community, a project under the Linux Foundation's Joint Development Foundation. The community edition of Manim, a Python engine for mathematical animation, released v0.22.0 in October 2026.

Why Language Models Write Them Well

Motion graphics as code plays to what models are good at. The components are ordinary TypeScript, React or Python, which are languages heavily represented in training data. Timing is arithmetic on frame numbers, not a gesture on a curve editor. Parameters can be declared with a schema, so a model can be told exactly which inputs a graphic accepts and the system can reject anything else. Remotion now publishes Agent Skills, a curated set of practices that it says is useful for "AI agents like Claude Code, Codex, Kimi Code or Cursor", installed with npx skills add remotion-dev/skills. The workflow that results resembles vibe coding for video: describe a route animating across a map or a bar chart that builds bar by bar, look at a preview, and iterate in words.

The output is also easy to review. A graphic that is code can be diffed, tested with sample parameters, rendered to still frames at chosen moments, and reused across projects with a brand's colors and fonts passed in as inputs. Templating at that level is laborious in a keyframe tool.

The Risk: AI-Written Code in a Render Pipeline

Letting a model write components means running model-written code, and the usual agentic engineering concerns apply with some specific to video:

• Exfiltration and network access. A component that can fetch a URL can leak footage or pull in content nobody reviewed.
• Dependency risk. A component that can import arbitrary packages inherits their supply-chain risk.
• Non-determinism. Random numbers or the system clock make the preview and the final render disagree, which breaks reproducibility.
• Injected instructions. Text in a source asset, a data file or a web page that a component draws can carry prompt injection aimed at the agent writing the next revision.
• Silent drift. A graphic that changes after someone approved it is no longer the graphic they approved.

Controls That Work

The controls that have emerged mirror those of an agent sandbox:

• Import allowlists checked before bundling. Parse the source and refuse dynamic imports, eval, network APIs, workers and any package outside a short approved list.
• Rendering in an isolated browser. Component code runs only inside the headless browser that draws frames, with network access limited to the render's own local servers and a strict content security policy.
• Approval by content hash. The component's normalized source is hashed, and a person approves that exact hash. Changing one character produces a new hash that needs a new approval.
• Schema-validated parameters. The spec can only pass inputs the component declares, checked like any other field.
• Limits and fail-closed behavior. Per-frame and total time limits, a bundle size limit, and no render at all if the isolation could not be applied.

MetaRush, an AI video editing harness built on video as code, combines all five. Its vetted templates remain the default, and a project's own components sit behind an import allowlist, a network-jailed render and approval of each AI-written component by its content hash, so every machine renders exactly the bytes a person reviewed.

Templates First, Code When Needed

Most production systems layer the two. A library of vetted templates (title cards, lower thirds, kinetic quotes, data cards, end cards) covers the common cases. The model fills in validated parameters and never writes code. Custom components are reserved for the one-off graphic that no template fits, and they pass through the controls above. This keeps the fast path safe and the flexible path reviewable, the same balance human-in-the-loop systems strike elsewhere.

Where It's Headed

Generated video and coded graphics are converging inside the same edit. A generative video model supplies the shot, and a component supplies the precise, on-brand overlay that pixel generators still render unreliably, such as legible text, exact numbers and correct logos. Expect agent skills from more rendering frameworks, more review tooling built around test frames and contact sheets, and stricter isolation as AI-written graphics move from hobby projects into brand and broadcast work. For generative animation more broadly, the lesson is that code gives a model precision that pixels alone do not.