Create a Micro-Interaction Specification Document for UI Components

Create a detailed micro-interaction specification for [NUMBER, e.g., 6-8] key UI components in [APP NAME], a [APP TYPE] application built with [TECH STACK/FRAMEWORK, e.g., React, Flutter, SwiftUI]. The design language is [STYLE, e.g., Material Design 3, custom minimal, glassmorphic]. For each micro-interaction, document the following using this structured template: **Component Name**: [e.g., Like Button, Toggle Switch, Add to Cart] 1. **Trigger**: What initiates the interaction (tap, hover, long-press, swipe, scroll threshold, system event). 2. **States & Transitions**: Map every state the component passes through: - Default → Hover → Pressed → Active/Completed → Reset - Include visual changes per state: scale, color, opacity, icon swap, shape morph - Specify exact transition values: duration (ms), easing curve (e.g., cubic-bezier(0.4, 0, 0.2, 1)), delay 3. **Feedback Layers**: Define multi-sensory feedback: - Visual: color change, ripple, checkmark animation, particle burst - Haptic: feedback type (light, medium, heavy, or custom pattern) for mobile - Audio: sound effect description and trigger condition (optional, specify when appropriate) 4. **Rules & Logic**: - Is the action reversible (toggle) or one-time? - Optimistic UI: does the visual update before server confirmation? - Error recovery: what happens visually if the action fails after optimistic update? - Debounce/throttle: any rate-limiting on rapid repeated triggers? 5. **Accessibility**: - ARIA role and state changes - Focus indicator styling - Reduced motion alternative (prefers-reduced-motion media query behavior) 6. **Implementation Notes**: Provide a brief pseudo-code or CSS snippet illustrating the core animation. Cover these component categories: [CATEGORY 1, e.g., form validation], [CATEGORY 2, e.g., navigation transitions], [CATEGORY 3, e.g., data feedback actions], and [CATEGORY 4, e.g., onboarding cues]. Format the output as a motion design handoff document.