Motion

MetrePay uses subtle, purposeful motion. Animations should feel natural and fast — never decorative or distracting. In a payment context, motion must reinforce trust, not create anxiety.

---

Transition Tokens

Token	Value	Usage
--mp-transition-fast	0.2s ease	Hover states, focus rings, color changes
--mp-transition-base	0.3s ease	Card hover, button states, sidebar
--mp-transition-slow	0.4s ease	Page-level transitions, gradient hover

---

Usage Examples

Button Hover

.button {
  transition: all var(--mp-transition-base);  /* 0.3s ease */
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--mp-shadow-hover);
}

Card Hover (Lift Effect)

.product-card {
  transition: all var(--mp-transition-base);  /* 0.3s ease */
}

.product-card:hover {
  background: #FFFFFF;
  box-shadow: var(--mp-shadow-hover);
  transform: translateY(-2px);
}

Input Focus

.input {
  transition: border-color var(--mp-transition-fast);  /* 0.2s ease */
}

.input:focus {
  border-color: var(--mp-color-blue);
  box-shadow: 0 0 0 3px rgba(110, 150, 255, 0.15);
}

Sidebar Slide (Mobile)

.sidebar {
  transition: transform 0.3s ease-in-out;
}

.sidebar--open {
  transform: translate(0, 0);
}

Gradient Hover (Hero Section)

.hero-section {
  position: relative;
  background: var(--mp-gradient-hero);
  transition: all var(--mp-transition-slow);  /* 0.4s ease */
}

/* Subtle gradient shift on hover */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(73deg, #6E96FF 0%, #5C0390 80%);
  opacity: 0;
  transition: opacity var(--mp-transition-slow);
}

.hero-section:hover::before {
  opacity: 1;
}

---

Animation Philosophy

Do ✅

• Use ease or ease-in-out timing functions — they feel natural
• Keep transitions under 0.4s — faster feels more responsive
• Use transform and opacity for performance (GPU-accelerated)
• Combine translateY(-2px) with shadow for card lift
• Use transition: all only when multiple properties change simultaneously

Don't ❌

• Don't use linear timing — it feels mechanical
• Don't animate width, height, or margin — use transform instead
• Don't use transitions longer than 0.5s in payment flows — it creates anxiety
• Don't use bounce or spring animations — they feel unprofessional in fintech
• Don't animate on page load unless it's a loading state
• Don't use CSS animations for critical payment actions (submit, confirm)

---

Loading States

For async operations (form submission, payment processing):

/* Spinner */
@keyframes mp-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.mp-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--mp-color-border);
  border-top-color: var(--mp-color-blue);
  border-radius: 50%;
  animation: mp-spin 0.8s linear infinite;
}

/* Button loading state */
.button--loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

---

Reduced Motion

Always respect user preferences:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}