Motion

Two durations, one easing curve, and one rule that overrides both: if the reader asked for less motion, they get none. This is an interface, not a title sequence.

Durations

Short ease transitions on hover and focus only — no bounce, no springy easing, no page-transition choreography.

One easing

There is exactly one curve in the system. Hover the tile below to run it.

• --gl-ease

  The only easing curve in the system. Fast out, settles gently, applied to every transition.

Reduced motion is not a downgrade

tokens.css includes a prefers-reduced-motion: reduce block that sets every duration token to 0ms, and the base stylesheet clamps any remaining transition or animation to a hundredth of a millisecond. Components do not have to opt in, and cannot opt out.

@media (prefers-reduced-motion: reduce) {
  :root {
    --gl-dur-fast: 0ms;
    --gl-dur-base: 0ms;
  }
}

The state change still happens. The Switch still moves. It simply arrives instead of traveling.

<label class="switch">
  <input type="checkbox" role="switch" checked>
  <span></span>
  Dark mode
</label>
<label class="switch">
  <input type="checkbox" role="switch">
  <span></span>
  Weekly digest
</label>

Rules

• Transition named properties, never all. transition: all animates things you did not think about, including layout.
• Hover states shift a background one step deeper, never a color or opacity trick. Surface → fill is the whole vocabulary.
• Press is not animated. Rely on the hover-darken plus native :active, if anything at all.
• Motion is for hover and focus only. No page-transition choreography.