Skip to content

Motion draft v0.2.0

Durations and easing curves, the state transitions of controls, and how motion gives way when people ask for less of it.

Motion holds two durations and one easing curve, the design system's additions (packages/tokens/src/additions/): the Figma library has none. Components read them directly for one use: the transition of a control between its states. Every transition is a color change, never a movement, and every component switches it off when people ask for reduced motion.

Specimens

The tokens this foundation is built from, drawn from packages/tokens/src/: raw primitives and the semantic decisions on top of them. A token added to one of these groups appears here with no site change; values that differ per mode or per platform are shown next to each other.

Durations

Each duration moves a dot across the track at constant speed.

duration.* · 2 tokens · A dot crossing a track in that time (played on request).

Your system asks for reduced motion: the dots jump to the end of their track instead of moving.

  • duration.fast 150ms
  • duration.normal 250ms

Easing curves

Each curve, and a dot following it over one second, slowed down so the curve shows.

easing.* · 1 token · The curve, and a dot crossing a track along it (played on request).

Your system asks for reduced motion: the dots jump to the end of their track instead of moving.

  • easing.standard cubic-bezier(0.2, 0, 0, 1)

Examples

Components following this foundation, rendered by their web templates, once per mode. States are forced with data-state, so what you see is exactly what the CSS defines, without a keyboard.

light
dark