All workflows
Motion design, written as code

Since Apr 2026

Motion design, written as code

Claude Motion, HyperFrames, Remotion and Blender: the agent writes the animation, so every word, number and beat stays editable.

The other half of the agentic era generates no footage at all. Ask a coding agent for a title sequence, a launch film or an explainer and it writes HTML, React or Python that animates type, charts, shapes and 3D, then renders it frame by frame. Remotion's agent skills showed the way in January, HeyGen open-sourced HyperFrames in April with a launch video made in Claude Code, and on October 8 Anthropic built it into Claude as Claude Motion. Over MCP the same agent calls ElevenLabs for the voice and Runway for the b-roll.

Tutorials10

The new Claude Motion is awesome

Paul J Lipsky · YouTube · Oct 2026 · 9:05

Animated charts and explainers, style matching, and motion synced to timestamps in a video.

How it works

  1. Install the skills, then describe the piece. npx skills add heygen-com/hyperframes gives Claude Code or Codex a router and workflows for launch videos, faceless explainers, PR-to-video and music-to-video. Remotion's skills (January, rebuilt as Skills 2.0 in August) do the same in React, and GreenSock's official GSAP skills teach the easing.
  2. The animation is a timeline you can seek. HyperFrames steps HTML and GSAP through headless Chrome and FFmpeg one frame at a time: same input, same frames, same output. Change a word or a number and render again; nothing drifts.
  3. Pull in voice and footage over MCP. Code draws type, charts and shapes; for everything else the same agent calls generative models through their MCP servers. Over ElevenLabs MCP it voices the narration and adds music and sound effects, and over Runway MCP (or fal, Higgsfield or Kling) it generates b-roll and texture plates to sit behind the type. The files land in the project, and the agent times the animation to the voiceover.
  4. Edit beside the agent. HyperFrames Studio (October 5) puts the person and the agent on the same timeline, and Remotion Studio opens whatever the agent wrote. The agent drafts, the designer trims the timing.
  5. Or stay in the chat. Claude Motion (beta for Team and Enterprise, October 8) turns a prompt, a report or a chart into an animated explainer written as code, with no video model and no generated people. Edit in chat or in the editor, export an MP4, or hand it to Runway, Adobe, Descript, HeyGen, Higgsfield, invideo or Luma.
  6. Go to 3D through Blender. Over Blender MCP, Opus 5.5 models, rigs and animates in the viewport: Aidan Stanik let it run Blender for a day, and every frame of the result came from the viewport.
  7. Make the whole film this way. Four days after Opus 5.5 shipped, Matt Shumer posted a three-minute animated short made entirely in code, and Degenerative Pixels animated the LGTM music video in TypeScript and three.js.

Example Films6

  • The film on the timeline

More making-ofs1

How films were actually made, from the people who made them.

Sources & further reading12
NextWhere we are todayIn use now