Claude doesn't have a video generator, and it doesn't need one. It writes plain code that draws every frame, sound effects included.

That means explainer videos that don't look like AI made them. Here's how we built one from a script.

- Kevin

See how HubSpot Smart CRM connects every tool you use →

A freelance designer needs a 30-second video that shows new clients how her onboarding works. She picks a style, pastes in her script & voiceover, and Claude builds a finished, narrated explainer.

Claude writes the code that draws each frame, so you skip the video editor & the video generator.

✅ Draws every frame with plain JavaScript (the language built into every web browser), so there's nothing to install
✅ Starts from working example code, so results stay consistent, even on Sonnet
✅ Syncs each scene to your voiceover, word by word
✅ Changes on request, like new colors or slower pacing, without starting over
✅ Saves your favorite look as a skill you can reuse

Here's how we turned a plain script into a finished explainer. If you explain the same process to clients, new hires, or customers, you could do it once as a video.

1. Pick a style in the Style Atlas

Open the free Style Atlas (the first link in the video description) & browse its 86 styles. Each one has a 15-second sample explainer with sound effects, so you can preview the look before you commit. We chose a clean, simple style.

2. Record your voiceover

Open Google AI Studio, choose Audio, then Gemini 3.8 Flash TTS, then 'Create new dialogue'. Pick a voice, paste your script, choose a narration style, & click Run. Download the file. No microphone needed, though your own voice or ElevenLabs works too.

3. Get word-by-word timing

Drop the audio file into Claude & ask:

'Give me a word-level SRT transcript for this that I can copy paste.'

Word-level timing syncs best. Plain SRT gives line-by-line timing instead, which also works & keeps longer videos manageable.

HubSpot Smart CRM unifies your data and tools, automates the busywork, and gives every team the context they need to take the next best action.

No more switching between systems or reconciling data across disconnected tools. The intelligent CRM connects your apps, syncs your data, and integrates with your existing tools, so your agents, workflows, and data all work from the same source of truth.

Every tool connected. No data left behind.

What’s Inside:

4. Fill in the Atlas prompt

Switch the style to 'with voice over', type your topic, e.g., 'how noise cancelling works, & paste in the timed transcript. Keep the storyboard on to preview each major scene first, or switch it off to skip ahead. Click 'Copy prompt'.

5. Paste it into a new Claude chat & send

The prompt is long, so it shows up as a pasted-text attachment. That's normal. It includes the full code of the example video, so Claude edits a working base instead of starting from scratch, which keeps results consistent.

6. Load your voiceover & refine

When Claude finishes, click the option on the right to load the voice over, or drag the file in. Then ask for changes, e.g., 'Make the palette match our brand colors' or 'Slow down scene two'. Because it's all code, edits stay precise.

Any process you explain again & again could become a short video.

E-commerce: Show how returns & exchanges work in one 30-second clip

HR: Walk new hires through benefits sign-up step by step

Marketing: Animate a product update for social media

Education: Recap a lesson as a narrated explainer students can replay

Try Sonnet before Opus: The prompt carries the example code, so Sonnet gave us results that look just as good, with less usage. ChatGPT can run the same prompt too, though Claude's result looked a little better.

Save your favorite look as a skill: Once you've customized a style you like, ask Claude to turn it into a skill. Next time, call the skill instead of returning to the Atlas.

Match timing to video length: Word-level timing is great for short videos, but the files get huge on longer ones. Switch to line-by-line timing for those.