| name | motion-and-microinteractions |
| description | Use for interaction design, animations, progressive blur, animated borders, liquid metal accents, transitions, gesture feedback, and motion quality review. |
Motion and Microinteractions
Use this skill when the task involves animation, hover states, transitions, gesture feedback, motion polish, or premium CSS effects.
Motion principles
- Motion must explain state, continuity, hierarchy, or causality.
- Motion should be quick and interruptible.
- Provide reduced-motion behavior when meaningful.
- Do not animate everything.
- Avoid bounce-heavy, toy-like interactions unless the brand calls for it.
Timing defaults
- Micro state changes: 120ms-180ms.
- Buttons, toggles, chips: 120ms-220ms.
- Popovers and menus: 160ms-240ms.
- Sheets and modals: 220ms-380ms.
- Route or screen transitions: 260ms-450ms.
Premium accents
Use these only when requested or clearly appropriate:
- Progressive blur for sticky headers, scroll boundaries, or overlays.
- Border Beam for accent cards, active AI generation, upload/drop zones, or selected premium states.
- Liquid Metal for hero demos, premium product cards, or branded marketing surfaces.
Never use glow, neon, or gradients as a default substitute for good hierarchy.
Verification
Check that animation does not hurt accessibility, content legibility, pointer accuracy, perceived performance, or platform norms.
