What is code-rendered motion design?

It is the practice of producing animated video by writing code — HTML/CSS/JS scenes, a timeline, and a renderer that screenshots each frame — rather than drawing in a timeline-based tool like After Effects. A coding agent writes the scene code, and a headless browser plus ffmpeg turns it into an MP4. Because the frame at time t is defined by code, the output is reproducible and version-controllable.

What is huashu-art-motion?

huashu-art-motion is an open-source agent Skill (MIT, by alchaincyf) that makes a coding agent generate animated, art-styled explainer scenes programmatically — 35 art styles, 9 narration grammars, and parameterized segments, with full reference code. You install it with 'npx skills add alchaincyf/huashu-art-motion'. It is one of several tools pushing coding agents toward motion design.

What is MotionStudio and how is it different?

MotionStudio is our open-source Claude Code and Codex plugin that turns a topic into a finished, rendered explainer video — script, storyboard, motion, sound, and captions. Its differentiator is a deterministic render contract: a single window.seek(t) function paints each frame as a pure function of time, so re-rendering any frame is byte-identical and verification is real rather than claimed. Install with '/plugin marketplace add menonpg/motionstudio'.

Code-Rendered Motion Design Is Having a Moment — huashu-art-motion, Meaghan Choi's Prompt, and Why We Built MotionStudio

By Prahlad Menon Published 2026-10-08 4 min read

Three things crossed my feed this week, and they are all the same story.

huashu-art-motion — an agent Skill that makes your coding agent “paint moving pictures” in 35 art styles, installed with npx skills add alchaincyf/huashu-art-motion.
Meaghan Choi’s explainer-studio prompt — a long, structured prompt attributed to Anthropic’s Head of Design for Claude Code, turning a model into a one-shot motion-design studio, passed around on social this week.
Our own MotionStudio plugin, which we shipped in response.

The shared thesis: coding agents are becoming motion-design studios, and the medium is code, not a timeline UI.

Why code, not After Effects

Traditional motion design lives in a timeline tool. That is great for a human artist and terrible for an agent — there is no clean text interface, no diff, no reproducibility. When you move the medium to code — HTML/CSS/JS scenes, a timeline object, a renderer that screenshots frames — an agent can author it, a git repo can version it, and a CI job can re-render it.

That is what all three projects do. huashu-art-motion leans into style — 35 art eras, programmatic scenes, reference clips. Choi’s prompt leans into craft and process — a five-beat storyboard (Question → Hook → Proof → Turn → Payoff), restraint over polish, “never start from nothing.” Both are excellent. Both left one thing on the table.

The missing piece: a deterministic render contract

Here is the problem with “agent, make me a video.” The agent produces a plan, maybe a moodboard, maybe a single still — and calls it done. Or it renders something, claims it verified it, and you have no way to check. Video is expensive to review, so unverifiable output is worse here than almost anywhere else.

MotionStudio’s answer is a render contract. Every scene must define one global:

// Paint the frame at absolute time t. Pure function of t — seeded randomness
// only, no Date.now(), no network.
window.seek = function (t) { /* position everything for time t */ };

A single TIMELINE object holds every beat, move, and cue. A headless Chromium steps t = n/60, screenshots each frame, and pipes it to ffmpeg (libx264, crf 18, yuv420p):

node render/render.mjs scene.html out/master_16x9.mp4 --w 1920 --h 1080 --fps 60 --dur 60

Because window.seek(t) is a pure function of t, re-rendering any frame comes back byte-identical. That single property turns the verification step from a claim into a test: render frame 900 twice, diff them, they must match. Grab a still at every storyboard beat, read every caption at 390px wide, watch it muted, then listen audio-only. The agent can actually prove it did the work.

We kept the good parts of Choi’s process — the five-beat arc, “shape before polish,” real UI over illustration, keep the AI-generic look (neon glow, gradient title cards, floating particles) out — and bolted them onto a pipeline that produces a real, reproducible MP4 plus the source that re-renders it.

The quieter signal: self-installing agent skills

There is a second pattern worth naming. Both huashu-art-motion and jevgrep (a semantic “find code by asking what it does” CLI) distribute through npx skills add owner/repo — a skill that installs itself, detects whether you are running Claude Code, Codex, or OpenCode, and teaches the agent how to invoke the underlying tool.

That is the agent-skill distribution era arriving in the open. You no longer ship just a CLI; you ship the CLI and the skill that teaches the agent to use it. MotionStudio follows the same instinct — it is a Claude Code plugin (slash command + skill + marketplace) and a Codex AGENTS.md drop-in in one repo.

Try it

/plugin marketplace add menonpg/motionstudio
/plugin install motionstudio@menonlab

Then brief it like a studio: /motion how gradient descent works, for a junior dev, in 45s.

Repo: github.com/menonpg/motionstudio · Landing: motion.themenonlab.com

Credit where due: the process model owes a lot to the explainer prompt attributed to Meaghan Choi, and huashu-art-motion got there first on the “agent as animation studio” idea. MotionStudio’s contribution is the deterministic render pipeline that makes the output something you can actually verify and ship.