2026-10-04 Claude Opus 5.5 - Ask for a video, get a program you can edit

Canonical version: 2026-10-04 Claude Opus 5.5 - Ask for a video, get a program you can edit.

A few days ago, I wrote about letting Claude Opus 5.5 edit one of my YouTube videos. Three posts from late September show a related pattern: people ask Claude Opus 5.5 for motion graphics, and what they get back is code that renders the video.

In this piece, I go through the three examples, why I care that the video is code, and the catches.

Programs that draw

Addy Osmani (Anthropic) had Opus 5.5 draw each frame of a 40-second "how browsers work" animation in JavaScript, based on his own article on the topic. In his words: "It doesn't generate pixels directly but writes programs that draw. That distinction matters because the output is code you can edit, tweak and ship."

He says it works best on anything with "a mathematical description - geometry, motion, structure, timing": animated explainers, data stories, systems like networking or compilers, even procedural sound synced to the visuals.

In his comments, he advises against screen-recording the animation in real time. Instead, step document.getAnimations() currentTime by 1000/30 ms, screenshot each frame, and stitch the frames with FFmpeg.

One line in, 450 frames out

Didier Girard (SFEIR) gave Opus 5.5 a one-line brief: a 15-second looping showreel in the SFEIR design system colors, from the opening logo to "Sharp Tech, Real Impact_".

No video generation model was involved. Opus 5.5 read the public design system page, wrote the animation in code, rendered 450 frames one by one in a headless browser, and assembled the MP4 with FFmpeg. The result has easing curves, an equalizer in the 10 brand colors, 1,296 squares forming "10x", a Fibonacci spiral with a 150x zoom, and a typed end card with a blinking cursor.

He concludes (translated from French): "The video is code. I change it with one sentence and regenerate it in a few minutes, without editing software."

A repeatable workflow

Charlie Hills wrote up the steps on Substack:

1. Install HeyGen's HyperFrames skill (npx skills add heygen-com/hyperframes), which turns web pages into MP4 files
2. Drop a motion graphics skills pack (13 skill folders) into ~/.claude/skills/
3. Pick Opus 5.5 (/model, or the Code tab in the desktop app)
4. Prompt once. Claude writes the animation code, renders the frames and compiles a 15-second video
5. Iterate in plain language: "Slow down the second scene"

HyperFrames describes videos in plain HTML with no build step, and HTML is something models already write well. Remotion does the same job with React components. In both cases, the skills hold the video know-how and the model writes the composition.

Why "the video is code" matters

To change a rendered video, you open it in an editor and work on the timeline. When a program draws the video, you change the program instead. You can diff two versions like any PR. And any change, from "slow down the second scene" to new brand colors, new numbers or a translated caption, becomes an edit to the code plus a re-render.

That makes explainers, onboarding walkthroughs, architecture animations and visual documentation cheaper to produce and to update. I spend my days explaining things, and producing the visuals is usually the slow, expensive part. If a change costs one sentence and a re-render, it's much easier to justify making the visual in the first place.

I've used Opus 5.5 for similar work: a lesson-creation skill that produces animations and quizzes, explainer videos for AI concepts at my day job, and that YouTube edit. Details in 2026-10-02 Claude Opus 5.5 - It edited my YouTube video from A to Z.

The catches

Someone has to maintain the code. Generated animation code is still code, and if nobody can read it, the next big change means regenerating from scratch, and editing with one sentence stops working. Keep the source in Git, keep it small, and treat a messy render script like any other Technical debt. A video editor in Didier's comments was skeptical about how client revisions fit this flow, and I think that's a fair question.

Tokens aren't free either. Every revision is another round of Opus tokens, and none of these demos publish a cost per video. People in Didier's comments report that the HyperFrames skills also work with Claude Sonnet 5.5; I'd test that for simpler pieces.

And these are demos, each one person's example, with no controlled test behind them.

Try it

Pick a concept you explain all the time and ask Opus 5.5 for a 15-second animation of it, rendered from code. Keep the source, then change one thing with one sentence. You'll be surprised.

The full write-up (all three examples, the tips, the price comparison) is in the "Programs that draw" section of my Claude Opus 5.5 note. For the tools, see HyperFrames and Remotion.

That's it for today! ✨

References

• Addy Osmani, "how browsers work" animation drawn by Opus 5.5 (LinkedIn, around 2026-09-26)
• Didier Girard, "Opus 5.5 : 15 secondes de motion design, 450 images, un brief d'une ligne" (LinkedIn, around 2026-09-26)
• Charlie Hills, "Claude Code motion graphics" (Substack, 2026-09-27)
• HyperFrames: https://www.hyperframes.dev/
• HyperFrames source: https://github.com/heygen-com/hyperframes
• Claude Opus 5.5 announcement: https://www.anthropic.com/claude-opus-5-5

Related

• Claude Opus 5.5
• 2026-10-02 Claude Opus 5.5 - It edited my YouTube video from A to Z
• HyperFrames
• Remotion
• HeyGen
• FFmpeg
• AI Agent Skills
• Technical debt
• Addy Osmani
• Didier Girard
• Charlie Hills

About Sébastien

Ready to get to the next level?