Write comprehensive motion design specifications for consistent, performant animations
Create motion design specifications for [INTERFACE/BRAND] animations. Context: - Platform: [WEB/MOBILE/BOTH] - Brand personality: [CHARACTERISTICS] - Performance constraints: [ANY LIMITATIONS] Develop motion guidelines: **1. Motion Principles** - Brand motion personality (playful, professional, elegant, etc.) - Core principles (3-5 guiding principles) - Motion metaphors **2. Timing & Easing** *Duration Guidelines:* | Animation Type | Duration | Use Case | |----------------|----------|----------| | Micro-interactions | | | | Small transitions | | | | Medium transitions | | | | Large/page transitions | | | | Loading states | | | *Easing Curves:* - Standard ease: [cubic-bezier values] - Ease-in: [for exits] - Ease-out: [for entrances] - Ease-in-out: [for moves] - Custom curves for brand **3. Interaction Animations** *Buttons:* - Hover state - Press state - Loading state - Success/error feedback *Navigation:* - Menu open/close - Page transitions - Tab switching *Feedback:* - Toast notifications - Modal appearances - Validation states **4. Loading & Progress** - Skeleton screens - Spinners/loaders - Progress indicators - Content shimmer **5. Choreography** - Stagger timing - Sequencing rules - Coordinated movements - Spatial relationships **6. Performance Guidelines** - Properties to animate (transform, opacity) - Properties to avoid - Frame rate targets - Reduced motion alternatives **7. Implementation Specs** - CSS/keyframe examples - Token naming convention - Tool recommendations
Create motion design specifications for [INTERFACE/BRAND] animations. Context: - Platform: [WEB/MOBILE/BOTH] - Brand personality: [CHARACTERISTICS] - Performance constraints: [ANY LIMITATIONS] Develop motion guidelines: **1. Motion Principles** - Brand motion personality (playful, professional, elegant, etc.) - Core principles (3-5 guiding principles) - Motion metaphors **2. Timing & Easing** *Duration Guidelines:* | Animation Type | Duration | Use Case | |----------------|----------|----------| | Micro-interactions | | | | Small transitions | | | | Medium transitions | | | | Large/page transitions | | | | Loading states | | | *Easing Curves:* - Standard ease: [cubic-bezier values] - Ease-in: [for exits] - Ease-out: [for entrances] - Ease-in-out: [for moves] - Custom curves for brand **3. Interaction Animations** *Buttons:* - Hover state - Press state - Loading state - Success/error feedback *Navigation:* - Menu open/close - Page transitions - Tab switching *Feedback:* - Toast notifications - Modal appearances - Validation states **4. Loading & Progress** - Skeleton screens - Spinners/loaders - Progress indicators - Content shimmer **5. Choreography** - Stagger timing - Sequencing rules - Coordinated movements - Spatial relationships **6. Performance Guidelines** - Properties to animate (transform, opacity) - Properties to avoid - Frame rate targets - Reduced motion alternatives **7. Implementation Specs** - CSS/keyframe examples - Token naming convention - Tool recommendations
This prompt is released under CC0 (Public Domain). You are free to use it for any purpose without attribution.
Explore similar prompts based on category and tags
Plan motion graphics with detailed storyboards
Analyze UI layouts for hierarchy, balance, accessibility, and provide actionable improvements
Create thorough design system component specifications
Create detailed character design specifications for mascots, game characters, or brand illustrations
Create detailed icon set design specifications with grid systems, construction rules, and export requirements