motion-designer

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

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.

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

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

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.)

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 → components with timing
• Transitions → Transition patterns from remotion-best-practices

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

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

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

• 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

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

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 animations should be faster than entrances (3:2 ratio)

For detailed guidance on specific aspects:

• [rules/scene-composition.md](rules/scene-composition.md) — Visual hierarchy and staging
• [rules/timing-pacing.md](rules/timing-pacing.md) — Frame timing and rhythm
• [rules/audio-design.md](rules/audio-design.md) — Music and audio strategy
• [rules/sound-effects.md](rules/sound-effects.md) — SFX selection and placement
• [rules/transitions.md](rules/transitions.md) — Scene transitions and flow
• [rules/visual-hierarchy.md](rules/visual-hierarchy.md) — Directing attention
• [rules/storytelling-flow.md](rules/storytelling-flow.md) — Narrative structure
• [rules/camera-movement.md](rules/camera-movement.md) — Virtual camera techniques