Motion

Things move to show a change: a record written, a loop closed, a panel opened. There is no infinite animation on any page.

Token	Duration	Used for
micro	120 ms	hover, press, toggles, tooltips
standard	200 ms	menus, popovers, toasts, tabs
panel	320 ms	dialogs, drawers, sheets
write	500 ms	a record appears
loop	1,600 ms	the hero loop draws once

Entrances decelerate, exits are 0.8 times as long and accelerate. No bounce.

Reduced motion

prefers-reduced-motion: reduce drops every translate and scale and keeps a short opacity fade, at most 200 ms (exits 160 ms). The tokens below are the normal values; the media query overrides them.

Token	CSS variable	Value
ui.motion.duration.instant	--okr-ui-motion-duration-instant	0ms
ui.motion.duration.micro	--okr-ui-motion-duration-micro	120ms
ui.motion.duration.standard	--okr-ui-motion-duration-standard	200ms
ui.motion.duration.panel	--okr-ui-motion-duration-panel	320ms
ui.motion.duration.write	--okr-ui-motion-duration-write	500ms
ui.motion.duration.loop	--okr-ui-motion-duration-loop	1600ms
ui.motion.duration.fast	--okr-ui-motion-duration-fast	120ms
ui.motion.duration.base	--okr-ui-motion-duration-base	200ms
ui.motion.duration.slow	--okr-ui-motion-duration-slow	320ms
ui.motion.duration.micro-exit	--okr-ui-motion-duration-micro-exit	96ms
ui.motion.duration.standard-exit	--okr-ui-motion-duration-standard-exit	160ms
ui.motion.duration.panel-exit	--okr-ui-motion-duration-panel-exit	256ms

Token	CSS variable	Value
ui.motion.ease.standard	--okr-ui-motion-ease-standard	cubic-bezier(0.2, 0, 0, 1)
ui.motion.ease.enter	--okr-ui-motion-ease-enter	cubic-bezier(0.16, 1, 0.3, 1)
ui.motion.ease.exit	--okr-ui-motion-ease-exit	cubic-bezier(0.3, 0, 0.8, 0.15)
ui.motion.ease.linear	--okr-ui-motion-ease-linear	cubic-bezier(0, 0, 1, 1)
ui.motion.ease.panel	--okr-ui-motion-ease-panel	cubic-bezier(0.32, 0.72, 0, 1)