Exporting Canvas and WebGL Animations to Video

Generative art, shaders, particle systems, data-driven canvas scenes — the heavy stuff Claude can build — all export to clean video, no matter how expensive each frame is to draw.

Why heavy animations still come out smooth

Real-time in a browser, a demanding WebGL scene might dip below 60 fps on a busy machine. The converter doesn't care: it advances a virtual clock and renders each frame at an exact timestamp, waiting as long as a frame needs. So a shader that struggles live still exports as flawless, consistent 60 fps. The render is decoupled from real-time performance.

Steps

1. Export your canvas/WebGL piece from Claude (or use a standalone HTML file).
2. Drop it on claudevideo.app and pick MP4 (or WebM for transparency).
3. Choose 1080p–4K and render.

Tips

• Drive animation from the clock: use requestAnimationFrame timestamps or performance.now() so the virtual clock controls your scene. Avoid Date.now() wall-clock timing.
• Set the duration with window.CLAUDE_VIDEO = { duration: 5 }.
• Seed randomness deterministically if you want a repeatable loop.
• Very large 4K/60 scenes take longer to render — start with a 1080p preview on the free tier.

Render your canvas scene → or read the authoring spec.