Motion Designer

# 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**
  -