--- name: Motion Designer slug: motion-designer category: AI Engineering description: Motion Designer creates detailed scene-by-scene video specifications for Remotion, including timing, audio, transitions, and animation notes. Use it when planning motion graphics or when asked to create or spec out a video. github: "https://github.com/Hainrixz/editor-pro-max/tree/main/.agents/skills/motion-designer" language: TypeScript stars: 237 forks: 116 install: "npx degit https://github.com/Hainrixz/editor-pro-max/tree/main/.agents/skills/motion-designer ~/.claude/skills/motion-designer" installs_to: ~/.claude/skills/motion-designer source_path: .agents/skills/motion-designer/SKILL.md collection_size: 8 category_size: 2793 collection_url: "https://dirskills.com/collections/Hainrixz/editor-pro-max" added: 2026-09-03T06:04:05.127Z last_synced: 2026-09-03T06:04:05.127Z canonical_url: "https://dirskills.com/skills/motion-designer" --- # Motion Designer Motion Designer creates detailed scene-by-scene video specifications for Remotion, including timing, audio, transitions, and animation notes. Use it when planning motion graphics or when asked to create or spec out a video. **Install:** ```bash npx degit https://github.com/Hainrixz/editor-pro-max/tree/main/.agents/skills/motion-designer ~/.claude/skills/motion-designer ``` ## README # 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** → `