Claude Opus 5.5 Motion Graphics From One Text Brief: The Exact Prompt Structure
| Step | What happens |
|---|---|
| 1 | You write one detailed creative brief in plain English |
| 2 | Claude writes ONE self-contained HTML page - every frame is drawn by a render(t) function of time |
| 3 | A headless browser (Playwright) screenshots the page frame by frame |
| 4 | ffmpeg assembles the frames into a finished MP4 |
| 5 | You edit by talking: "bigger text, slower intro, different blue" - the code changes, the video re-renders |
Claude Opus 5.5 announcement and capabilities: anthropic.com/claude-opus-5-5 (checked Oct 23, 2026)
HTML-to-MP4 with Claude Code: vawe.dev/docs/html-to-mp4-with-claude-code and Intempt field notes: intempt.com/blog/how-to-make-motion-graphics-with-claude-code (checked Oct 23, 2026)
Why This Is Not "AI Video"
Sora and friends generate video - every run looks different and you cannot edit a single word on screen. This workflow is different: the whole video is code. Claude writes an HTML page where a single function, render(t), draws exactly what the screen should look like at second t. A browser then photographs that page 30 times per second and stitches the photos into an MP4. Same code, same video, every time - and because it is code, you edit the video like a document. "Make the headline bigger" is a one-line change, not a re-render prayer.
The Exact Prompt Structure
One-liners give you mush. The briefs that work have these six blocks, in this order:
- Objective + format. What the video is, its length and shape. Example: "a 15-second vertical (1080x1920) showreel opener for a design studio".
- Output contract. Tell it the rules of the machine: "Build ONE self-contained HTML page. All motion lives in a pure render(t) function of time t in seconds - no CSS animations, no timers, no randomness. Everything deterministic so every frame can be screenshotted."
- Style system. Exact palette (give hex codes), font stack, one accent colour, background texture. The more specific, the more expensive it looks.
- Scene beats with timings. "0-2s: logo draws itself as a line. 2-5s: three service words slide in one at a time. 5-8s: shapes morph into the headline..." - a beat list is the single biggest quality lever.
- Exact text. Every word that appears on screen, spelled out. Never let it invent copy.
- Capture + assembly. "Then screenshot the page at 30fps with Playwright and assemble with ffmpeg (libx264, faststart) into an MP4."
Copy-Paste Starter Prompt
Paste it into Claude Code (or Claude with code execution), fill the brackets, and let it run. First result too plain? That is expected - iterate in plain English: "slower intro", "more contrast", "text 20% bigger". Each change is a code edit, so nothing else shifts.
The Honest Limits
- Graphics, not humans. This makes animated text, shapes, logos and diagrams - not realistic people or footage.
- The brief is the skill. Detailed beat-by-beat briefs look professional; one-liners look like a screensaver.
- You need Claude with code execution (Claude Code or claude.ai with artifacts/analysis), a browser automation step (Playwright) and ffmpeg - Claude sets up the pipeline for you, but the machine runs it locally.
- Long videos cost time. Every second is 30 rendered frames; a 60-second 4K piece is a real render job, not an instant.
Keep This Guide Handy
Bookmark this guide for the full walkthrough, and follow @amanarya.ai on Instagram for daily AI workflows.