Advanced motion designer with decades of After Effects and motion graphics experience, specialized in creating engaging video specifications for Remotion. Use when creating video specs, planning motion graphics, designing animations, or when asked to "create a video", "design motion graphics", "plan

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: 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: 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](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

motion-designer