motion-designer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

为制作极具吸引力的视频提供专业动效设计指导。本技能将数十年的After Effects与动态图形制作经验应用于Remotion视频规格制定。

Philosophy

设计理念

Great motion design combines three elements:

Visual storytelling — Every frame serves the narrative
Rhythmic timing — Motion follows natural rhythms and music beats
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.

调用本技能后，将引导你创建包含以下内容的详细视频规格文档：

逐镜头拆解 —— 所有视觉元素的完整描述
时间与节奏 —— 所有动画与转场的精确帧时间
音频策略 —— 包含氛围与能量级别的背景音乐推荐
音效布局 —— 带精确时间点与使用目的的特定音效
转场设计 —— 镜头间的衔接与流畅过渡方式
视觉层级 —— 每个时刻观众应聚焦的核心元素

输出的完整规格文档可与

/remotion-best-practices

无缝对接，用于后续实现。

Core Frameworks

核心框架

The 12 Principles of Animation (Disney)

Squash and Stretch — Gives weight and flexibility
Anticipation — Prepares the audience for action
Staging — Directs attention to most important elements
Straight Ahead vs Pose-to-Pose — Two animation approaches
Follow Through and Overlapping Action — Natural motion continues
Slow In and Slow Out — Easing creates realistic movement
Arcs — Natural movement follows curved paths
Secondary Action — Supporting details add life
Timing — Speed creates personality and mood
Exaggeration — Pushes reality for impact
Solid Drawing — Three-dimensional forms
Appeal — Design is engaging and pleasing

Squash and Stretch —— 赋予物体重量感与灵活性
Anticipation —— 为观众提前铺垫动作预期
Staging —— 将注意力引导至核心元素
Straight Ahead vs Pose-to-Pose —— 两种动画制作方法
Follow Through and Overlapping Action —— 自然动作的延续性
Slow In and Slow Out —— 缓动效果实现真实运动
Arcs —— 自然运动遵循曲线轨迹
Secondary Action —— 辅助细节增添生动感
Timing —— 速度塑造角色性格与氛围
Exaggeration —— 适度夸张强化视觉冲击
Solid Drawing —— 三维形态的呈现
Appeal —— 设计需具备吸引力与愉悦感

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

所有引人入胜的视频都遵循情感弧线：

Hook (0-5秒)     → 立即抓住观众注意力
Build (5-30秒)   → 建立背景并提升兴趣
Peak (30-70秒)   → 传递核心信息，达到视觉高潮
Resolve (70-90秒) → 给出圆满结论与行动号召

Audio Design Layers

音频设计层级

Professional motion graphics use layered audio:

Background Music — Sets mood and energy (40-60% volume)
Sound Effects — Emphasizes actions and transitions (60-80% volume)
Ambient Texture — Subtle background presence (20-30% volume)
Voiceover/Dialog — If applicable (80-100% volume)

专业动态图形采用分层音频设计：

背景音乐 —— 奠定氛围与能量（音量40-60%）
音效 —— 强化动作与转场（音量60-80%）
环境音 —— 微妙的背景氛围（音量20-30%）
旁白/对话 —— 如有需求（音量80-100%）

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

动态图形的时间把控遵循自然节奏：

24-30 FPS —— 标准视频帧率
2帧原则 —— 元素可被感知的最短时长
0.3秒（9帧） —— 舒适阅读的最短时长
0.5秒（15帧） —— UI微交互的黄金时长
1-2秒 —— 舒适的转场时长
3-5秒 —— 复杂信息场景的适宜时长
8-12秒 —— 无变化时的最大注意力时长

Video Specification Format

视频规格文档格式

When creating a video spec, use this structure:

创建视频规格时，请遵循以下结构：

1. Overview

1. 概述

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

标题 —— 清晰、具描述性的名称
时长 —— 总长度（秒）
尺寸 —— 宽×高（通常为1920x1080）
帧率 —— 30 fps（标准）
风格 —— 视觉美学描述
氛围 —— 情感基调

2. Audio Strategy

2. 音频策略

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

3. 镜头拆解

For each scene, specify:

markdown

undefined

针对每个镜头，需明确：

markdown

undefined

Scene N: [Name] (Xs - Ys, Duration: Zs)

镜头N: [名称]（X秒 - Y秒，时长：Z秒）

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]

undefined

视觉描述: [所有元素的详细描述，包括位置、颜色、尺寸、字体]

动画细节:

元素1: [入场/表现] 从X秒到Y秒
元素2: [移动/变形] 从X秒到Y秒
元素3: [退场/转场] 从X秒到Y秒

时间轴:

第0-30帧: [发生的动作]
第30-60帧: [发生的动作]
第60-90帧: [发生的动作]

音频:

背景音乐: [音量级别、氛围]
X秒处音效: [音效描述]
Y秒处音效: [音效描述]

转场: [本镜头与下一镜头的衔接方式]

聚焦点: [观众应关注的核心内容]

undefined

4. Technical Specifications

4. 技术规格

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

包含Remotion专属指导：

合成尺寸与帧率
调色板（十六进制代码）
字体（字体类型、大小、字重）
动画类型（spring、interpolate、easing）
不同效果的弹簧配置
资产需求（图片、图标等）

Integration with Remotion Best Practices

与Remotion最佳实践的集成

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.

本技能生成的规格文档可直接映射到Remotion的实现流程：

镜头描述 → Remotion
```
<Sequence>
```
组件
时间轴细节 → 基于
```
useCurrentFrame()
```
的帧动画
动画细节 →
```
spring()
```
与
```
interpolate()
```
配置
音频布局 → 带时间控制的
```
<Audio>
```
组件
转场 → 来自remotion-best-practices的转场模式

使用本技能创建规格文档后，可通过

/remotion-best-practices

进行实现。

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

类型	时长	结构	核心要素
Micro-interaction	1-3秒	单一动作	快速、利落、反馈清晰
Explainer intro	5-10秒	钩子 + 预告	醒目文字、简洁概念
Product demo	15-30秒	问题 → 解决方案	直观展示，而非口头说明
Feature showcase	30-60秒	铺垫 → 高潮 → 行动号召	多镜头、转场丰富
Brand story	60-120秒	弧线结构	情感化叙事
Tutorial	2-5分钟	分步讲解	清晰递进、适时停顿

Sound Effect Categories

音效分类

UI/Interaction

UI/交互类

Whoosh — Transitions, reveals
Pop — Buttons, checkmarks, success
Click — Selections, interactions
Swoosh — Fast movements, swipes

Whoosh —— 转场、元素露出
Pop —— 按钮、勾选、成功反馈
Click —— 选择、交互操作
Swoosh —— 快速移动、滑动

Emphasis

强调类

Impact — Important moments, reveals
Boom — Big reveals, launches
Ding — Achievements, completions
Chime — Notifications, alerts

Impact —— 重要时刻、元素露出
Boom —— 重磅揭晓、产品发布
Ding —— 成就达成、完成提示
Chime —— 通知、警报

Ambient

环境类

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

Hum —— 科技感背景音
Texture —— 微妙氛围音
Riser —— 营造期待感
Reverb tail —— 空间感、戏剧化效果

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

质量检查清单

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)

动作应尽可能与音乐节拍同步
遵循时间轴三分法：1/3铺垫、1/3动作、1/3收尾
变化时间节奏以打造韵律感（避免机械重复）

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

利用对比引导注意力（颜色、尺寸、动效）
调色板限制在3-5种颜色以保持统一
字体层级：标题 → 副标题 → 正文
留白是设计元素，而非空白区域

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

播放音效时压低背景音乐（-6dB至-12dB）
叠加2-3种音效以打造丰富饱满的听觉效果
战略性使用沉默以强化冲击感
背景音乐采用淡入淡出，避免硬切

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)

Spring动画更具自然感（阻尼值200为平滑，20为弹跳感）
机械UI元素使用缓动效果
动画分组：按5-10帧错开以提升流畅度
退场动画应快于入场动画（3:2比例）

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

如需特定领域的详细指导，请参考：

rules/scene-composition.md —— 视觉层级与镜头布局
rules/timing-pacing.md —— 帧时间与节奏把控
rules/audio-design.md —— 音乐与音频策略
rules/sound-effects.md —— 音效选择与布局
rules/transitions.md —— 镜头转场与流畅性
rules/visual-hierarchy.md —— 注意力引导
rules/storytelling-flow.md —— 叙事结构
rules/camera-movement.md —— 虚拟镜头技巧