micro-interaction-design

name	micro-interaction-design
description	Use when adding small interactive feedback (button press, form submit, success confirmation). Micro-interactions communicate state changes.

Micro-Interaction Design

Micro-interactions: <300ms, single-purpose, accompany state change. Examples: button press scale, success checkmark, error shake.

Common micro-interactions

1. Button press (scale 0.95 briefly)
2. Form field focus (border accent appears)
3. Submit success (checkmark appears + fades)
4. Error (subtle shake)
5. Like / favorite (heart fill animation)
6. Toast appearance (slide up from bottom)
7. Delete confirmation (item slides out)
8. Loading complete (smooth replace, not blink)

CSS implementation

.btn:active {
  transform: scale(0.97);
  transition: transform 100ms ease-out;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.error-shake { animation: shake 200ms ease-in-out; }

Effect duration

• Micro-interaction: 100-300ms
• Confirmation feedback: 300-600ms
• State change: 200-400ms

Keep them snappy. Long micro-interactions feel sluggish.

Where this fits in the X3 empire

Micro-interaction patterns for CardPrepAI components.