#Motion

Motion explains origin, continuity, or completion. It does not delay work or make static cards float. Elements begin in a usable, visible state so lower-performance devices never reveal an empty interface first.

<div class="flex w-full flex-wrap items-center gap-4 rounded-xl border border-border bg-card p-6">
    <button type="button" class="btn">
      Hover or focus
    </button>
    <a href="#motion-guidance" class="resource-card w-48">
      <figure class="min-h-20! text-2xl font-semibold">A3S</figure>
      <section>
        <strong>Resource feedback</strong>
        <small>160ms tone and boundary</small>
      </section>
    </a>
  </div>

#Durations

Continuous pointer interactions such as Split Pane resizing and Slider dragging follow input directly without a catch-up transition. Pressed controls may move by at most 1px; cards do not lift on hover.

#Easing

Entry and reversible feedback use the exponential ease-out token --a3s-ease-out: cubic-bezier(0.16, 1, 0.3, 1). Exit may reuse the curve at a shorter duration, but never exceeds 220ms. Avoid long simultaneous transitions across layout, blur, and shadow.

#Reduced motion

Under prefers-reduced-motion: reduce, remove travel, scale, blur animation, and looping decoration while preserving immediate state changes. Loading, streaming, and progress must remain understandable without animation.