Motion
Four duration steps and two easing curves cover everything from hover to celebration. The emphasized curve overshoots gently. Use it for entrances, never for exits.
Durations
duration-fast150msHover, color shifts
duration-base220msDefault UI motion
duration-emphasized400msSheet open, card expansion
duration-celebration800msAdmission moment, confetti
Easings
ease-standardcubic-bezier(.2,0,0,1)Default — feels confident
ease-emphasizedcubic-bezier(.05,.7,.1,1)Hero entrances — overshoots slightly
Principles
- Animate transform and opacity first. Layout-affecting properties only when necessary.
- Celebration moments (Admission card, profile completion) earn the 800ms duration. Daily UI motion should never feel that slow.
- Active states scale down to
0.98. A quiet tactile signal that the button registered the press.