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

Hover a row to play 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

Hover to compare the curves over the same distance.

--ease-default curve

--ease-enter curve

--ease-exit curve

--ease-spring curve

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 v0.10 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.