Motion Style Specifications

The static style specification defines how things look. The motion style specification defines how things move. It is an extension of the brand specification that covers: easing curves, duration scales, transition types, and motion personality.

Our brand motion specification: Easing — cubic-bezier(0.4, 0, 0.2, 1) for standard transitions (the material ease-in-out). Entrance animations use ease-out (elements arrive confidently). Exit animations use ease-in (elements leave quickly, making room). Duration Scale — base duration 200ms, scaled by element size: small elements (icons, badges) at 1x (200ms), medium elements (cards, panels) at 1.5x (300ms), large elements (modals, page transitions) at 2x (400ms). Nothing exceeds 600ms — beyond that, the interface feels sluggish.

Motion Personality — our brand motion is "confident and precise." Elements move with intention, not playfulness. No bounces, no wobbles, no overshoots. Entrances are smooth fades with subtle upward translation. Exits are faster than entrances. Simultaneous animations stagger by 50ms per element (the staggered-fade-in-up pattern). This personality carries into AI-generated motion — atmospheric effects should feel purposeful, not chaotic.