--- name: motion-designer description: Advanced motion designer with decades of After Effects and motion graphics experience, specialized in creating engaging video specifications for Remotion. Use when creating video specs, planning motion graphics, designing animations, or when asked to "create a video", "design motion graphics", "plan video content", or "spec out a video". Produces detailed scene-by-scene specifications with timing, audio, sound effects, and animation descriptions. --- # Motion Designer Expert motion design guidance for creating compelling, engaging videos. This skill provides decades of After Effects and motion graphics knowledge applied to Remotion video specifications. ## Philosophy Great motion design combines three elements: 1. **Visual storytelling** — Every frame serves the narrative 2. **Rhythmic timing** — Motion follows natural rhythms and music beats 3. **Emotional resonance** — Design choices evoke intended feelings ## How This Skill Works When invoked, this skill guides you through creating detailed video specifications that include: - **Scene-by-scene breakdowns** — Complete description of every visual element - **Timing and pacing** — Precise frame timing for all animations and transitions - **Audio strategy** — Background music recommendations with mood and energy level - **Sound effect placement** — Specific SFX with exact timing and purpose - **Transition design** — How scenes connect and flow - **Visual hierarchy** — What viewers should focus on at each moment The output is a comprehensive specification document that works seamlessly with `/remotion-best-practices` for implementation. ## Core Frameworks ### The 12 Principles of Animation (Disney) 1. **Squash and Stretch** — Gives weight and flexibility 2. **Anticipation** — Prepares the audience for action 3. **Staging** — Directs attention to most important elements 4. **Straight Ahead vs Pose-to-Pose** — Two animation approaches 5. **Follow Through and Overlapping Action** — Natural motion continues 6. **Slow In and Slow Out** — Easing creates realistic movement 7. **Arcs** — Natural movement follows curved paths 8. **Secondary Action** — Supporting details add life 9. **Timing** — Speed creates personality and mood 10. **Exaggeration** — Pushes reality for impact 11. **Solid Drawing** — Three-dimensional forms 12. **Appeal** — Design is engaging and pleasing ### Motion Design Arc Every engaging video follows an emotional arc: ``` Hook (0-5s) → Grab attention immediately Build (5-30s) → Establish context and build interest Peak (30-70s) → Deliver main message with maximum impact Resolve (70-90s) → Satisfying conclusion and call-to-action ``` ### Audio Design Layers Professional motion graphics use layered audio: 1. **Background Music** — Sets mood and energy (40-60% volume) 2. **Sound Effects** — Emphasizes actions and transitions (60-80% volume) 3. **Ambient Texture** — Subtle background presence (20-30% volume) 4. **Voiceover/Dialog** — If applicable (80-100% volume) ### Timing Theory Motion graphics timing follows natural rhythms: - **24-30 FPS** — Standard video frame rates - **2-frame rule** — Minimum duration for something to register - **0.3s (9 frames)** — Minimum for comfortable reading - **0.5s (15 frames)** — Sweet spot for UI micro-interactions - **1-2s** — Comfortable transition duration - **3-5s** — Scene duration for complex information - **8-12s** — Maximum attention span without change ## Video Specification Format When creating a video spec, use this structure: ### 1. Overview - **Title** — Clear, descriptive name - **Duration** — Total length in seconds - **Dimensions** — Width x height (typically 1920x1080) - **Frame Rate** — 30 fps (standard) - **Style** — Visual aesthetic description - **Mood** — Emotional tone ### 2. Audio Strategy - **Background Music** - Style/genre - Mood and energy level - Key moments to sync with - Volume envelope (fades, ducks) - **Sound Effects** - List of all SFX needed - Timing for each (in seconds) - Purpose of each effect ### 3. Scene Breakdown For each scene, specify: ```markdown ## Scene N: [Name] (Xs - Ys, Duration: Zs) **Visual Description:** [Detailed description of every element, position, color, size, typography] **Animation Details:** - Element 1: [entrance/behavior] from Xs to Ys - Element 2: [movement/transform] from Xs to Ys - Element 3: [exit/transition] from Xs to Ys **Timing:** - Frame 0-30: [what happens] - Frame 30-60: [what happens] - Frame 60-90: [what happens] **Audio:** - Background music: [volume level, mood] - SFX at Xs: [effect description] - SFX at Ys: [effect description] **Transitions:** [How this scene transitions to the next] **Focus Points:** [What should draw viewer attention] ``` ### 4. Technical Specifications Include Remotion-specific guidance: - Composition dimensions and FPS - Color palette (hex codes) - Typography (fonts, sizes, weights) - Animation types (spring, interpolate, easing) - Spring configurations for different effects - Asset requirements (images, icons, etc.) ## Integration with Remotion Best Practices This skill produces specifications that map directly to Remotion implementation: - **Scene descriptions** → Remotion `` components - **Timing details** → Frame-based animation with `useCurrentFrame()` - **Animation details** → `spring()` and `interpolate()` configurations - **Audio placements** → `