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
  • List of all SFX needed
  • Timing for each (in seconds)
  • Purpose of each effect

3. Scene Breakdown

For each scene, specify:

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

When to Consult Rules

For detailed guidance on specific aspects:

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