12:11Chase AI · Tutorial
GPT-6 Astra + Claude Fable 5.1 = God Mode
A cost breakdown and two Claude Code skills for routing every coding task to the right model instead of defaulting to the most expensive one.
September 7thThe argument in one line.
Claude Code can produce finished motion-graphics video for free by writing a deterministic JavaScript function that returns one frame per timestamp, rendered by a headless browser and stitched into an MP4 with FFmpeg, no AI video generator required.
Read if. Skip if.
READ IF YOU ARE…
- A Claude Code user who wants motion graphics or explainer videos without paying for Remotion, After Effects, or an AI video generator.
- Someone who wants a repeatable prompt structure for turning a script or idea into an animated video, not a one-off trick.
- A builder who wants to package a creative workflow into a reusable Claude Code skill instead of re-prompting from scratch every time.
SKIP IF…
- You want true AI-generated video with realistic actors or generative pixels. This method only produces code-drawn animation, not video generation.
- You expect polished output with zero iteration. The output still needs a storyboard check and a render review before it's finished.
The full version, fast.
Claude Code doesn't generate video. It writes a frame(t) function that returns one image for any timestamp, a headless browser renders each frame, and FFmpeg stitches them into an MP4, so the same input always produces the same frame and any single frame can be fixed without a full re-render. The video walks through four levels: write a focused prompt rather than raising the reasoning effort, ask for a storyboard before committing to a full render, structure prompts around length, aspect ratio, soundtrack source, and a self-check loop with Playwright and an FFmpeg contact sheet, feed in image or video references for style and composition, and package the whole workflow into a reusable Claude Code skill with preset styles.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 04:07
01 · Claude + JavaScript
Claude doesn't generate video pixels. It writes a deterministic frame(t) function, a headless browser renders each frame, and FFmpeg stitches them into an MP4, all for the cost of normal Claude usage.
04:07 – 07:19
02 · Level 1: Prompting
Testing low, high, and ultra reasoning effort on the same prompt shows effort isn't the lever that improves quality, the prompt is, and asking for a storyboard before a full render catches problems early.
07:19 – 09:56
03 · Level 2: Tools + Looping
A complete prompt names the video's length, aspect ratio, and that it should be JavaScript, specifies how the soundtrack is sourced, and tells Claude to render with Playwright and FFmpeg and self-check with a contact sheet before finishing.
09:56 – 11:43
04 · Level 3: References
Claude can match an existing video's composition and pacing from a reference clip, or copy a reference image's visual style, while swapping in entirely new content.
11:43 – 13:39
05 · Level 4: Skills
The whole process gets packaged into a reusable Claude Code skill, shared on GitHub as 'animate', with seven preset styles plus support for custom references, walking through intake, storyboard, code, and delivery.
13:39 – 14:10
06 · Outro
Recap of the four levels and a reminder that the entire pipeline runs on open tools, with no AI video generator or paid stock-animation subscription in the loop.
Lines worth screenshotting.
- Claude doesn't generate video pixels. It writes a function of time, frame(t), and 60 calls a second stitched together becomes a video.
- Because frame(t) is deterministic, the same timestamp always returns the same picture, so any single frame can be redrawn or checked without re-rendering the whole clip.
- A headless browser like Playwright renders each frame and FFmpeg stitches them into an MP4, both open-source, so there's no per-video tool cost.
- Testing the same prompt on low, high, and ultra reasoning effort produced solid results at every level, with ultra taking 8 hours for only a marginal quality gain over 20-30 minutes.
- If the output quality disappoints, the fix is almost always a better prompt, not a higher effort setting.
- Asking Claude to storyboard the video into representative frames per scene before the full render catches direction problems in minutes instead of after a 20-minute wasted render.
- A complete prompt names the video's length and type, its aspect ratio, that it should be built in JavaScript, how the soundtrack is sourced, and that it renders to MP4 with Playwright and FFmpeg.
- Audio can go either direction: Claude can generate a soundtrack as pure code, or take a supplied voice.mp3 first and time the visuals to its word-level timestamps.
- Telling Claude to pull an FFmpeg contact sheet, review it, and fix what's wrong before calling the job done closes the loop so it catches its own rendering mistakes.
- Claude can match an existing video's composition and pacing from a reference clip while swapping in completely different subject matter.
- Style references work the same way as content references: hand Claude an image and ask it to copy the aesthetic rather than insert the image itself.
- Packaging a one-off prompting process into a reusable Claude Code skill turns it into a repeatable intake-to-storyboard-to-render procedure instead of something re-explained from scratch each time.
- A packaged skill can ship with a fixed menu of preset styles, cut-paper, crosshatch, riso, sketchbook, and isometric among them, while still accepting a custom reference image or video.
A JavaScript function that renders itself into video
CODE-DRAWN VIDEO
Claude Code can generate finished motion-graphics video for free by writing a deterministic frame(t) function, rendering it in a headless browser, and stitching frames with FFmpeg, with no AI video generator required.
01Claude + JavaScript
- Claude doesn't generate video directly. It writes a frame(t) function that returns one image for any given time, and 60 calls a second stitched together becomes a video.
- Because frame(t) is deterministic, the same timestamp always returns the same picture, so Claude can redraw or check any single frame in isolation instead of re-rendering the whole clip.
- A headless browser renders each frame and FFmpeg stitches the sequence into an MP4, with sound generated as its own function of time rather than a separate audio track.
- Since the whole pipeline is open-source code, JavaScript, a headless browser, and FFmpeg, there's no per-video cost to an AI video generator or stock-animation subscription.
02Level 1: Prompting
- Effort level mattered less than expected: low, high, and ultra reasoning effort on the same prompt all produced solid results, with ultra taking 8 hours for only a marginal quality gain.
- If the output quality disappoints, the fix is almost always a better prompt, not a higher effort setting.
- Asking Claude to storyboard the video first, a handful of representative frames per beat, catches direction problems before a 20-minute render instead of after.
- Skipping the storyboard step risks an hour-plus loop of full renders, rejections, and re-generation for a video that could have been corrected in minutes at the storyboard stage.
03Level 2: Tools + Looping
- A complete prompt specifies the video's length and type, its aspect ratio, and that it should be built in JavaScript rendered to MP4 with Playwright and FFmpeg.
- For audio, Claude can generate the soundtrack as code, or take a supplied voice.mp3 first and sync the visuals to its word-level timestamps.
- Telling Claude to pull an FFmpeg contact sheet, review it, and fix anything wrong before finishing closes the loop so it catches its own rendering mistakes.
- Playwright gives Claude its own headless browser to actually look at each rendered frame, so it can judge whether the output matches the prompt instead of guessing blind.
04Level 3: References
- Claude can match an existing video's composition and pacing from a reference clip while swapping in entirely new subject matter and content.
- Style references work the same way as content references: hand Claude an image and ask it to copy the aesthetic rather than insert the image itself.
- skillery.dev's AI video gallery and individual creators active in this space are concrete places to find reference styles worth studying before writing a prompt.
05Level 4: Skills
- Turning a one-off prompting process into a reusable Claude Code skill means it survives as a repeatable intake-to-storyboard-to-render procedure instead of being re-explained from scratch every time.
- A packaged skill can ship with a fixed menu of preset styles, cut-paper, crosshatch, isometric, and sketchbook among them, while still accepting a custom reference image or video.
- A well-built skill handles its own setup, checking for and installing dependencies like Playwright, FFmpeg, and a transcription tool rather than assuming they're already present.
Terms worth knowing.
- frame(t) function
- A JavaScript function that takes a timestamp and returns one rendered frame of a video. Call it 60 times a second and the result is a second of footage.
- Headless browser
- A web browser, such as the one Playwright drives, that renders a page without displaying it on screen. Used here so Claude can draw and inspect each generated frame.
- Contact sheet
- A single image made of many video frames laid out in a grid, pulled with FFmpeg to review a whole render at a glance before calling it finished.
- Storyboard (code-generated video)
- A small set of representative frames, one per planned scene, that Claude produces up front so the creative direction can be checked before the full video is rendered.
- Claude Code skill
- A packaged, reusable set of instructions and assets that teaches Claude Code a repeatable multi-step procedure, instead of re-explaining the same process in every new prompt.
Things they pointed at.
11:26channelKevin (X/Twitter creator making AI videos)
Lines you could clip.
01:00
“Claude wrote a function. Give it a time, T, and it returns one picture. Ask for 60 pictures every second, play them in order, and that's a video.”
01:40
“Claude can't watch the video, but it can look at the frames, spot what's wrong, and fix the function. So Claude never made a video. It wrote what the video is. A function of time.”
03:02
“It's all code. It's essentially free. I'm not paying for any outside tools to do this.”
04:29
“If you think your issue with these videos or your sort of creations is an effort problem, it's probably not. It's probably just your prompts.”
06:58
“The worst thing you can get into is you're creating an entire video, it takes 20 minutes, you get it back, you say I don't like this, and you get into this hour-long, three-hour-long loop of generation after generation.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
metaphorstory
You don't need Remotion. You don't need After Effects. All you need is cloud code in JavaScript to create videos like these.
Whether it's a visual explainer, a product demo, or just pure motion graphics, these types of videos are exploding right now. And that's because it's free. This isn't an AI video generator.
This is just cloud. and javascript and so today i'm going to show you how to create these sorts of videos for yourself we're going to go over how to properly prompt it how to bring in reference images and then how to codify this entire thing into a skill so we can walk you through step zero all the way to a finished product so how does this all work how is claude able to create videos when it is not an ai video generation tool well it uses javascript which is a coding language to essentially create still images it creates a bunch of still images Stitches those all together, exports it as an MP4, and you get what you see here.
In fact, I had it create a video explaining how this whole thing works. So for this video, I told it to create it in the style of a three blue, one brown video, and this was a one -shot attempt. This animation wasn't drawn by hand, and it isn't AI video.
Claude wrote a function. Give it a time, T, and it returns one picture. Ask for 60 pictures every second, play them in order, and that's a video.
Same T, same picture, every time. So any frame can be redrawn or checked on its own. A headless browser draws each frame, FFmpeg stitches them together, and the sound is a function of a T2.
Claude can't watch the video, but it can look at the frames, spot what's wrong, and fix the function. So Claude never made a video. It wrote what the video is.
A function of time. So let's break that down just a little bit further. So as explained in the video, every single frame of the video that's being created is generated via JavaScript.
So this frame you saw right here is a function of JavaScript code. That is one single frame. Every second we create 60 versions of that frame, stitch them together.
You now have one second of video. Now what's cool with this system is we can have Cloud Code check its own work. So whether it's 60 frames or 240 frames, we essentially run the video in a headless browser using something like Playwright.
So . It can then take a look at each frame, frame by frame, and then say, hmm, this works, this doesn't. Let's fix this, let's fix that.
And then once it's happy, whether it gives the thumbs up or you give it the thumbs up, it stitches them all via a tool called FFmpeg, which is totally open source. And we get our video. And on top of that, we can easily add sound.
The video you saw had the sound generated with 11 labs. And first I created the script and then we had sort of the graphics go along with it. And as you'll see, as we move along, there's a lot of different ways we can approach this sort of video creation piece.
And again, what's cool about this. It's all code. It's essentially free.
I'm not paying for any outside tools to do this. Now, I think the easiest way to explain all this is kind of break it down into four different levels. The first level is how this works purely from prompting.
Second level is how we add sort of that looping element you saw in the video where it checked its own work. Third, we'll talk about how do we bring in references to this, whether it's video references or just style references via images. And then fourth, I'm going to talk about how do you codify this entire thing.
And by codify, I mean handing you this skill that I've created that sort of walks you through the entire process we're going to go over today. But before we go through all four of these levels, a quick word from today's sponsor, me. So inside of Chase AI +, I have just released an updated Cloud Code and Codex Masterclass, and it is the number one way to go from zero to AI dev, no matter your technical background.
or lack thereof you also get access to my custom ai os which runs not only on codex but cloud code as well so if you're someone who wants to get a little more serious about ai chase ai plus is the place for you i'll put a link to it down in the pinned comment So let's begin with prompting and effort levels. So right here I gave Opus 5 .5 a pretty simple prompt.
I said make a dynamic 15 second motion graphics video that shows what an incredible motion designer you are. Like it's a showreel for a resume. Go all out.
Don't use any skills. And I tested this on low, high, and ultra code. Low knocked it out in like...
20 minutes or so. High took like 30 minutes. Ultra code took eight hours.
And what I want you to pay attention to is the quality difference between all of these. And spoiler alert, high and low did just fine. Ultra code was definitely the best.
But if you think your issue with these videos or your sort of creations is an effort problem, it's probably not. It's probably just your prompts. So here's low.
Here's high.
And here's ultra.
Now, all of these were actually pretty solid. And even low did a pretty good job. And what I wanted you to get from that is that the baseline ability of Cloud using JavaScript is actually really strong.
We don't have to be crazy with our prompts to get something that's actually quite legit. But there is one thing we can specifically do that can make our outcomes way better. And that is to ask for a storyboard.
This isn't something that should be... wild if you're someone who's done any sort of AI video generation. And the idea here is simple.
Before we tell Claude to go out there and create a 10, 15, 30, 60, five minute video. from one prompt, why don't we have it actually storyboard it out for us? Have it create some individual frames which represent the different beats across the video so we can get sort of hands -on on where we're going to be going with this creation before we just have it go off in code.
Because one thing I will say about these JavaScript creations is they can take a long time, especially if you start adding the looping sequence like I'm going to introduce here in a second. So if I simply ask it to give me a storyboard, it's going to give me something like this. It's going to say, hey, here's sort of like the seven big scenes you're going to see.
I can actually see the actual frames themselves before it's created. And so I can start changing things before anything has really been coded. because the worst thing and the worst scenario you can get in is you're creating an entire video, it takes 20 minutes, you get it back, you say, I don't like this or that, and it tries again, and you get into like this hour -long, three -hour -long loop of just like generation after generation.
So simply asking for a storyboard before it creates the video is gonna save you so much time. So now let's move into level two where we can dive deeper into the prompt structure as well as the outside dependencies we need to actually get this whole thing to work. First things first, when we do the prompt, hey, you just want to mention what is going to be the length and what type of video you want to do.
So like a 30 -second animated explainer about how whatever works. You're also going to want to mention sort of the aspect ratio you want to do this in. Is it going to be a full -screen video or are we doing something vertical that's for like short -form social media?
Then we definitely want to mention JavaScript. obvious enough. Then we want to talk about the soundtrack.
The soundtrack can be pure code, and that's what a lot of these things are, but you can totally supply your own soundtrack to Cloud Code. In fact, you can kind of work backwards. When we were doing that video where I had to do the explainer for you, where we actually had an audio and narrator, I gave it the audio first of the narration, and then it worked backwards from there and made sure the visuals matched the audio.
So you have that option as well. Third, we want to say, make sure you render it to an MP4 with Playwright and FFmpeg. So we mentioned Playwright specifically because Playwright is what's going to allow Cloud Code to run that headless browser to check to see, hey, do all these frames make sense?
And FFmpeg is what we are going to use to actually stitch everything together. Now, after that, we can mention, like I said earlier, hey, here's the voice MP3, time the visuals to it. And then at the end, what we want to say is, before you call it done, use FFmpeg to pull a contact sheet, look at it, fix what's wrong, re -render and repeat.
You don't have to use this exact verbiage, but you need to mention something somewhere along the lines of, hey, before you're done, check your work with FFmpeg and Playwright and make sure everything aligns and makes sense. Now, Opus 5 .5 and Fable 5 .1 are so good that if you don't even mention these things, it's probably going to do it.
you should understand how this all works. So if it isn't doing what you want, you know how to actually articulate that. So to recap, you need playwright, you need FFM peg, and you also need to figure out how do you want this actually created?
Are you going to do the visuals first and then audio afterwards? Or do you have audio with a soundtrack or maybe a narration? And then I want the graphics to match that.
Again, when you're talking about narration, we can use something like 11 Labs, but there are a ton of open source resources to create that narration as well. Although I will say 11 Labs is probably the best thing out there. They just came out with their MCP.
This isn't sponsored by 11 Labs whatsoever, but I do like their product. And I believe their subscription is like five bucks a month, which is relatively cheap. Now, level three is where we go beyond simple prompts and we start adding references.
This can either be images. And we can say, hey, I want you to insert this actual image or I want you to copy its sort of aesthetic style. Or we can give it actual video and say, can we use the composition of this video as inspiration for what we are trying to create?
And we're just going to insert our own unique content. Now, Claude's really good at this. On the left, we have the reference video.
I fed it. This was created with Opus 5 .5 and Remotion. And on the right is our JavaScript recreation.
On the left -hand side, it was a video about currency, and on the right -hand side, it was about explaining sort of the history of electricity. So we'll watch this for a couple seconds so you can see what a good job it does.
And so we'll stop it there. But you can see, in terms of the composition, from the reference to our version, It's pretty close.
It looks like it's from the same family of design, yet the actual content is completely different. Now, as for where to find this sort of inspiration, there's obviously a million and one places. One place I like is this website called skillery .dev.
So skill, S -K -I -L -L -R -Y .dev. They have a category for AI videos. So you can browse different Opus 5 .5 videos to sort of like start getting your mind turning as for what you want to do.
This is... paid but on the free version you can still see quite a few another really good place is twitter and i think this guy kevin is probably the best out there when it comes to creating these sort of videos so highly suggest taking a look at his profile and seeing like what the upper level of this sort of content creation really looks like and lastly at level four we want to be able to codify this process we want to turn it into some sort of procedure that claude can do over and over again.
And the best way to do this is by simply turning it into a skill, which is what I've done here, and it's what I'm giving you today. So this Claude Code skill essentially uses the whole JavaScript format we've been talking about, and it just walks you through it. It comes with seven preloaded different styles, cut paper, crosshatch, Rizzo, sketchbook, isometric, but you have the ability to do custom styles just by doing what I said, handing it some sort of reference image or reference video.
Now, the skill goes through a number of stages, and the best part is it walks you through it. So it starts with an intake where it's going to ask you a bunch of questions in terms of what's your subject? What do you want the format to be?
What do you want to do with the audio, the voice? Do you want sort of like some sort of hero character that gets seen from, you know, the first scene all the way till the end? From there, we talk about what the story is going to look like.
We eventually push it all the way to a storyboard like we talked about earlier so we can actually get sort of like eyes on what each scene will look like before we actually create the whole thing. And then finally, we code it and deliver it to you. And throughout this entire process, Claude will loop through the video it's created to make sure everything syncs up and makes sense.
That whole sort of loop we talked about earlier with Playwright and FFmpeg, it's going to do that all automatically. You just need to answer the questions the skill prompts you for, and provide whatever references you want.
Installing it is super easy. You can do it as a plugin, or you can just hand this URL to Cloud Code, and it will do everything for you. It will also make sure you have all the prerequisites and dependencies, like Playwright, like FFmpeg, like things like Faster Whisper.
And it'll even ask if you want to do something like the 11 Labs Connector. Now, this thing is very much a work in progress. I've been messing with it a ton.
So if you decide to use this for yourself and you come up with your own sort of improvements, definitely open up a PR and let me add that to what everyone is using. So that's where I'm going to leave you guys for today. I hope you got something out of it.
I think these JavaScript videos are awesome because like I keep saying, they're pretty much free. We just pay for it with usage. There's no third party AI image generator or AI video generator we need to use to create these things.
And... The level, the quality is really high. We just need to know how to prompt it and how to give it references.
So as always, let me know what you thought. Make sure to check out Chase AI Plus if you want to get your hands on my Cloud Code Masterclass. And besides that, I'll see you around.
The Hook
The bait, then the rug-pull.
No Remotion license, no After Effects timeline, no AI video generator: just Claude Code and JavaScript. The creator opens by showing a three-blue-one-brown-style explainer Claude built in one shot, then spends the rest of the video reverse-engineering exactly how to prompt for it.
Named ideas worth stealing.
03:02list
The Four Levels
- Level 1: Prompting
- Level 2: Tools + Looping
- Level 3: References
- Level 4: Skills
A four-level progression for going from a single text prompt to a reusable Claude Code skill: prompting basics, a Playwright/FFmpeg self-check render loop, image or video references, and codifying the whole process.
Steal forstructuring any multi-step Claude Code tutorial or creative pipeline
08:27list
The video-generation prompt checklist
- Length and type of video
- Aspect ratio
- Explicitly mention JavaScript
- Soundtrack source (code-generated or supplied)
- Render to MP4 with Playwright and FFmpeg
- Pull a contact sheet and self-check before calling it done
The six things a prompt needs to reliably get Claude to produce a finished, checked video instead of a one-shot guess.
Steal forprompt templates for any workflow where Claude should render output and verify its own work before finishing
01:00concept
Video as a function of time
Claude writes a pure function, frame(t), that returns one picture for any given time. Because it's deterministic, the same timestamp always returns the same frame, so individual frames can be redrawn or checked without re-rendering the whole video.
Steal forexplaining deterministic rendering pipelines or building a Remotion-alternative on top of Claude Code
How they asked for the click.
VERBAL ASK
03:54product
“inside of Chase AI+, I have just released an updated Cloud Code and Codex Masterclass, and it is the number one way to go from zero to AI dev”
Mid-roll self-sponsor read (about 20 seconds) for his own paid community and masterclass, with the link placed in the pinned comment rather than spoken aloud; repeated briefly again near the outro.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
