motion-design

Name: motion-design
Author: LottieFiles

717stars44forks

How to install motion-design?

lottiefiles/motion-design-skill/motion-design

$npx -y skills add LottieFiles/motion-design-skill --skill motion-design

Installs into the current project.

Summary

Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page

Files · 1

View on GitHub

SKILL.md

1	# Motion Design Skill
2
3	## When to Apply
4
5	Use this skill when:
6	- Creating UI animations (buttons, cards, modals, page transitions)
7	- Designing micro-interactions and feedback animations
8	- Building loading, success, or error states
9	- Animating illustrations or decorative elements
10	- Planning scroll-triggered or progress-based animations
11	- Establishing brand motion identity
12	- Choreographing multi-element sequences
13
14	Decision tree:
15	1. Does it serve a functional purpose (feedback, guidance)? → Timing rules for responsiveness
16	2. Does it express brand personality? → Motion Personality archetypes
17	3. Does it tell a story or guide attention? → Disney principles + choreography
18	4. Is this a complex multi-element scene? → 1/3 Rule + stagger patterns
19
20	---
21
22	## Quick Reference: 8-Step Checklist
23
24	Before creating any animation:
25
26	1. Emotional target? — joy, calm, urgency, elegance
27	2. Motion Personality? — Playful, Premium, Corporate, Energetic
28	3. Primary property? — position, scale, rotation, opacity
29	4. Duration? — see duration table below
30	5. Easing family? — entrance=decelerate, exit=accelerate
31	6. Hero element? — apply staging principles
32	7. Secondary + ambient layers? — add richness
33	8. 1/3 rules? — motion distance, simultaneous elements
34
35	---
36
37	## Three Pillars (CRITICAL)
38
39	Every animation must satisfy three pillars before any technical decisions:
40
41	\| Pillar \| Question \| Drives \|
42	\|--------\|----------\|--------\|
43	\| Emotional Intent \| What should the viewer FEEL? \| Easing, timing, amplitude \|
44	\| Visual Narrative \| What's the micro-story? \| Setup → Action → Resolution \|
45	\| Motion Craft \| How do we make it believable? \| Physics, secondary motion, paths \|
46
47	Three motion layers (flat animation = missing layers):
48	- Primary: Main action the viewer follows
49	- Secondary: Supporting richness (shadows, icons shifting)
50	- Ambient: Background life (gradients, subtle pulses)
51
52	> Deep dive: [director/core-philosophy.md](director/core-philosophy.md)
53
54	---
55
56	## Motion Personality
57
58	Select ONE archetype per project. Apply consistently.
59
60	\| Archetype \| Duration \| Easing \| Overshoot \| Keywords \|
61	\|-----------\|----------\|--------\|-----------\|----------\|
62	\| Playful \| 150-300ms \| ease-out-back \| 10-20% \| fun, whimsical, bouncy, cute \|
63	\| Premium \| 350-600ms \| cubic-bezier(0.4,0,0.2,1) \| 0% \| elegant, minimal, luxury, sophisticated \|
64	\| Corporate \| 200-400ms \| cubic-bezier(0.2,0,0,1) \| 0-3% \| clean, professional, business, dashboard \|
65	\| Energetic \| 100-250ms \| ease-out-expo \| 15-30% \| dynamic, energetic, bold, exciting \|
66
67	Default: Corporate for UI, Playful for illustrations.
68
69	Brand Motion Identity — define three constants:
70	1. Signature easing: One curve for 80% of animations
71	2. Duration palette: 3 durations (quick / standard / slow)
72	3. Entrance pattern: One consistent entry style
73
74	> Deep dive: [director/motion-personality.md](director/motion-personality.md)
75
76	---
77
78	## Property Selection
79
80	\| Effect Goal \| Primary Property \| Secondary Properties \|
81	\|-------------\|------------------\|---------------------\|
82	\| Entrance/Exit \| position \| opacity, scale \|
83	\| Emphasis/Attention \| scale \| rotation (subtle), opacity pulse \|
84	\| State Change \| opacity, color \| scale (press feedback) \|
85	\| Direction/Flow \| position \| rotation (follow path) \|
86	\| Depth/3D Feel \| scale + shadow \| position (parallax) \|
87	\| Loading/Progress \| rotation (spinner) \| scale, opacity pulse \|
88	\| Success \| scale (pop) \| color, rotation (checkmark draw) \|
89	\| Error/Alert \| position (shake) \| color, rotation (wobble) \|
90
91	Simplicity threshold: Use the minimum properties needed. One = direct. Two = polished. Three+ = potentially overwhelming.
92
93	> Deep dive: [reference/property-selection.md](reference/property-selection.md)
94
95	---
96
97	## Duration Table
98
99	\| Element Type \| Duration \| Rationale \|
100	\|-------------\|----------\|-----------\|
101	\| Tooltip / micro-feedback \| 80-120ms \| Must feel instant \|
102	\| Button press / toggle \| 120-180ms \| Responsive feedback \|
103	\| Icon transition \| 150-250ms \| Clear state change \|
104	\| Card enter / exit \| 200-350ms \| Spatial awareness \|
105	\| Modal / dialog \| 300-400ms \| Focus shift \|
106	\| Page transition \| 400-600ms \| Context switch \|
107	\| Dramatic reveal \| 600-1200ms \| Theatrical build \|
108
109	Distance scales duration: 100px = base. 200px = 1.3x. 400px = 1.6x.
110
111	Enter > Exit: Entrances 30-50% longer than exits. Users care about what appears.
112
113	Interactive feedback:
114	- Hover: <100ms
115	- Press: <150ms
116	-

People who liked this also viewed

6 picks

Type

motion-design

717stars44forks

View on GitHub

How to install motion-design?

lottiefiles/motion-design-skill/motion-design

$npx -y skills add LottieFiles/motion-design-skill --skill motion-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Motion Design Skill
2
3	## When to Apply
4
5	Use this skill when:
6	- Creating UI animations (buttons, cards, modals, page transitions)
7	- Designing micro-interactions and feedback animations
8	- Building loading, success, or error states
9	- Animating illustrations or decorative elements
10	- Planning scroll-triggered or progress-based animations
11	- Establishing brand motion identity
12	- Choreographing multi-element sequences
13
14	Decision tree:
15	1. Does it serve a functional purpose (feedback, guidance)? → Timing rules for responsiveness
16	2. Does it express brand personality? → Motion Personality archetypes
17	3. Does it tell a story or guide attention? → Disney principles + choreography
18	4. Is this a complex multi-element scene? → 1/3 Rule + stagger patterns
19
20	---
21
22	## Quick Reference: 8-Step Checklist
23
24	Before creating any animation:
25
26	1. Emotional target? — joy, calm, urgency, elegance
27	2. Motion Personality? — Playful, Premium, Corporate, Energetic
28	3. Primary property? — position, scale, rotation, opacity
29	4. Duration? — see duration table below
30	5. Easing family? — entrance=decelerate, exit=accelerate
31	6. Hero element? — apply staging principles
32	7. Secondary + ambient layers? — add richness
33	8. 1/3 rules? — motion distance, simultaneous elements
34
35	---
36
37	## Three Pillars (CRITICAL)
38
39	Every animation must satisfy three pillars before any technical decisions:
40
41	\| Pillar \| Question \| Drives \|
42	\|--------\|----------\|--------\|
43	\| Emotional Intent \| What should the viewer FEEL? \| Easing, timing, amplitude \|
44	\| Visual Narrative \| What's the micro-story? \| Setup → Action → Resolution \|
45	\| Motion Craft \| How do we make it believable? \| Physics, secondary motion, paths \|
46
47	Three motion layers (flat animation = missing layers):
48	- Primary: Main action the viewer follows
49	- Secondary: Supporting richness (shadows, icons shifting)
50	- Ambient: Background life (gradients, subtle pulses)
51
52	> Deep dive: [director/core-philosophy.md](director/core-philosophy.md)
53
54	---
55
56	## Motion Personality
57
58	Select ONE archetype per project. Apply consistently.
59
60	\| Archetype \| Duration \| Easing \| Overshoot \| Keywords \|
61	\|-----------\|----------\|--------\|-----------\|----------\|
62	\| Playful \| 150-300ms \| ease-out-back \| 10-20% \| fun, whimsical, bouncy, cute \|
63	\| Premium \| 350-600ms \| cubic-bezier(0.4,0,0.2,1) \| 0% \| elegant, minimal, luxury, sophisticated \|
64	\| Corporate \| 200-400ms \| cubic-bezier(0.2,0,0,1) \| 0-3% \| clean, professional, business, dashboard \|
65	\| Energetic \| 100-250ms \| ease-out-expo \| 15-30% \| dynamic, energetic, bold, exciting \|
66
67	Default: Corporate for UI, Playful for illustrations.
68
69	Brand Motion Identity — define three constants:
70	1. Signature easing: One curve for 80% of animations
71	2. Duration palette: 3 durations (quick / standard / slow)
72	3. Entrance pattern: One consistent entry style
73
74	> Deep dive: [director/motion-personality.md](director/motion-personality.md)
75
76	---
77
78	## Property Selection
79
80	\| Effect Goal \| Primary Property \| Secondary Properties \|
81	\|-------------\|------------------\|---------------------\|
82	\| Entrance/Exit \| position \| opacity, scale \|
83	\| Emphasis/Attention \| scale \| rotation (subtle), opacity pulse \|
84	\| State Change \| opacity, color \| scale (press feedback) \|
85	\| Direction/Flow \| position \| rotation (follow path) \|
86	\| Depth/3D Feel \| scale + shadow \| position (parallax) \|
87	\| Loading/Progress \| rotation (spinner) \| scale, opacity pulse \|
88	\| Success \| scale (pop) \| color, rotation (checkmark draw) \|
89	\| Error/Alert \| position (shake) \| color, rotation (wobble) \|
90
91	Simplicity threshold: Use the minimum properties needed. One = direct. Two = polished. Three+ = potentially overwhelming.
92
93	> Deep dive: [reference/property-selection.md](reference/property-selection.md)
94
95	---
96
97	## Duration Table
98
99	\| Element Type \| Duration \| Rationale \|
100	\|-------------\|----------\|-----------\|
101	\| Tooltip / micro-feedback \| 80-120ms \| Must feel instant \|
102	\| Button press / toggle \| 120-180ms \| Responsive feedback \|
103	\| Icon transition \| 150-250ms \| Clear state change \|
104	\| Card enter / exit \| 200-350ms \| Spatial awareness \|
105	\| Modal / dialog \| 300-400ms \| Focus shift \|
106	\| Page transition \| 400-600ms \| Context switch \|
107	\| Dramatic reveal \| 600-1200ms \| Theatrical build \|
108
109	Distance scales duration: 100px = base. 200px = 1.3x. 400px = 1.6x.
110
111	Enter > Exit: Entrances 30-50% longer than exits. Users care about what appears.
112
113	Interactive feedback:
114	- Hover: <100ms
115	- Press: <150ms
116	-

People who liked this also viewed

6 picks

Type