'%20stroke='%23E0E0E0'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2682_149131'%20x1='7'%20y1='4'%20x2='23.0784'%20y2='26.6541'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233A3AEA'/%3e%3cstop%20offset='0.592633'%20stop-color='%23DF13F9'/%3e%3cstop%20offset='0.763157'%20stop-color='%23F0558E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
Foundations
Motion
Motion explains change: where something came from, what changed, and where attention should go next. Material answers with two systems — a physics system built on springs, and a fixed easing-and-duration pair for when a spring will not do. Pick one in Use, or set the scheme in Customize.
Material guidance
Pair easing with distance
The fixed-timeline system
Ten curves, chosen by direction
When a spring will not do, Material pairs a fixed easing curve with a duration. Entrances decelerate, exits accelerate, and utility movement uses the calmer standard set.
Sixteen durations
Scale time with travel
Durations run 50ms to 1000ms in four bands — short, medium, long, extra-long. Larger travel gets more time; the steps sit 50ms apart up to 600ms, then 100ms apart.
The default system
Springs, not timelines
A spring is a rule rather than a recording, so it survives being interrupted, retargeted, or handed a gesture's velocity. Material's components take a spring by default; so do ours. Spatial springs may overshoot position, size or shape, effects springs never do.
Material defines the physics as damping and stiffness, and publishes the curve and duration
each spring converts to on the web. Those published values are what --et-motion-spring-* carries — the namespace
is ours, the numbers are Material's.