INSANE ONE-SHOT! Opus 5.5 made this entire video in 30 min.

Everything you're watching right now is code. No image model drew me, and no video model moved me. Opus 5.5 wrote the shapes, the timing and the paper texture, then a renderer turned that code into video. Watch what happens when I ask it for something different.

Welcome back to the workshop. Today I'll show you how to set this up yourself, what it costs, and what you're allowed to do with the results. We'll also watch Claude change an animation while it's playing, five different ways.

Here's what's going on under the hood. A web page can draw almost anything: shapes, text, gradients, even that torn paper edge. Animation is just those drawings changing over time. So Claude writes a small web page, plus a timeline that says where everything should be at every moment. A browser draws each frame, and a free tool called FFmpeg stitches the frames into a video file. A language model is good at this because every part of it is text.

So why do we need HyperFrames? The drawing is the easy part. The hard part is turning a web page into a video reliably. If you simply record your screen, you get whatever your computer managed to show in real time. Frames drop, and the audio drifts. HyperFrames works differently. It jumps to one exact moment, captures that frame, then moves on to the next. Every frame lands where it should, even when a single frame takes a whole second to draw.

It also handles the tedious parts around that. It places video and audio clips on a timeline, mixes sound, checks a composition for mistakes before a long render, and gives Claude written instructions to read before it starts. To be fair, you don't strictly need it. For my first test, Claude captured frames with a plain browser script, and that works for a short silent clip. Once you add narration, music and transitions, you'll want a tool built for the job.

There are other good options. Remotion builds videos with React, and it's mature and popular. It's free for individuals and small teams, but a company with more than three employees needs a paid license. Motion Canvas and Revideo use TypeScript and have open source licenses. Manim, the library behind many math videos, is excellent for equations and graphs. HyperFrames stands out because it's plain HTML, it's released under the Apache 2.0 license, and it was designed with AI agents in mind.

Getting set up takes a few steps. You'll need a paid Claude plan, since Claude Code is included with Pro and Max. Install Claude Code with its one-line installer, then type slash model and choose Opus 5.5. Next, install Node.js version twenty-two or newer, plus FFmpeg. For HyperFrames itself, just ask Claude to install it for you, along with its skills, the instruction files Claude reads before it builds a video. After that, you can describe the animation you want in plain words.

Your first request can be simple. I asked for a paper cutout version of me that could narrate, with blinking, talking and my drill curls swinging as I move. Claude built the character from shapes, rendered test frames, looked at them, and fixed what looked wrong. The first version gave me a helmet instead of hair. The second one looked like me. Checking its own frames is a big part of why the results hold up.

Let's watch it change something mid-animation. Here's the paper version of me explaining an idea. Now I'll ask Claude to redraw the same scene as a pencil sketch. The timing, the words and the movement stay exactly the same. Only the drawing style changes.

For the second one, the whole scene is built from sticky notes, each one a tiny square of color with its own shadow. When I ask for a sunset, Claude keeps every note it already placed. It recolors and rearranges hundreds of them, and they flip into place one by one.

Next, something creepier. I ask for a horror manga look inspired by Junji Ito, with black ink, heavy shadows and spirals. Claude keeps the same character and redraws her with hard outlines, solid black fills and dense hatching, while a spiral slowly pulls the whole page toward the center.

Then pixel art. I ask Claude to rebuild the scene on a tiny grid with a small palette. Every shape snaps to chunky pixels, the colors drop to a handful, and the motion steps along in crisp little jumps, like a sprite in an old game.

The last one is a chart about the costs we're about to discuss. It starts as a clean infographic. Then I ask for Japanese captions and a chalkboard look. Every number stays in the same place, because Claude changes the style while keeping the data it was given.

Let's talk about cost. On the API, Opus 5.5 costs four dollars per million input tokens and twenty dollars per million output tokens. Tokens are the small chunks of text a model reads and writes. Agents reread a lot of context, and cached context costs twenty cents per million tokens, so a long session is cheaper than it sounds. Batch processing cuts prices in half, and fast mode doubles them. I used a subscription instead. Pro costs twenty dollars a month, or seventeen with annual billing, and Max starts at one hundred. The counter on screen shows how much of my plan each demo actually used.

Now, what are you allowed to do with the videos? HyperFrames uses the Apache 2.0 license, and its authors say there are no per-render fees or commercial-use thresholds. GSAP, the animation library it uses by default, is free for commercial projects too. Its notable restriction is on building no-code animation tools that compete with Webflow, the company behind it. Anthropic's terms assign you its rights in what Claude generates, with the words "if any." Copyright for AI-assisted work is still being worked out, so treat that as a caution, and I'm not giving legal advice. The biggest thing to check is everything else you add. Fonts, music, voices and logos each come with their own license.

So when you see an animation like this, picture a web page that Claude wrote, captured one exact frame at a time. HyperFrames makes that capture reliable, a subscription covers the model, and its license lets you use the results in your own work. Subscribe for more ways to make the robot do it.