Behind the Cinematic Zoom: Engineering Smooth Motion

One Rec's cinematic zoom is one of the features users mention most often. A smooth, deliberate zoom into a UI element draws the viewer's eye exactly where it needs to go and makes even a simple click feel intentional. Building it was harder than it looks.

The Problem with Linear Interpolation

The naive approach to zoom is linear interpolation: calculate the start and end crop rectangles, then blend between them over N frames. This produces motion that starts and stops abruptly, which the human eye immediately reads as mechanical and unnatural. Real camera movements accelerate and decelerate smoothly, and our zoom needed to feel the same way.

Bezier Easing and Spring Physics

We settled on a hybrid approach. The primary motion curve is a cubic bezier with carefully tuned control points that produce a gentle ease-in and a satisfying ease-out. On top of that, we layer a critically damped spring simulation that adds a subtle overshoot at the end of the zoom — just enough to feel organic without being distracting. The spring parameters (stiffness, damping ratio, and mass) are exposed as presets in the UI: Gentle, Default, and Snappy.

GPU-Accelerated Compositing

Zooming into a recorded frame means upscaling a sub-region of the source, which can introduce blurriness if done naively. We use a multi-pass compositing pipeline on the GPU. First, the source frame is decoded and uploaded as a texture. Then a fragment shader samples the zoom region using bicubic interpolation for sharper results than bilinear. Finally, a sharpening pass with an unsharp mask recovers detail lost during upscaling. The entire pipeline runs in under 2ms per frame on integrated GPUs, leaving plenty of headroom for real-time preview at 60fps.

Keyframe Editing

Users can place multiple zoom keyframes on the timeline and the system interpolates between them. When two zooms overlap, we blend their crop rectangles using a weighted average based on timeline proximity. The result is a smooth, continuous camera path even when the user has placed dozens of keyframes across a long recording.

Lessons Learned

The biggest lesson was that perceived smoothness is more important than mathematical smoothness. Early versions used a perfect ease-in-out curve, but testers consistently said the zoom felt "sluggish." Adding the spring overshoot — which is technically less smooth — made it feel dramatically better. Motion design is as much about perception as it is about math.