# Motion design, written as code

Period: Apr 2026 – now · Era: 2026 · The Shakeout

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.

## How it worked

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.

## Why it mattered

Motion graphics were the most tedious craft in post: keyframes, easing curves, a fresh export for every changed number. Code made them editable and agents made code cheap to write. HyperFrames went from launch in April to more than 62,000 GitHub stars by October, and Remotion's announcement animation, made only by prompting, drew about nineteen million views. The motion designer's taste now directs a tireless animator.

## Tools of the era

- Claude Motion (2026): https://claude.com/resources/articles/dashboards-and-motion
- HyperFrames (2026): https://github.com/heygen-com/hyperframes
- Remotion Agent Skills (2026): https://www.remotion.dev/docs/ai/skills
- ElevenLabs MCP (2026): https://elevenlabs.io/blog/introducing-voice-music-image-and-video-generation-in-the-elevenlabs-mcp
- Runway MCP (2026): https://runway.com/news/company-news/mcp
- Blender MCP (2026): https://www.anthropic.com/news/claude-for-creative-work
- Claude Opus 5.5 (2026): https://www.anthropic.com/claude-opus-5-5
- GPT-6 Astra (2026): https://openai.com/index/gpt-6-astra/

## Example videos and posts

- The new Claude Motion is awesome · Paul J Lipsky: https://www.youtube.com/watch?v=hbPvZvpu9KU
- How I make motion graphics inside Claude Motion (Opus 5.5) · Higgsfield AI: https://www.youtube.com/watch?v=5HYYXYYCrL4
- HeyGen HyperFrames: full tutorial · HeyGen: https://www.youtube.com/watch?v=qiek-fBv924
- Make professional launch videos for free with HyperFrames · Peter Yang with Bin Liu and Jake Moran: https://www.youtube.com/watch?v=iqb5Rd6KKr8
- GPT-6 Astra finally solves AI video editing · Nate Herk: https://www.youtube.com/watch?v=o3IEkKXXXvo
- Claude Code can now automate your videos (Remotion and Opus 5.5) · Roboverse: https://www.youtube.com/watch?v=6_rCyryA6hg
- I let Claude Opus 5.5 run Blender for a day · Aidan Stanik: https://www.youtube.com/watch?v=vg0qrfVdTg4
- Introducing Claude Dashboards and Claude Motion · Claude: https://www.youtube.com/watch?v=en0GuyhieQk
- HyperFrames launch video · HeyGen: https://x.com/heygen/status/2044827454460871072
- Remotion Agent Skills announcement · Remotion: https://x.com/Remotion/status/2013626968386765291
- LGTM (Looks Good to Me) · Degenerative Pixels: https://www.youtube.com/watch?v=3TNpOD6bov8
- Animated mechanical spider · Muska: https://www.youtube.com/watch?v=d1UIc5keijA
- Opus 5.5 just changed video editing forever (free skills) · Nate Herk: https://www.youtube.com/watch?v=7jHXoPGnA4c
- How to make insane motion graphics with Claude Opus · That AI Trick: https://www.youtube.com/watch?v=nCUQGEDkOM8
- Claude Opus 5.5 just solved motion graphics (no more AI slop) · Bart Slodyczka: https://www.youtube.com/watch?v=6Ij9-f2T2Ck
- Claude Motion explained: make videos inside Claude · Leonardo Grigorio: https://www.youtube.com/watch?v=mJ6ZvGiwZEc

## On the timeline

- [An Animated Short Made Entirely in Code](https://aifilmhistory.org/entry/opus-5-5-animated-short-in-code) (2026-09-26)

## Sources

- Anthropic: build live dashboards and animate explainers with Claude: https://claude.com/resources/articles/dashboards-and-motion
- Get started with Claude Motion: https://support.claude.com/en/articles/17454997-get-started-with-claude-motion
- Runway is in Claude Motion: https://runway.com/news/company-news/runway-claude-motion
- HyperFrames on GitHub: https://github.com/heygen-com/hyperframes
- HeyGen: HTML to video was not easy: https://www.heygen.com/research/html-to-video
- HyperFrames Studio puts the agent on the timeline: https://runtimewire.com/article/heygen-hyperframes-studio-agent-video-editor
- Remotion Agent Skills: https://www.remotion.dev/docs/ai/skills
- Anthropic: Claude for Creative Work: https://www.anthropic.com/news/claude-for-creative-work
- HeyGen's open-source launch films: https://github.com/heygen-com/hyperframes-launches
- Florence: Opus 5.5 Motion Lab, every animation with its prompt and follow-ups: https://x.com/flxrnc/status/2105311836190978392
- 0xMovez: how to build a motion design studio with Opus 5.5: https://movez.substack.com/p/how-to-build-motion-design-studio
- What 233 Opus 5.5 motion videos teach about prompting motion design: https://github.com/PHY041/claude-motion-playbook

---
Source: https://aifilmhistory.org/workflows/motion-design-as-code