Backgrounds, frames and padding

A raw screen recording fills the frame edge to edge and reads as a screenshot someone happened to film. Insetting it on a background, rounding the corners and adding a soft shadow takes about four seconds and changes the impression entirely. Here is what each control does and where each stops helping.

The background is a surface, not a picture

The eight backgrounds are gradients and flats drawn in code — light paper, dark ink, cool slate, warm sand, muted moss, soft ember, a plain flat, and none at all for transparent output. They are deliberately quiet: a background's job is to make the recording look inset and lit, not to be looked at. There is, equally deliberately, no purple-and-blue aurora, because it is the visual cliché that instantly dates a product video and makes it look like every other one. Choose light for a light interface and dark for a dark one, or the opposite for contrast, and then stop thinking about it.

Padding, corners and shadow

Padding is how far the recording is inset from the frame edge, and it does the most work of the three — around 5% is a good default, more for vertical formats where the extra breathing room reads as intentional, and zero when you want the recording edge to edge. Rounded corners suggest a window rather than a raw capture. The shadow gives the recording a position in space; the default sits at 85% strength with the blur and offset scaled to the frame, so it stays proportional at every resolution. All three fail in the same direction: too much padding shrinks your interface into unreadability, too much rounding eats the corners of the UI, and too much shadow reads as a slide-deck effect from twenty years ago.

Window and browser frames

Three options: none, a plain window bar with three dots, and a browser frame with an address bar. The window bar is right for anything that is not a website — a desktop app, a tool, a panel. The browser frame is right when the fact that it is a website matters, and the address bar carries **whatever URL you type and nothing otherwise**. It is left empty by default on purpose: printing a plausible-looking URL that is not the one being demonstrated misleads the viewer, and that is not a default we are willing to ship. The bar comes in light or dark to match your interface.

What the camera actually moves

Worth knowing because it explains why composed demos look right: the background stays fixed and the framed recording is what scales and pans. A zoom move pushes into the screen inside the frame, while the surface it sits on stays where it is — exactly like a camera moving towards a screen on a desk rather than the whole world zooming. If the background scaled with the recording, every zoom would feel like a cheap slideshow transition. The same renderer draws the preview and the exported file, so what you see while editing is what the encoder receives.