motion-craftlisted

# Motion Craft Every animation must serve **feedback** ("it worked"), **continuity** ("that's where it went"), or **hierarchy** ("look here"). An animation serving none of the three is removed, not tuned. When in doubt: shorter, subtler, or none. ## 1. Duration budgets Numbers first; taste second. Defaults for product UI: | Surface | Budget | |---|---| | Hover / press feedback | 90-160ms | | Tooltip, micro popover | 80-200ms | | Dropdown, select, small panel | 150-250ms | | Accordion, tab switch | 160-240ms | | Card / list item entrance | 180-350ms | | Modal, drawer, sheet | 200-400ms | | Route / page transition | 240-500ms | - **Standard interactions stay under 300ms; nothing in product UI exceeds 500ms.** A 180ms dropdown reads as more responsive than a 400ms one. - **Exit = 65-75% of entrance.** Leaving is confirmation, not an event. The rows above bound ENTRANCES; a rule-derived exit may drop below its row - that is the intent, not a violation. - **Distance scales duration:** 100px is the base; 200px ~1.3x, 400px ~1.6x, full-screen ~1.8-2.0x. Small moves at long durations read as lag. - **Frequency scales duration DOWN.** An action done 100 times a day approaches instant. Hard sub-rule: **never animate keyboard-initiated actions** - they repeat hundreds of times daily and animation makes them feel disconnected from the keystroke. ❌ "the command palette fades in over 250ms - it looks polished in the demo." ✅ keyboard-opened palette appears instantly;