Micro-interactions shape trust. Award sites share timely feedback, unified rhythm, and zero competition with content.
State machines before keyframes
Cover default, hover, active, focus, disabled, loading, success, and error. Missing states hurt more than missing flair.
Duration and easing ranges
Feedback 200–320ms, panels 320–450ms, one or two shared curves. Prefer instant or fade when prefers-reduced-motion is set.
Restraint checklist
Do not combine move, scale, recolor, and shadow at once; do not loop motion in reading zones; do not animate over slow APIs—fix performance first.
