Code to Video

Code to Video is the free-style tool among our video makers. Our AI video templates give you tested layouts and let AI write the words. Code to Video goes one step further: Claude writes the whole video, the layout, the type, the colors and every motion, as code. You are not limited to the shapes of a template, so a brief that no template covers still becomes a finished MP4.

The code has three parts. The style is plain CSS. The body is the HTML of each scene, placed on a timeline with a start time and a length. The script is one GSAP timeline that moves everything on screen. The renderer opens the page in a headless browser, steps through that timeline frame by frame and records the result as a video.

Describe the scenes in order. Say what text appears, what the viewer should see behind it and how long each part should take. "Dark background, the headline types in, three cards slide up one after another, end on the logo" works better than "make a cool promo".

Give the facts you want on screen. Claude uses the brief's facts and never invents prices, statistics, awards or customer names, so put the real numbers and the real call to action in the brief. Name the mood and the colors if they matter: calm and minimal, bold and fast, your brand blue.

Add your own images when the video needs them. A product shot, a screenshot or a logo can be placed in any scene. Up to four images fit in one video, and they come from your uploads or your AI images.

After Claude writes the code, the real renderer takes four stills at different moments of the video. Claude then looks at those stills next to your brief and the code. It reports text that is cut off, overlaps or is hard to read, empty frames, and scenes that miss the brief, and it fixes the serious problems with small edits before you see the result.

You stay in control. Type a change such as "make the second scene slower and the logo bigger" and Claude rewrites the code with only that change. If you know HTML, CSS or GSAP, edit any part of the code directly; the render uses exactly the code you see.

Every piece of code passes a safety check before it renders, whoever wrote it. The video page can load outside code only from a short allowlist of image and video libraries, each at one pinned version and one exact address: three.js for 3D scenes, KaTeX and MathJax for formulas, Lottie, p5.js, D3, PixiJS, Matter.js physics, opentype.js letter outlines and the GSAP plugins. Any other script, font or site is refused. The page cannot call the network, store data or open other pages, and it can only show the images you added. A strict content security policy enforces the same rules inside the renderer and opens only the libraries a video uses. When code breaks a rule, the tool names the problem, lists the allowed libraries and Claude rewrites it.

Every frame is drawn from the position of one paused timeline, so a 3D scene, a physics drop or a generative drawing looks the same in the preview stills and in every frame of the MP4. 3D and canvas scenes render in software WebGL inside the renderer.

Writing, previews and changes are free: three AI drafts a day on a free account and thirty a day after a purchase. Rendering a video of 10 to 30 seconds costs 15 credits. A free account can pay for the render with its daily check-in credits, so you can try Code to Video end to end without buying anything. A failed render is refunded.

Templates are faster when your video matches one of them: a product promo, a chart, a chat story or a slideshow. They also offer narration, music and captions. Pick Code to Video when the layout or the motion you have in mind is not in the gallery, or when you want full control over every pixel and every second.