Kevin Stratvert sets up a ChatGPT dot as a YouTube coach: it connects vidIQ, sets a 20% daily-views goal, shares video ideas in a Space and keeps checking in on its own.
Make code-drawn animated explainer videos in Claude
Futurepedia shows how Claude writes plain JavaScript that draws every frame, sound effects included, then uses his free 86-style atlas to make an explainer, even synced to a voiceover.
Futurepedia · YouTube · published Oct 19, 2026 · Content & Creative
▶ Watch on YouTubePrompt
Make a 15-second animated explainer video about [topic] in a [glassmorphism] style. Write plain JavaScript that draws every frame itself, with sound effects also generated in code. Show me a visual storyboard of the main beats first, then build the full video once I approve.
Visual breakdown
Claude has no video generator, but it can write plain JavaScript that draws each frame itself, sound effects included. The host built a free atlas of 86 styles; copy a style's prompt into Claude, add your topic (and optionally a voiceover transcript) and get an explainer video.
The problem: AI-made videos often look like AI-made videos. Motion graphics and explainers need a distinctive style and sound, without a text-to-video model.
From style prompt to explainer video
- Style Atlas86 free styles, each with a 15-second sample explainer and sound effects, all made in code
- Pick style and topicChoose a style, with or without voiceover, and type the topic or story
- Optional voiceoverGemini TTS in Google AI Studio, plus a word-level SRT transcript with timestamps
- Copy promptFull style prompt, including the example video's real code and your topic
- Claude storyboardShows images of each major beat first; can be switched offDropped: Anything you ask to change before the full run
- Claude writes JavaScriptPlain JavaScript draws every frame and the sound effects, modifying the example's code
- Explainer videoPlays in the browser; drop in the voiceover file to sync it to the words
InputsSetup / manualClaudeResult
Why the prompts give consistent results
- The prompt includes all the actual code behind the example video, so Claude modifies a base instead of writing from scratch.
- Sonnet gets results as good as Opus with these prompts.
- Sending only the finished video as a style reference loses detail: models just analyze screenshots.
By the numbers
86styles in the atlas
15 secsample video per style
11:20video length
Make your own
No toolkit such as Remotion or Hyperframes is needed. Claude writes plain JavaScript that runs in the browser.
- Open the free style atlas from the video description and pick a style.
- Toggle with or without voiceover, then type your topic, for example how noise-cancelling headphones work.
- Leave the visual storyboard on to preview the main beats, or switch it off.
- Click copy prompt, open a new Claude chat, paste it and send.
- Approve the storyboard, then let Claude generate the full video.
- Ask for edits such as a new color palette or slower motion; if you love your custom version, ask Claude to turn it into a skill.
For a voiceover: generate it (the host used Gemini TTS in Google AI Studio), ask Claude for a word-level SRT transcript, paste it into the prompt, then load the audio file next to the finished video.
Tips from the video
- Word-by-word timings sync best; line-level SRT works too and keeps long videos smaller.
- The same prompt in ChatGPT worked but looked a little worse than Claude's result, per the host.
- Because it's all code, Claude can fix or alter things precisely when you ask.
- The host burned through his Claude usage quickly while making the 86 styles.
- Spend time refining one style that matches your brand, then save it as a skill.
Jump to the part you need
Distilled from the video’s captions
How to try it
- Open Claude.
- Copy the prompt and fill in the [placeholders].
- Watch Futurepedia's video for the full walkthrough and setup.
Related use cases
Tim builds a Python AI agent from scratch: you speak what you want, and a 6-step pipeline combining text, voice, image and video generation via OpenRouter produces a fully scripted video.
Jack shows Replica, a free set of eleven Claude skills that reads an app's negative reviews, maps every screen, rebuilds it, tests each flow and fixes what users hate.
Ben explains the Reverse Engineer Anything idea and uses a three-step process on his 6 best and 6 worst newsletters to rebuild his newsletter skill instead of writing instructions by hand.