How to Control Video Duration and Looping with window.CLAUDE_VIDEO

15 Jul 2026 · 1 min read

There's no length slider on the converter — and that's on purpose. The export is exactly as long as your animation, and you control that from inside the design with one line.

Set the duration

Add this anywhere in your animation's script:

window.CLAUDE_VIDEO = { duration: 6 }; // seconds

The converter reads it and captures precisely 6 seconds. No guessing, no trailing dead frames. If you don't set it, it falls back to a sensible default based on the design.

Make it loop seamlessly

A clean loop plays forever without a visible "jump." The trick is simple: the state at duration should match the state at time 0. For a rotation, that means a whole number of turns; for a pulse, a whole number of cycles. If one full cycle takes 2 seconds, set the duration to 2, 4, or 6 — a multiple of the cycle.

Why deterministic time matters

The converter drives a virtual clock — it advances requestAnimationFrame, timers, and CSS timelines to exact timestamps. So read time from those standard APIs (or performance.now()), not from wall-clock hacks, and every frame lands exactly where you expect.

Full details and the animation spec live in the Docs. Ready? Export your loop →