KDCDesignSystem/foundations/motion

Foundations · Motion

Motion is functional, not decorative — it provides feedback (state change), continuity (route / modal transitions), and confirmation (success / commit).

Durations

Token	ms	Use
instant	0	Reset / disable
fast	120	Hover, focus, control state
base	200	Tooltips, dropdowns
slow	320	Modals, sheets, route transitions
slower	480	Hero animations, marketing

Easing

Token	Curve	Use
standard	cubic-bezier(0.2, 0, 0, 1)	Default — most state changes
enter	cubic-bezier(0, 0, 0.2, 1)	Enter-only (decelerate to rest)
exit	cubic-bezier(0.4, 0, 1, 1)	Exit-only (accelerate away)
emphasis	cubic-bezier(0.2, 0, 0, 1.2)	Overshoot — success, commit, attention

Signature animation

kdc-fade-up — used on the product family for content reveal:

@keyframes kdc-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kdc-fade-up { animation: kdc-fade-up 360ms cubic-bezier(0.2, 0, 0, 1) both; }

Stagger children at 40–60ms intervals.

Rules

• ✅ Respect prefers-reduced-motion: reduce — collapse all transitions to ≤ 10ms.
• ✅ Use fast for state, base for surfaces, slow for layout shifts.
• ❌ Don't animate width / height — animate transform and opacity.
• ❌ Don't bounce or spin without reason. Loading spinners are the only exception.