Motion

What motion is

Motion is when and how a surface changes in response to input. The parameter takes three values: still, responsive, and animated. Each value fixes its own duration, easing, allowed properties, and triggers. Motion never fires on page load and never fires on a timer; every animation is bound to a user-initiated trigger — hover, focus, click, a state change, or (for animated surfaces) a panel reveal.

Three values

value	duration	easing	allowed properties	triggers
still	—	—	none	none
responsive	120 ms	cubic-bezier(.2, .6, .2, 1)	color · border-color · background-color · opacity	hover · focus · click · state change
animated	120 or 220 ms	cubic-bezier(.2, .6, .2, 1)	color · border-color · background-color · transform · opacity	hover · focus · click · state change · panel reveal

A still surface has no motion — no transitions, no animations, and no visible change on interaction. A responsive surface permits 120 ms transitions on four colour and opacity properties, triggered by user interaction only. An animated surface adds 220 ms motion on transform and extends triggers to include panel reveals.

Easing

One curve governs all motion. The easing is fixed at cubic-bezier(.2, .6, .2, 1) across responsive and animated values. It accelerates into motion and decelerates out, crossing halfway of the output before halfway of the duration. The exhibit below renders the curve read directly from the motion parameter’s declaration in @vaquum/face/parameters/motion.

Triggers

Allowed triggers are hover, focus, click, state change, and — for animated surfaces — panel reveal. Page load and timer-fired events are both forbidden as motion triggers. The firm’s surfaces do not draw the reader’s eye toward motion that fires without the reader’s action.