Motion

Motion is the time-based feedback a component gives in response to interaction or a state change. zen runs it on two engines: the motion package for anything that springs, travels or has to be interrupted, and CSS for everything that only changes colour, shadow or position.

What animatesCopy Anchor Link

Toast and Drawer stay on CSS on purpose. Both run on Base UI's per-frame swipe and stack variables — --toast-index, --drawer-swipe-progress, --drawer-swipe-strength — and moving them to Motion would mean reimplementing that math in JavaScript. Sidebar animates width and margin, where a spring would distort the content inside it. Progress and Meter change on every value update, and an animation repeated that often stops reading as feedback.

PresetsCopy Anchor Link

Springs and the short tweens ship in lib/motion.ts. Every install of a component that needs Motion writes that file, and it is yours to edit.

Press feedback is a scale, not a spring: motionTokens.pressScale defaults to 0.97, pressed in 100ms and released in 160ms by motionTokens.press. A click is shorter than a spring, so the press and its release use short tweens instead of the snappy preset; a spring there leaves the button still shrinking when the click ends. The Switch thumb's stretch and the Slider thumb's grab use the same tween, so they track the pointer instead of growing after it has moved.

A state change that has to land with the click is a tween too: motionTokens.state completes the Checkbox mark's pop in 120ms, so the mark is whole by the time the click ends while its colour changes on the same click.

import { motion } from 'motion/react';
import { useMotionTransition } from '@/lib/motion';

export function Thumb({ on }: { on: boolean }) {
  const transition = useMotionTransition('snappy');

  return <motion.span animate={{ x: on ? 20 : 0 }} transition={transition} />;
}

Easing and durationCopy Anchor Link

CSS transitions use the Style's Tokens, so a Theme change moves them with everything else.

A timing value belongs to one engine. Springs are never mirrored as CSS variables, and easing is never duplicated in lib/motion.ts.

Reduced motionCopy Anchor Link

Every component reads the preference itself through Motion's useReducedMotion(). useMotionTransition() wraps it and collapses a spring preset to an instant change; overlays read the preference directly so they can drop their scale and travel while keeping the fade. There is no provider to mount and no change to your layout — installing a component is the whole setup.

Under reduced motion the end state, focus and feedback are kept and travel is removed:

• Presses and toggles jump to their end state; colour feedback still runs.
• The Switch thumb and the Checkbox mark keep their end state without travel or scale, and the Slider thumb keeps tracking the pointer without scaling.
• Expandables snap open and closed.
• Dialogs, sheets and popups fade on opacity alone, with no scale and no travel.

EditingCopy Anchor Link

lib/motion.ts and the Tokens are copied source, like every kosori component. Tune a preset once and every component that references it follows. Nothing in the library reads your animation configuration from anywhere else.