Micro-Motion Philosophy & Sub-100ms Hover

In desktop productivity applications, micro-motion exists solely to sustain spatial continuity in the user's mental model. Sluggish transitions destroy professional velocity.

Motion as Spatial Anchors, Not Entertainment

Consumer apps indulge in 600ms card flips. In Tuff, users execute hundreds of rapid operations daily:

• Motion's sole legitimate role is an optical spatial anchor: communicating where elements originate from and collapse into.
• The vast majority of micro-interactions complete within 90ms–180ms.
• Motion must never block incoming keyboard inputs or pointer clicks.

Hover States Require 0ms Instant Response

Moving a pointer across a screen is a high-intent exploratory action. Iron Rule: When the cursor enters an interactive hit area, background fills and text inks must update in 0ms!

Attempting to ease colors on hover makes the pointer feel bogged down in molasses, ruining responsive tactile feedback.

Why Easing Hover Colors Feels Laggy

Human motor reflexes expect visual feedback under the 100ms threshold. If an engineer declares:

// Severe anti-pattern!
.btn { transition: background-color 200ms ease; }

As the cursor traverses a button cluster, backgrounds fade in lethargically. The cursor exits before the transition resolves, inducing the physiological sensation of input lag.

State Morph Transition Class Isolation

When is color easing permissible? Only during semantic state shifts (e.g. converting a chip from muted to dangerous).

To prevent state transitions from polluting hover states, TuffEx mandates: Color transitions must attach exclusively to temporary morph classes, never to the element root:

.tx-mode-chip {
  // Hover remains immediate: 0ms delay
  &:hover:not(:disabled) {
    background-color: var(--tx-mode-chip-fill-hover);
  }

  // Activated only during explicit semantic morphs
  &.is-morphing {
    transition: 
      background-color 240ms var(--tx-ease-out-strong), 
      color 240ms var(--tx-ease-out-strong);
  }
}

Through class isolation, hovers retain instant snap, while semantic state changes morph smoothly.