Tactile controls

Press must feel WIRED — 80ms in. Release springs back over the full 380ms pop tier with a real overshoot. The trick: on :active, override ONLY the transform's duration; letting go restores the spring mid-flight.

--motion-pop 380ms--ease-spring-pop ζ.62press-in 80ms

Hover lifts are tiny and consistent: scale(1.02) or translateY(-1px) on controls, -2px on cards, press sits back at scale(0.97–0.98). Restraint reads as expensive.

Press & release

hold a button down, then let go — the release overshoots

Focus ring locks in

Tab through — the 3px ring rides the pop spring, not a fade

Lift grammar

−1px controls · −2px cards · press sits back down

card · −2px

Bigger mass, longer settle — cards ride the 500ms spring, controls the 380ms pop.

The transition-split pattern

for CVA components that own a single class string

A variant component can't layer multiple transition rules, so ONE rule splits durations per property: colors ride the base tier; transform and box-shadow (the focus ring) ride the pop spring. :active then overrides only the transform slot.

.spring-press {
  transition:
    color            var(--motion-fast) var(--ease),
    background-color var(--motion-base) var(--ease),
    border-color     var(--motion-base) var(--ease),
    box-shadow       var(--motion-pop)  var(--ease-spring-pop),  /* ring locks in   */
    transform        var(--motion-pop)  var(--ease-spring-pop);  /* release springs */
  &:hover:not(:disabled)  { transform: scale(1.02); }
  &:active:not(:disabled) {
    transform: scale(0.97);
    /* override ONLY the transform's duration — press reacts in 80ms */
    transition-duration: var(--motion-fast), var(--motion-base),
      var(--motion-base), var(--motion-pop), 80ms;
  }
}