How to make a video with Claude Opus 5.5

Short answer: Opus 5.5 does not output a video file. You give it a prompt, it writes an HTML, CSS and JavaScript animation that draws every frame — and then you still have to render that animation into an MP4, line the audio up, and export it. That last part is where most people get stuck.

This page gives you the exact prompt, the workflow that works, and the four places it breaks.

What Opus 5.5 actually does — and what it doesn't

Worth being precise about this, because most posts get it wrong.

The prompt

This is the prompt that started the whole wave. It's worth reading closely, because the structure is what matters: a clear deliverable, a length, a style, an information goal, and a hard budget.

Create a pure javascript animation. 30s-60s whimsical hand drawn
collage style with appropriate audio on yoursite.com.

Entire video should be as high of a production value as possible.
Please spend your time on this, it's very important. People should
understand what yoursite.com is for and after seeing the video will
want to sign up and try it out. Read the FAQ at
https://yoursite.com/ first.

Use high quality text-to-speech model for generation. You can find
the OpenRouter API key in .env

You can use any tools you can find access to and resources on the
internet. You create the script, the assets, the animation, concept,
everything.

I have to go away from my computer so please work autonomously until
done. Quality is paramount. Production value should be on
professional level.

One more thing: max OpenRouter spend is $10

• Change the domain in both places. If you only change it once, the model will research the wrong site and make a video about the wrong thing.
• "Read the FAQ first" needs a full URL. Otherwise it guesses, or skips it.
• The budget line is a request, not a limit. Put the real cap on the API key itself — create a separate key with a hard spend limit before you run this.
• Never let the voiceover read the domain out loud. Add: Never read the domain name in the voiceover — say the product name instead. Show the domain as text on screen only.

The workflow, step by step

1. Get an agent that can write files

   Youneed an agent that can actually write files to your disk — not a chat window. Claude Code, Codex, Cursor, or any coding agent that can run commands, edit files and execute code will do. This is the one hard requirement: if your agent can't write a file and run it, nothing after this step works.

2. Point it at your project and paste the prompt

   Put the OpenRouter key in a .env file in the project folder, then paste the prompt above (with your own domain and goal). Let it run. Do not interrupt it every two minutes to ask how it's going — it works in long unattended stretches, and interrupting it tends to produce a half-finished composition.

3. Preview what it built

   When it stops, you'll have an HTML file. Open it in a browser and watch it start to finish. This is where you find out whether you have a video or a pile of code that flickers. Expect to iterate two or three times before the animation is worth showing anyone.

4. Render it to MP4

   The browser tab is not the file. You need a real renderer that walks the timeline frame by frame and writes a video. Two honest options:

   Option A — do it yourself, free. Open-source frameworks exist for exactly this. HyperFrames (Apache 2.0, built by HeyGen) takes HTML, CSS and seekable animations and renders deterministic MP4. Install it as a plugin for your agent, then render from the CLI:

   claude plugin marketplace add heygen-com/hyperframes
   claude plugin install hyperframes@hyperframes
   
   # then, in your project
   npx hyperframes init
   npx hyperframes render   # walks the timeline, writes the MP4

   It needs Node 22+ and FFmpeg installed. Budget an afternoon for the first setup — the framework is solid, but the first render is where you learn what your animation actually looks like at 24 frames a second.

   Option B — have someone do it for you. That's what this site is. See the bottom of the page.

The four places it breaks

This is the part nobody puts in the tutorial. Everything above is the easy half — here's what eats the hours.

• 1. Browser playback and video render are not the same thing. An animation that looks perfect in Chrome can render as a frozen first frame, because the renderer walks the timeline by seeking, not by playing. Animations driven by elapsed wall-clock time break immediately. Motion has to be tied to a seekable timeline, or the renderer captures the same frame over and over.
• 2. Audio never lines up on the first pass. The voiceover is generated as a separate file and dropped in against the visuals, so the timing is approximate at best. Getting narration, music bed and visual beats to land together means measuring the actual narration length and cutting the scenes to it — not hoping the model guessed right. This is usually more work than generating the animation.
• 3. Assets and fonts are their own failure mode. Any web font, emoji, icon or remote image in the composition has to be resolvable at render time. A font that loads from a CDN is a font that might render as a fallback — or as blank space — in your MP4. Everything needs to be local and frozen before you render.
• 4. "High production value" is not a spec. The prompt asks for it, and the model genuinely tries, but it can't see the result. You're the only one who can watch the output and say that transition is half a second too fast, that title is unreadable at phone size. There is no automation for taste. This is also why the last 10% is the 90%.

Frequently asked