Product videos as code

Short product videos are everywhere: a launch teaser, a feature walkthrough, a clip for the changelog. They are also a chore. You either learn a video editor or wait for someone who knows one. And when the UI changes next month, you start over.

Video Studio, a Labs feature in PaneScale, takes a different approach: a video is code. And because it is code, a coding agent can write and edit it with you.

#Scenes are functions

A video is a timeline of scenes. Each scene is the body of a small function that draws one frame on a canvas:

ctx.fillStyle = theme.bg;
ctx.fillRect(0, 0, w, h);
const k = u.easeOut(u.clamp(t * 2, 0, 1));
ctx.fillStyle = theme.text;
ctx.font = `600 ${h * 0.09}px Inter`;
ctx.textAlign = 'center';
ctx.fillText('Every agent, one window', w / 2, h / 2 + (1 - k) * 40);

t runs from 0 to 1 over the scene. w and h are the frame size, theme holds the colors, and u has helpers — easing, word-by-word text, counters, device frames for a browser or a phone, a typing terminal, a clicking cursor. A scene can draw text, shapes, charts, typing code — anything a canvas can draw.

#Why this works well with agents

Agents are good at writing small, self-contained functions with a clear contract. “Make the title slide in from the left and hold for a second” is a precise change to a twenty-line function. Ask for it, review the result in the preview, and undo it if you don’t like it — every agent edit can be reverted.

Thirteen templates — from a logo reveal and a kinetic title to a browser mockup with a clicking cursor and an end card — give the agent and you a starting point. For bigger changes the agent writes a short plan first, and you watch the new scenes land on the timeline while it works.

#The determinism check

There is one property a scene must have: drawing the same moment twice must produce the same picture. If a scene uses Math.random() or the current time, the preview you approved and the video you export will differ.

So before export, Video Studio renders every scene twice at the same moment and compares the pixels. If they differ, the scene fails the check with a clear explanation. Alongside it run checks for syntax, runtime errors at the start, middle and end of each scene, scenes that look like a still image, and formats that are too long for social media. The result is a score out of 100.

#Captions that stay readable

Captions are burned into the video, because many people watch without sound — kinetic, plain or in a big social style. The checks warn when a caption is on screen for less time than its words need, or when text has too little contrast.

#Export without extra tools

Export encodes the timeline frame by frame inside the app — faster than real time, with motion blur — and writes MP4 (H.264 with AAC sound), WebM or a looping GIF. No ffmpeg to install. The same timeline re-composes for 16:9, 9:16, 1:1 and 4:5, so one run can export every format, from 720p to 2160p. Any single frame can also be saved as a PNG for a thumbnail.

#When the UI changes

That is the best part. When your product changes, you don’t re-record anything. You ask the agent to update the scenes — and the next video is one export away.

Read the Video Studio docs or the scene API.