Foundations

Motion

Motion in Zetta is quiet and quick — a handful of durations and easing curves that clarify a change rather than decorate it. Transitions stick to compositor-friendly properties, and the whole system honours prefers-reduced-motion.

Durations

Play the row to see it. Shorter for feedback, longer for entrances.

--motion-instant 0ms

--motion-fast 100ms

--motion-base 150ms

--motion-moderate 200ms

--motion-slow 300ms

--motion-xslow 400ms

Easing

Compare the curves over the same distance.

--ease-default cubic-bezier(0.2, 0, 0, 1)

--ease-enter cubic-bezier(0, 0, 0.2, 1)

--ease-exit cubic-bezier(0.4, 0, 1, 1)

--ease-spring cubic-bezier(0.34, 1.56, 0.64, 1)

Principles

Animate only transform, opacity, clip-path and (sparingly) filter — never layout-bound properties.
Always wrap motion in @media (prefers-reduced-motion: reduce) and drop to an instant change.
Motion should explain a transition — an entrance, a state change — not draw attention to itself.

Known gap

The duration and easing tokens exist, but v1.6 does not yet map specific motions to specific components. Until it does, apply these tokens and state your assumptions — see Known gaps. Full values are on the Motion tokens page.