Big Idea

The argument in one line.

Claude can produce polished animated explainer videos by writing plain JavaScript that draws and animates each frame itself, which sidesteps the need for any dedicated text-to-video model.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

Content creators who want branded, consistent animated explainers without hiring a motion designer or learning a framework like Remotion.
Builders already using Claude who want a copy-paste library of working animation-style prompts instead of designing a visual style from a blank page.
Anyone making narrated explainer videos who wants the animation timed precisely to a voiceover without manual keyframing.

SKIP IF…

You're looking for a text-to-video model that produces photorealistic or live-action footage; this produces stylized, code-drawn animation only.
You need Claude to watch an existing video and copy its style directly. It can only work from a style's source code or a written description, not from the video file itself.

TL;DR

The full version, fast.

Claude doesn't generate video directly, but it can write plain JavaScript that draws and animates every frame itself, producing motion graphics and sound effects entirely through code. The host built a free 86-style library, the Style Atlas, covering looks from flat-vector explainers to chalkboard and cut-paper styles, each with a copyable prompt that includes the full working source code as a style reference. Picking a style, pasting the prompt with a topic, and optionally adding text-to-speech narration with a word-level transcript lets Claude generate a complete, voiceover-synced explainer video in one pass, with edits handled by asking for precise code changes rather than regenerating from scratch.

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 →

Chapters

Where the time goes.

00:00 – 00:37

01 · Intro

Claude has no video generator but writes plain JavaScript that draws each frame itself, producing motion graphics and explainer videos with a free 86-style prompt library to go with it.

00:37 – 02:06

02 · What's New

Prior Claude video workflows relied on installed frameworks like Remotion or Hyperframes; this approach needs none of that, and traces back to another creator's posts that first showed what plain-code video could look like.

02:06 – 03:46

03 · The Style Atlas

A free library of 86 animation styles, from flat-vector to chalkboard to cut-paper diorama, each with a 15-second sample video and its own copyable Claude prompt, plus a self-built JavaScript sound-effect database.

03:46 – 06:28

04 · Generate with no voiceover

Picking the Glassmorphism UI style, the host copies its prompt, adds a topic, and runs it in Claude with storyboard mode on, producing a finished noise-cancelling-headphones explainer with synced sound effects.

06:28 – 07:35

05 · Inside the Prompt

The copied prompt includes the style's full working source code, which is why results stay consistent across Sonnet and Opus and why ChatGPT, working only from screenshots, falls noticeably short.

07:35 – 11:19

06 · With a Voiceover

Generating narration in Google AI Studio with Gemini text-to-speech, pulling a word-level transcript, and pasting both into a new style prompt produces a fully voiceover-synced explainer, 'How a Star Is Born,' timed beat to beat.

Atomic Insights

Lines worth screenshotting.

Claude can build animated explainer videos without any text-to-video model, because it writes plain JavaScript that draws and animates every frame on its own.
Giving Claude a style's full source code as reference produces far more consistent results than giving it a video file, since neither Claude nor ChatGPT can actually watch a video, only screenshot it.
Because the output is code, fixing or changing a generated animation is usually a precise, surgical edit instead of a full regeneration.
A free library of 86 pre-built animation styles, each with a ready-to-copy prompt, removes the need to design a visual style from scratch.
The same style prompt produces comparably good results in both Sonnet and Opus, because the consistency comes from the included source code, not from the model's creative judgment.
Sound effects in these videos are generated entirely from a JavaScript sound-effect database, with no external audio tools involved.
Turning on storyboard mode shows static images of each major beat before the full video renders, catching problems before spending a full generation.
A voiceover-synced video needs a word-level timestamped transcript, not just an audio file, for Claude to match animation beats to speech precisely.
A frequently reused custom style is worth turning into a dedicated Claude skill, so the whole prompt doesn't need to be re-pasted every time.
The identical style prompt pasted into ChatGPT produced a noticeably weaker result than Claude, even with the same source code included.

Takeaway

Consistent AI video comes from reusing code.

CODE-FIRST VIDEO

Claude builds consistent animated videos by writing and reusing plain JavaScript source code as its style reference, which is why edits stay precise and quality holds across models.

01Intro

Claude can produce motion graphics and explainer videos without a dedicated video-generation model by writing JavaScript that draws every frame itself.
A free 86-style prompt library removes the step of designing a visual style from scratch before you even start writing a video prompt.

02What's New

Older Claude video workflows relied on installed frameworks like Remotion or Hyperframes; writing plain JavaScript directly needs no extra toolkit.
The approach traces back to another creator's experiments, a reminder that watching how other builders push a tool is often how a new workflow gets found.

03The Style Atlas

Seeding Claude's own JavaScript sound-effect database alongside the visual styles means audio and animation both come from the same code-first approach.
Each style ships with a 15-second sample video, so you can judge the look before committing a generation to it.
Styles range from simple, flat-vector and chalkboard, to elaborate, cut-paper diorama and glassmorphism, covering very different production budgets with the same workflow.

04Generate with no voiceover

Switching on storyboard mode shows static images of each beat first, letting you catch a wrong direction before spending a full generation.
Because the output is code, asking for a change, a slower transition, a different color palette, is usually a precise edit instead of a full re-render.
The same prompt produced comparably strong results in both Sonnet and Opus, and a noticeably weaker one in ChatGPT with the identical source code.

05Inside the Prompt

Giving Claude a style's actual source code as reference, instead of the rendered video, is why results stay consistent, since neither Claude nor ChatGPT can watch a video file, only screenshot it.
Reusing a working example as a base lets Claude modify existing code rather than writing an entire scene from nothing, which is why quality holds up across different models.

06With a Voiceover

Syncing a voiceover needs a transcript timed to the word, not just a line-level subtitle file, for the animation to land beats precisely on speech.
A generated voiceover file can be dropped into the chat after the prompt is sent, not just attached at the same time, so forgetting the file upfront doesn't block the build.
A style you keep coming back to is worth turning into a dedicated Claude skill, so the whole prompt library doesn't need to be re-copied every time.

Glossary

Terms worth knowing.

Style Atlas: A free library of 86 pre-built animation styles for Claude-generated explainer videos, each with a sample clip and a ready-to-copy prompt containing the style's full source code.
Remotion: A React-based video framework some creators install to give Claude a structure for building programmatic videos, used before the plain-JavaScript approach shown here.
word-level SRT transcript: A subtitle file timestamped down to the individual word rather than the line, used so a generated video's animation beats can be matched precisely to spoken narration.
storyboard mode: An optional generation setting that has Claude produce and pause on static images of each major scene before building the full animated video.

Resources

Things they pointed at.

02:13toolThe AI Style Atlas (86 free animation-style prompts) ↗

00:39toolRemotion

00:39toolHyperframes

07:30toolGoogle AI Studio (Gemini text-to-speech)

07:40toolElevenLabs

Quotables

Lines you could clip.

00:39

“Claude writes plain JavaScript that draws each frame by itself.”

cleanly states the whole premise against older framework-based workflows→ TikTok hook↗ Tweet quote

06:22

“That's why these can be so consistent, and why it gets just as good of results out of Sonnet as it does Opus.”

the payoff claim for why the source-code approach works→ IG reel cold open↗ Tweet quote

05:47

“Since this is all code, if you want any changes, with most of them, it's really easy for it to fix or alter anything really precisely. Just ask.”

the practical, concrete benefit over a black-box video model→ newsletter pull-quote↗ Tweet quote

10:48

“That turned out amazing. It honestly blows my mind how easy this is now.”

unscripted reaction landing right after the finished voiceover demo→ TikTok hook↗ Tweet quote

The Script

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

There's a new way to make videos with Claude, and they are perfect for motion graphics, explainer videos, and just videos that don't look like they were made with AI. Claude doesn't have a video generator, but it doesn't need one. It does it all through code.

I'll show you how these work and exactly how to make them. Plus, I actually created a huge free database of 86 styles you can explore and use just by copying the prompt. There's simple ones, more elaborate ones, and some that are just really unique.

And they're all customizable and have the option to sync them up to a voiceover and time them perfectly to the words.

First off, I want to explain what's new about this, since I've been using Clod to create motion graphics for a while already, using frameworks like Remotion and Hyperframes, as many other people have. Those are toolkits you can install that give Clod a structure to build videos. This doesn't need any of that.

Clod writes plain JavaScript that draws each frame by itself. JavaScript is the programming language built into every web browser. It doesn't really matter to know any of that, but I wanted to cover it.

And I got most interested in this over the previous workflows I had because of a series of amazing posts by another creator named Kevin. You may have already seen this, but I'll show one really quick.

That was the first one I saw that just blew me away. It's so unique and different from anything I've seen AI make before. This is not really something that would make sense in the types of videos that I make, but it showcases the creative directions this can be taken in.

And again, it doesn't involve any sort of text -to -video model. It's all created using code, including all of the sound effects.

Now, I wanted to adapt this more towards YouTube explainer videos. So I had Claude generate a total of 86 different styles. I listed out around 20 to 30 that I wanted, then let Claude come up with the rest.

I also had it create its own database of sound effects to draw from, also using only JavaScript. This whole thing is completely free at the first link in the description. These each have a 15 second sample generation explaining how AI works.

You can get a good idea of it that way.

This one is a pretty useful style. And here's a cool 16 -bit pixel style.

And how about a chalkboard style? That's a useful one.

Or how about we try one that's more unique? Here's Cut Paper Diorama.

There's a huge range from simple to really unique, so I'm going to use this Glassmorphism one, which is on the simpler side of these, but should be great for a visual explainer. And each of these have that explainer example with the sound effects included. Then you can click to see a shorter style clip, which shows how it builds a scene.

The explainer is more useful, but I generated all the shorter ones first, actually, and didn't want to just delete them, so I left the option to view them. There's a couple other options here you can select with voiceover, which will ask for a transcript. I'll show that later where you can sync up the whole thing perfectly to a voiceover.

Then without voiceover just asks for the topic or story you want it to create. You can be as simple or as detailed as you want. I'll say how noise canceling headphones work.

By default, the prompt does also include asking for a visual storyboard first, so you can get a good idea what it looks like before running the full generation. It will show images of each of the major beats that will be used. The examples give you a pretty good idea of how it will go, so I switch that off a lot of the time, then just ask for edits afterwards if I need them.

I'll leave it on to show what it looks like. Then when I click copy prompt, it includes the full prompt to recreate the style and also the parts I added in of the topic. So when I go to Claude, all I have to do is paste it in and hit send.

Now this is what the storyboard looks like when it comes back. I think this looks great, so I'll let it generate the whole thing. But you could ask for any changes you want at this point.

And here's what came back.

That looked great. The style was really good. The sound effects went along perfectly.

And since this is all code, if you want any changes, with most of them, it's really easy for it to fix or alter anything really precisely. Just ask. I do think it could have benefited from a voiceover actually, so I'll show that next.

But I do want to mention I used Opus for that, but you don't have to. I generated this one in Sonnet as well that I think looks just as good. Then I also pasted that same prompt into ChatGPT and Astra gave me a good result too.

Although I think it is a little worse than Clogs. That's how easy this is to use and there are so many different styles in here. A lot of them are really, really cool.

I may have gone a little overboard on this. It's the fastest I have ever burned through my usage and resets. That's why I was like, I need to make sure other people can use this instead of just me.

So all those tokens I used get more use out of them. So yeah, it's all free at the link in the description.

And you may have noticed when I pasted it into Claude, it was the little pasted text attachment. That's because the prompt is really long. This is what the whole thing looks like.

I do have some guidance built in, but the most important part is it includes all the actual code that was used to create the example video. That's why these can be so consistent, and why it gets just as good of results out of Sonnet as it does Opus. If you just send the video itself as a style reference, VOD and ChatGPT can't watch it.

All they do is take screenshots and analyze those to piece it together. So a lot gets lost in that process. Since these are made from code, it includes all the code.

So it has that base and just makes modifications instead of writing it all from scratch. Much more consistent. And as you copy these prompts, you can modify anything you want.

Just ask to change the color palette or things to move slower. Ask for any customizations to these. Just explain that in your prompt or through iteration after it comes back.

And then if you end up with a new custom version you like. Ask Claude to turn that into a skill so you don't have to come back to this database every time. You can just call the skill instead.

Now I'll show how to use this if you have a voiceover. I typically use my own voice, but I'll use Gemini 3 .8 Flash text -to -speech for this demo. You could also use Eleven Labs or any method of making a voiceover.

I'm in Google AI Studio to use this. There's model selection on the right. Hit audio.

Then Gemini 3 .8 Flash TTS. Then create new dialogue. Then there's a big list of voices to choose from.

I'll listen to a couple. Observe how the metaphor develops across the third chapter. Observe how the metaphor develops across the third chapter.

Let's solve this quadratic equation using the quadratic formula. I completely understand how frustrating that billing issue is. Let me pull up your account right now and adjust the charge.

That one sounds good. I'll paste in the script. Then there's some more customization options.

Got a few style options. I think narration will be good for this one. Then there's all these options for tags where you can add breaths and laughs and other sounds throughout.

It will add the tag right into the script and they usually sound great. Now that's more for dialogue scenes though. I don't need any in this.

So I'll click run. Then pretty quick I can listen to that. Stars begin as huge cold clouds of gas.

and dust. That's sounding great. I'll download it.

From here, we still need a transcript with timestamps. Some tools like Eleven Labs can give you that with your generation. You can also use transcription tools.

There's free ones online or local options. Or you can ask Claude to use those transcription tools itself. I will drop the file in and say, give me a word level SRT transcript for this that I can copy paste.

It works best with the word by word timings. If you only ask for an SRT transcript, it will give you the timing by line instead of for each word. That works well too.

And I do that for longer videos, mainly because these word for word ones will be gigantic for those. But for these shorter ones, having it down to the word is nice. And once I have that, all I do is pick a style.

This flat vector science looks awesome. Should go well with this topic. And I'll toggle it to with voiceover.

Then I'll type in the topic, how stars are born. Then I'll copy the transcript from Claude and paste that in. And I'll switch the storyboard off for this one.

Click copy prompt. Open a new chat in Claude, paste and send it off. That's all finished.

You'll see the option on the right to load voiceover. You can click that and select the file or just drag the voiceover in. Then it's all ready to go.

You could upload the voiceover file at the same time you send the prompt to, but I wanted to make sure it still worked if you forget to do that since I forgot the first time I tested it. It's easier to just drop it in now. Let's check this one out.

Stars begin as huge, cold clouds of gas and dust. Gravity slowly pulls the cloud together, and as it collapses, it spins faster and heats up. When the center reaches about 10 million degrees, hydrogen atoms start fusing into helium, releasing enormous energy.

That's the moment it ignites. A new star is born, and it can shine for billions of years. That turned out amazing.

It honestly blows my mind how easy this is now. That was the entire process. And if you're using this for videos, you'll probably want to spend some time refining a style that you like that fits with your aesthetic.

Like the one I use, I based off of this background I have with all the blue and amber dots and lighting. But there's so many cool styles to start from in here or just to use as is depending on what types of videos you need. Again, that style atlas is completely free at the link in the description.

I hope you put it to good use, and I'll see you in the next one.

The Hook

The bait, then the rug-pull.

The title promises a new kind of video, and the opening line backs it up: Claude has no video generator, but it can write the JavaScript that draws, animates, and scores every frame itself.

Frameworks

Named ideas worth stealing.

02:07list

The AI Style Atlas

Flat-Vector Science
Watercolor Wash
Shadow Puppet Theatre
16-Bit Pixel
Chalkboard Lesson
Cut-Paper Diorama
Glassmorphism UI

A free library of 86 distinct animation styles, each represented by a 15-second sample explainer and a copyable Claude prompt that includes the style's full working source code.

Steal forany explainer-video pipeline that needs a consistent, branded visual style without hiring a motion designer

04:20concept

Storyboard-first generation

An optional toggle that has Claude first render static images of each major beat and pause for approval before generating the full animated video, catching a wrong direction before spending the full generation.

Steal forany long-running AI generation task where a cheap preview step saves wasted compute

CTA Breakdown