How Claude Opus renders video by writing code (7 tools, 7 samples)

⏱ About 20 minutes · 💰 Free tools · 💻 Needs a computer or a cloud agent **What you'll get:** a 5-second video clip in a look you choose, made by your AI agent from code, plus a sense of which drawing tool fits which look. ## First, a fix to the popular list A list keeps going around saying "Claude Opus produces stunning videos" with Blender, Three.js, p5.js, shaders, pixel art, Canvas, Manim and HTML. The tools are right. Four things need fixing: - **The model writes code; it doesn't make video.** Something still has to render the frames and join them into a file. For web tools that's a headless browser (a browser with no window) plus **ffmpeg**, a free video converter. - **Blender needs a real graphics card** for the realistic shots people share. On an ordinary laptop or a small cloud server it's slow. We left it out because we couldn't run it fairly. - **Sound is missing.** A voice, music and the final mix are half of what makes a clip feel like a film. - **The tool doesn't make it stunning.** The idea, the timing and the first two seconds do. ## How it works  The trick that makes it reliable: the code has one function, `draw(t)`, that paints the picture at time *t*. The renderer steps the clock (0, 1/30, 2/30 seconds...) and takes a snapshot each time. A slow machine just takes longer; it never drops frames. ## The 7 tools, one sample each Claude Opus 5.5 wrote each sample below from the one-line request under it, and rendered it on a small cloud server with no graphics card. ### Canvas 2D: glow, particles, light trails  *"900 glowing particles swirl with trails, then gather into the word 'light'."* The browser's plain drawing surface, and the workhorse for anything made of many small moving things. ### Pixel art: a tiny canvas, scaled up  *"A pixel robot walks through a sunset; the mountains scroll."* Draw on a 160×90 canvas, then blow it up 6× with smoothing switched off, so every pixel stays crisp. ### p5.js + p5.brush: watercolour and pencil  *"Paint a watercolour landscape stroke by stroke: sky, sun, hills, trees, birds."* p5.js is a creative-coding library; p5.brush adds paper texture, bleeding watercolour and real pencil marks. ### WebGL shader: fluids, shimmer, glow  *"A warped fluid with bright caustic ridges and a soft halo."* A small program that the graphics chip runs once for every pixel. It's the hardest to write and the richest look. ### Three.js: real 3D in the browser  *"Shiny 3D text, a ring of orbiting cubes, the camera swinging around it."* Lights, materials, shadows and a moving camera, with no 3D app needed. ### HTML + CSS + SVG: charts, layouts, clean motion  *"A weekly visitors card: the bars grow, a trend line draws, a badge pops in."* Ordinary web page animation. Sharp text, easy to change, and the best choice for numbers and UI. ### Manim: maths that moves  *"Show a² + b² = c² with squares growing on a right triangle."* The Python library behind many maths explainer videos. It renders straight to MP4, with no browser. ## Copy this into your AI agent Open Claude Code, Codex, or another agent that can write and run code on your computer. Paste this, then fill in the look: ```text Make me a 5-second video with code. The look I want: [describe it, e.g. "glowing particles that gather into my name"]. 1. Pick the best tool for that look from: Canvas 2D, pixel art on a small canvas, p5.js with p5.brush, a WebGL shader, Three.js, HTML + CSS + SVG, or Manim. Tell me in one line which one and why. 2. Write it as one HTML file with a function draw(t) that paints the frame at t seconds, so the same t always gives the same picture. For Manim, write one Python scene instead. 3. Show me one still frame first and wait for my OK. 4. Then render it frame by frame: 960x540, 30 frames a second, a headless browser snapping each frame, and ffmpeg joining the frames into an MP4. 5. Ask me before you install anything on my computer. ``` The still frame in step 3 matters. It's much cheaper to fix the look on one picture than after a full render. ## If you get stuck - **The video is blank or black.** 3D and shader pages need the browser to keep each picture after drawing it. Ask your agent to "keep the drawing buffer". - **The motion stutters.** The code is reading the real clock. Ask for "draw(t) only, no timers". - **The watercolour looks like mud.** Lower the bleed and use fewer, lighter layers. ## Next Got a clip you like? Ask your agent to add a voice-over and a music track with ffmpeg, then make it vertical for your phone. _Samples made on 29 October 2026 with Opus 5.5. We haven't run this exact prompt in other agents yet._