Motion · Use the system · Guide

Scale time with travel distance

Duration is not a taste setting. A short transition over a long distance reads as a jump; a long transition over a short distance reads as lag. Material's sixteen durations exist so the same perceived speed holds whether something nudges two pixels or crosses the screen.

Side by side

300ms over the same distance

Select any token below to play it here. Every one covers the same distance, so the only variable is time.

Short

Selection, hover, small icon and state changes A few pixels, or no travel at all

Medium

Component-level transitions: menus, chips, expanding cards Within one component or region

Long

Large surfaces: sheets, dialogs, shape morphs Across a large part of the screen

Extra long

Full-screen transitions and deliberate, expressive moments Edge to edge

Material's scale, unchanged

These are Material's published durations. Pace is set per element through the fast, default and slow springs rather than by rescaling the scale, so the sixteen values are fixed. Reduced motion collapses the long and extra-long bands to 1ms without touching the short ones.