motion-designlisted

# Motion Design ## Purpose Design the motion language for a feature or system, including transition specs, micro-interaction definitions, choreography principles, and reduced-motion alternatives. ## Scope Constraints Reads existing animation code, CSS transitions, and motion specifications for analysis. Does not modify source files or execute animations. Does not generate production animation code directly. ## Inputs - Feature or component requiring motion design - Existing animation patterns in the project (if any) - Performance constraints (target FPS, device capabilities) - Accessibility requirements (prefers-reduced-motion support) ## Input Sanitization No user-provided values are used in commands or file paths. All inputs are treated as read-only analysis targets. ## Procedure ### Progress Checklist - [ ] Step 1: Identify motion opportunities - [ ] Step 2: Define motion principles - [ ] Step 3: Spec each animation - [ ] Step 4: Design choreography - [ ] Step 5: Reduced-motion alternatives - [ ] Step 6: Performance considerations ### Step 1: Identify Motion Opportunities Catalog where motion adds meaning: - **State transitions:** Loading to loaded, collapsed to expanded, hidden to visible - **Navigation transitions:** Screen push/pop, modal present/dismiss, tab switch - **Feedback responses:** Button press, form submission, error shake, success check - **Attention guidance:** New item appears, notification badge, scroll-to-target - **Data changes:** List reord