motion-designer

What this skill does

# 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 `<Sequence>` components
- **Timing details** → Frame-based animation with `useCurrentFrame()`
- **Animation details** → `spring()` and `interpolate()` configurations
- **Audio placements** → `<Audio>` components with timing
- **Transitions** → Transition patterns from remotion-best-practices

After creating a spec with this skill, use `/remotion-best-practices` to implement it.

## Common Video Types

| Type | Duration | Structure | Key Elements |
|------|----------|-----------|--------------|
| **Micro-interaction** | 1-3s | Single action | Fast, snappy, clear feedback |
| **Explainer intro** | 5-10s | Hook + tease | Bold text, simple concept |
| **Product demo** | 15-30s | Problem → Solution | Show, don't tell |
| **Feature showcase** | 30-60s | Build → Peak → CTA | Multiple scenes, transitions |
| **Brand story** | 60-120s | Arc structure | Emotional journey |
| **Tutorial** | 2-5min | Step-by-step | Clear progression, pauses |

## Sound Effect Categories

### UI/Interaction
- **Whoosh** — Transitions, reveals
- **Pop** — Buttons, checkmarks, success
- **Click** — Selections, interactions
- **Swoosh** — Fast movements, swipes

### Emphasis
- **Impact** — Important moments, reveals
- **Boom** — Big reveals, launches
- **Ding** — Achievements, completions
- **Chime** — Notifications, alerts

### Ambient
- **Hum** — Background technology feel
- **Texture** — Subtle atmosphere
- **Riser** — Building anticipation
- **Reverb tail** — Spacious, dramatic

## Anti-Patterns

- **Random easing** — Every animation should have intentional timing
- **Over-animation** — Not everything needs to bounce
- **Unclear hierarchy** — Viewer shouldn't guess where to look
- **Mismatched audio** — Sound must reinforce visuals
- **No breathing room** — Scenes need space to land
- **Inconsistent style** — Visual language should be coherent
- **Ignoring story arc** — Even abstract videos need flow

## Quality Checklist

Before finalizing a video spec:

- [ ] Clear visual hierarchy in every scene
- [ ] Timing follows natural rhythms
- [ ] Audio supports and enhances visuals
- [ ] Sound effects emphasize key moments
- [ ] Transitions feel smooth and purposeful
- [ ] Story arc is clear (hook → build → peak → resolve)
- [ ] Technical specs are complete for implementation
- [ ] Every element serves the narrative
- [ ] Pacing matches content complexity
- [ ] Ending has satisfying resolution

## Expert Tips

### Timing
- Action should land on music beats when possible
- Use the "rule of thirds" for timing: 1/3 anticipation, 1/3 action, 1/3 follow-through
- Vary timing to create rhythm (avoid mechanical repetition)

### Visual Design
- Use contrast to guide attention (color, size, motion)
- Limit palette to 3-5 colors for cohesion
- Typography hierarchy: headline → subhead → body
- White space is a design element, not empty space

### Audio Design
- Duck background music when SFX play (-6dB to -12dB)
- Layer 2-3 SFX for rich, full sound
- Use silence strategically for impact
- Fade in/out music, don't hard cut

### Animation
- Spring animations feel natural (damping: 200 for smooth, 20 for bouncy)
- Use easing for mechanical UI elements
- Group animations: stagger by 5-10 frames for flow
- Exit animation