We replaced nine property tracks and manual number entry with a visual framing overlay that lets you drag a rectangle on the video preview to control zoom and pan keyframes.
We have a keyframe animation system in our video editor. Zoom, pan, rotation, opacity. You place keyframes on a timeline, pick an easing curve, and the engine interpolates between them. Technically it worked fine. In practice, nobody could figure out how to use it.
The old interface exposed nine separate property tracks: zoom, rotation, pan X, pan Y, opacity, crop X, crop Y, crop width, crop height. Each with its own draggable diamonds, value sliders, and percentage inputs. If you wanted to do something as simple as "start flat and gradually zoom into this area," you had to coordinate four tracks and eight keyframes, all entered as numbers.
That's not editing. That's data entry.
What We Changed
We added a visual framing overlay, a draggable, resizable rectangle that sits directly on the video preview. Click "Frame" in the canvas toolbar and a sky-blue rectangle appears showing exactly what region the viewer will see. Make the rectangle smaller and the clip zooms in. Drag it around and the clip pans. The math is simple: rectangle width as a percentage of the frame maps to zoom level, rectangle center maps to pan offset.
It works like the crop tool we already had. Same dark overlay outside the active region, same rule-of-thirds grid, same corner handles. But instead of cutting pixels away, the framing overlay controls a virtual camera.
When you click "Frame," the right panel automatically switches to the Animations tab and scrolls to the keyframe section. You see the connection immediately. The rectangle on the canvas controls the same zoom and pan values that the keyframe tracks display as curves and diamonds.
The typical workflow: scrub to 0%, leave the rectangle at full size (1x zoom, centered), click "Set Keyframe." Scrub to 15%, drag the rectangle smaller and position it over the area you want to highlight, click "Set Keyframe" again. Click "Done." Play it back and you get a smooth zoom-in. Pick "Ease In-Out" and it ramps up naturally.
The tracks, curves, and sliders are all still there in the Animations panel. You can drag keyframes to adjust timing, tweak values, or change easing. But the starting point is always what you see on the canvas, not what you type into a field.
Why an Overlay
Our first attempt was gesture-based: scroll to zoom, drag to pan. It technically worked, but on trackpads, scroll and pinch overlap with browser and canvas viewport zoom. The gesture was invisible. Nothing on screen told you that scrolling would zoom the clip. And dragging conflicted with canvas pan when the viewport was already zoomed in.
The overlay solves all of this. It's a visible affordance. You see the rectangle, you know you can drag and resize it. No gesture ambiguity, no trackpad conflicts. Canvas viewport zoom still works independently because it operates on the outer container, not the overlay.
Before and After
Before: Open the zoom track, add a keyframe at 0% with value 1, add another at 50% with value 1.3, repeat for pan X and pan Y. Hope the numbers match what you had in your head.
After: Click "Frame." Drag the rectangle to frame your starting shot, click "Set Keyframe." Scrub forward, resize and reposition for the ending shot, click "Set Keyframe." Done.
The interpolation engine, the easing curves, the SVG curve visualization, none of that changed. We just stopped making people speak the engine's language and let them work with what they could see.
