Design system  /  Identity  /  Film  /  Motion
Film · motion

Name the move, say its role.

Seven curves and four springs. Each one has a single job, so a curve tells you what the move is: something arriving, leaving, drifting, hitting, coming to rest, or the camera.

The tokens live in preview/films/_lib/motion.js, and this page reads them from there, so the plots below are the curves the films use. They are tuned for 24 frames a second: at that rate a curve that covers most of its travel in the first frame reads as a pop.

Curves

Springs

Three rules that come with them

Duration grows with distance

An element takes 0.25 s plus 0.6 ms a pixel, 6 to 24 frames. The camera takes 0.35 s plus 1.35 ms a pixel, 0.6 to 2.4 s. Always whole frames.

A speed ceiling

No move faster than 96 px a frame, so motion blur stays blur and never streaks. Whips are the exception: they cut at full speed.

Contrast in speed

In a scene, the slowest move takes at least three times as long as the fastest. Otherwise nothing reads as the important move.

Transitions

A seam is designed, never a cross-fade. The key element of one scene becomes the key element of the next, at the same speed: accelerate out, cut at peak speed, slow into place. Each demo below is the Pipelinq contact-centre film with one hand-off forced to that transition.

The registry with each transition's timing, caption rule and sound is preview/films/_lib/transitions.js. Open any hand-off yourself in the transitions study.