The Math Behind Beautiful Cursor Tracking
Spring physics, catmull-rom splines, and velocity smoothing — the algorithms that make cursor movement feel cinematic.
The Math Behind Beautiful Cursor Tracking
When you watch a polished screen recording, the cursor does not just jump from point to point. It glides. It accelerates naturally into movements and decelerates softly at the end. This is not an accident — it is the result of several layers of mathematical smoothing that transform raw mouse input into something that feels intentional and cinematic.
Raw Input Is Noisy
The operating system reports cursor positions at the display refresh rate, typically 60 or 120 times per second. At this granularity, even a deliberate straight-line mouse movement produces a noisy, jagged path full of micro-corrections from hand tremor. Playing back this raw data looks jittery and distracting, especially when the recording is zoomed in.
Catmull-Rom Spline Interpolation
The first smoothing pass fits a Catmull-Rom spline through the raw cursor positions. This type of spline passes exactly through each control point (so the cursor still reaches every position the user intended) while producing a smooth, continuous curve between them. The tension parameter controls how tightly the curve follows the control points — we default to 0.5, which produces a natural-looking path without excessive rounding of corners.
Velocity-Based Smoothing
Not all cursor movements should be smoothed equally. A fast swipe across the screen should feel swift, while a slow, precise hover over a button should feel deliberate. We calculate the instantaneous velocity at each sample point and use it to modulate the smoothing window. High-velocity segments get a wider smoothing kernel that removes jitter without dampening the sense of speed. Low-velocity segments get a narrower kernel that preserves the user's precise positioning.
Spring Physics for Camera Follow
When the cursor moves to a new region of the screen, the camera (the viewport crop) needs to follow. We drive this camera movement with a critically damped spring simulation. The spring's target position is calculated from the cursor's smoothed trajectory, and the damping ratio is set just above 1.0 to prevent overshoot while still feeling responsive. The result is a camera that follows the cursor with a natural lag — close enough to keep the cursor in frame, but smooth enough that the viewer never feels jolted.
Putting It All Together
The final pipeline processes each frame in three stages: spline fitting on the raw positions, velocity-weighted smoothing on the spline output, and spring-driven camera positioning on the smoothed result. Each stage is lightweight enough to run in real time during preview playback, and the parameters are exposed in the UI so power users can tune the feel to their preference.