Those clean, animated explainer videos going around are made with Claude Opus 5.5 writing a small program that draws each frame, then a free tool turning it into an MP4. This guide shows the setup, gives you the prompts, and explains what "editable" really means here.
What you need
A Claude plan with Claude Code. Opus 5.5 launched on 22 September 2026. Anthropic says it is available on Pro, Max, Team and Enterprise plans and on the API (model string
claude-opus-5-5). AnthropicClaude Code installed on your computer. Quickstart
Node.js 22 or newer and FFmpeg, which the video tools use to render.
One video framework (both are free to start):
HyperFrames by HeyGen: turns HTML, CSS and animation into MP4. Open source under Apache 2.0. GitHub
Remotion: builds videos from React components. Free for individuals and teams of up to 3 people; bigger companies need a paid licence. Remotion skills, licence FAQ
Step by step
Route A: HyperFrames (simplest)
Install the HyperFrames plugin in Claude Code:
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframesOpen Claude Code in an empty folder, run
/modeland pick Opus 5.5.Paste the brief below (fill in the brackets).
Claude creates the project. Preview it in your browser with live reload, then render:
npx hyperframes preview
npx hyperframes renderRoute B: Remotion
Add the Remotion skills, or start a new project (it offers to add them during setup):
npx skills add remotion-dev/skillsAsk Claude to launch Remotion Studio to preview, then render with the
/remotion-renderskill.
The brief (works with either route)
Using Opus 5.5, build a [20]-second, 1920x1080, 30 fps motion-graphics video.
Topic: [what the video explains, e.g. "how UPI payments work in 4 steps"]
Audience: [who is watching]
Style: one consistent look across every scene. Use one font pair, a palette
of [3] colours ([hex codes]), the same easing curve, and the same margins.
Scenes:
1. [0-4s] Title: "[headline]" with a kinetic type reveal.
2. [4-10s] [point 1] with a simple icon or diagram that animates in.
3. [10-16s] [point 2], continue the same visual system.
4. [16-20s] End card: "[call to action]".
Rules:
- Keep all timings, colours, fonts and text in one config file at the top,
so I can edit them without touching the animation code.
- Make each scene its own component or file.
- Use only text, shapes and assets I provide. No logos I have not given you.
- Before the final render, export a contact sheet of 6 frames and check
for clipped text, overlaps and low contrast. Fix issues, then render the MP4.
- At the end, tell me the exact command to re-render after I edit.How to edit it afterwards
This is the part the reel calls "a fully editable timeline". In practice you get the project's source code, not an After Effects-style file with layers and keyframes. You edit it in two ways:
Change scene 2: make the diagram slide in from the left instead of fading,
slow the easing, and change the accent colour to #FF6B35. Keep everything
else the same, then re-render.Or open the config file yourself and change a number, a colour or a line of text, then render again. Keep the folder in Git so you can go back to any earlier version.
Good to know
Not native video. Opus 5.5 takes text and images in and gives text out. It writes code; your computer renders the MP4. WPS Blog
Not layers and keyframes. The output is code you can change and re-render, not a timeline in an editing app. Nothing we found shows an After Effects-style export.
"Days of a designer's work" is the reel's claim, not a measured fact. Results vary; the demos online are individual creator examples, not controlled tests.
Cost. There is no fixed price per video. On a plan it uses your usage limits; on the API Opus 5.5 is $4 per million input tokens and $20 per million output tokens. Every revision uses more.
Best for graphics, type, diagrams and UI animations. Photoreal people and live-action footage still need real filming or a separate video model.
Check your facts and assets. Claude can get numbers or logos wrong. Only use brand assets you have the right to use.
Sources
Found this useful? Follow @kevinsingh.me on Instagram for a new AI tool every day, and subscribe so you don't miss the next one.