motion-scale

Name: motion-scale
Author: dylantarre

33stars3forks

How to install motion-scale?

dylantarre/design-system-skills/motion-scale

$npx -y skills add dylantarre/design-system-skills --skill motion-scale

Installs into the current project.

Summary

Generates animation duration, easing curves, and delay tokens with prefers-reduced-motion support. Use when creating transition timing, animation speed, or motion systems. Outputs CSS, Tailwind, or JSON.

Files · 1

View on GitHub

SKILL.md

1	# Motion Scale Generator
2
3	## Overview
4
5	Generate consistent animation and transition tokens for duration, easing, and delay. Creates a motion system that feels cohesive and respects user preferences for reduced motion.
6
7	## When to Use
8
9	- Setting up animation tokens for a new project
10	- Standardizing transition timing across components
11	- Replacing hardcoded animation values
12	- Implementing reduced motion support
13	- Building micro-interaction patterns
14
15	## Quick Reference: Duration Scale
16
17	\| Token \| Value \| Use Case \|
18	\|-------\|-------\|----------\|
19	\| `instant` \| 0ms \| Immediate, no animation \|
20	\| `fastest` \| 50ms \| Micro-feedback (ripples, highlights) \|
21	\| `fast` \| 100ms \| Hover, focus, small changes \|
22	\| `normal` \| 200ms \| Most transitions, toggles \|
23	\| `slow` \| 300ms \| Modals, drawers, reveals \|
24	\| `slower` \| 400ms \| Page transitions, complex sequences \|
25	\| `slowest` \| 500ms \| Elaborate animations, onboarding \|
26
27	## Quick Reference: Easing Curves
28
29	\| Token \| Curve \| Use Case \|
30	\|-------\|-------\|----------\|
31	\| `linear` \| `linear` \| Progress bars, looping \|
32	\| `ease-in` \| `cubic-bezier(0.4, 0, 1, 1)` \| Exit animations \|
33	\| `ease-out` \| `cubic-bezier(0, 0, 0.2, 1)` \| Enter animations (most common) \|
34	\| `ease-in-out` \| `cubic-bezier(0.4, 0, 0.2, 1)` \| Move, resize, continuous \|
35	\| `ease-bounce` \| `cubic-bezier(0.34, 1.56, 0.64, 1)` \| Playful, attention \|
36	\| `ease-elastic` \| `cubic-bezier(0.68, -0.55, 0.27, 1.55)` \| Springy, overshoot \|
37
38	## The Process
39
40	1. Choose duration scale: How many steps? (5-7 typical)
41	2. Define base duration: 200ms is standard baseline
42	3. Select ratio: How durations scale (1.5x or 2x)
43	4. Pick easing curves: Standard set + any special curves
44	5. Create semantic aliases: Map to component behaviors
45	6. Add reduced motion: Respect user preferences
46	7. Choose format: CSS, Tailwind, or JSON
47
48	## Output Formats
49
50	CSS Custom Properties:
51	```css
52	:root {
53	/* ===== Durations ===== */
54	--duration-0: 0ms;
55	--duration-50: 50ms;
56	--duration-100: 100ms;
57	--duration-150: 150ms;
58	--duration-200: 200ms;
59	--duration-300: 300ms;
60	--duration-400: 400ms;
61	--duration-500: 500ms;
62	--duration-700: 700ms;
63	--duration-1000: 1000ms;
64
65	/* Named aliases */
66	--duration-instant: var(--duration-0);
67	--duration-fastest: var(--duration-50);
68	--duration-fast: var(--duration-100);
69	--duration-normal: var(--duration-200);
70	--duration-slow: var(--duration-300);
71	--duration-slower: var(--duration-500);
72	--duration-slowest: var(--duration-700);
73
74	/* ===== Easings ===== */
75	--ease-linear: linear;
76	--ease-in: cubic-bezier(0.4, 0, 1, 1);
77	--ease-out: cubic-bezier(0, 0, 0.2, 1);
78	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
79
80	/* Expressive easings */
81	--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
82	--ease-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55);
83	--ease-snap: cubic-bezier(0.2, 0, 0, 1);
84
85	/* Deceleration/Acceleration (Material Design style) */
86	--ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
87	--ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
88	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
89
90	/* ===== Delays ===== */
91	--delay-none: 0ms;
92	--delay-short: 50ms;
93	--delay-medium: 100ms;
94	--delay-long: 200ms;
95
96	/* Stagger delays for sequential animations */
97	--delay-stagger-1: 0ms;
98	--delay-stagger-2: 50ms;
99	--delay-stagger-3: 100ms;
100	--delay-stagger-4: 150ms;
101	--delay-stagger-5: 200ms;
102
103	/* ===== Semantic Transitions ===== */
104	--transition-colors: color, background-color, border-color, fill, stroke;
105	--transition-opacity: opacity;
106	--transition-transform: transform;
107	--transition-shadow: box-shadow;
108	--transition-all: all;
109
110	/* Component transitions */
111	--transition-hover: var(--duration-fast) var(--ease-out);
112	--transition-focus: var(--duration-fast) var(--ease-out);
113	--transition-active: var(--duration-fastest) var(--ease-out);
114	--transition-enter: var(--duration-normal) var(--ease-out);
115	--transition-exit: var(--duration-fast) var(--ease-in);
116	--transition-move: var(--duration-normal) var(--ease-in-out);
117	--transition-expand: var(--duration-slow) var(--ease-out);
118	--transition-collapse: var(--duration-normal) var(--ease-in);
119	}
120
121	/* ===== Reduced Motion ===== */
122	@media (prefers-reduced-motion: reduce) {
123	:root {
124	--duration-50: 0ms;
125	--duration-100: 0ms;
126	--duration-150: 0ms;
127	--duration-200: 0ms;
128	--duration-300: 0ms;
129	--duration-400: 0ms;
130	--duration-500: 0ms;
131	--duration-700: 0ms;
132	--duration-1000: 0ms;
133	}
134	}
135
136	/* Alternative: Keep minimal motion */
137	@media (prefers-reduced-motion: reduce) {
138	:root {
139	--duration-fastest: 0ms;
140	--duration-fast: 0ms;
141	--duration-normal: 50ms; /* Minimal feedback */
142	--duration-slow: 50ms;
143	--duration-slower: 100ms;
144	--duration-slowest: 100ms;
145
146	/* Dis

People who liked this also viewed

6 picks

Type

motion-scale

33stars3forks

View on GitHub

How to install motion-scale?

dylantarre/design-system-skills/motion-scale

$npx -y skills add dylantarre/design-system-skills --skill motion-scale

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Motion Scale Generator
2
3	## Overview
4
5	Generate consistent animation and transition tokens for duration, easing, and delay. Creates a motion system that feels cohesive and respects user preferences for reduced motion.
6
7	## When to Use
8
9	- Setting up animation tokens for a new project
10	- Standardizing transition timing across components
11	- Replacing hardcoded animation values
12	- Implementing reduced motion support
13	- Building micro-interaction patterns
14
15	## Quick Reference: Duration Scale
16
17	\| Token \| Value \| Use Case \|
18	\|-------\|-------\|----------\|
19	\| `instant` \| 0ms \| Immediate, no animation \|
20	\| `fastest` \| 50ms \| Micro-feedback (ripples, highlights) \|
21	\| `fast` \| 100ms \| Hover, focus, small changes \|
22	\| `normal` \| 200ms \| Most transitions, toggles \|
23	\| `slow` \| 300ms \| Modals, drawers, reveals \|
24	\| `slower` \| 400ms \| Page transitions, complex sequences \|
25	\| `slowest` \| 500ms \| Elaborate animations, onboarding \|
26
27	## Quick Reference: Easing Curves
28
29	\| Token \| Curve \| Use Case \|
30	\|-------\|-------\|----------\|
31	\| `linear` \| `linear` \| Progress bars, looping \|
32	\| `ease-in` \| `cubic-bezier(0.4, 0, 1, 1)` \| Exit animations \|
33	\| `ease-out` \| `cubic-bezier(0, 0, 0.2, 1)` \| Enter animations (most common) \|
34	\| `ease-in-out` \| `cubic-bezier(0.4, 0, 0.2, 1)` \| Move, resize, continuous \|
35	\| `ease-bounce` \| `cubic-bezier(0.34, 1.56, 0.64, 1)` \| Playful, attention \|
36	\| `ease-elastic` \| `cubic-bezier(0.68, -0.55, 0.27, 1.55)` \| Springy, overshoot \|
37
38	## The Process
39
40	1. Choose duration scale: How many steps? (5-7 typical)
41	2. Define base duration: 200ms is standard baseline
42	3. Select ratio: How durations scale (1.5x or 2x)
43	4. Pick easing curves: Standard set + any special curves
44	5. Create semantic aliases: Map to component behaviors
45	6. Add reduced motion: Respect user preferences
46	7. Choose format: CSS, Tailwind, or JSON
47
48	## Output Formats
49
50	CSS Custom Properties:
51	```css
52	:root {
53	/* ===== Durations ===== */
54	--duration-0: 0ms;
55	--duration-50: 50ms;
56	--duration-100: 100ms;
57	--duration-150: 150ms;
58	--duration-200: 200ms;
59	--duration-300: 300ms;
60	--duration-400: 400ms;
61	--duration-500: 500ms;
62	--duration-700: 700ms;
63	--duration-1000: 1000ms;
64
65	/* Named aliases */
66	--duration-instant: var(--duration-0);
67	--duration-fastest: var(--duration-50);
68	--duration-fast: var(--duration-100);
69	--duration-normal: var(--duration-200);
70	--duration-slow: var(--duration-300);
71	--duration-slower: var(--duration-500);
72	--duration-slowest: var(--duration-700);
73
74	/* ===== Easings ===== */
75	--ease-linear: linear;
76	--ease-in: cubic-bezier(0.4, 0, 1, 1);
77	--ease-out: cubic-bezier(0, 0, 0.2, 1);
78	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
79
80	/* Expressive easings */
81	--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
82	--ease-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55);
83	--ease-snap: cubic-bezier(0.2, 0, 0, 1);
84
85	/* Deceleration/Acceleration (Material Design style) */
86	--ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
87	--ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
88	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
89
90	/* ===== Delays ===== */
91	--delay-none: 0ms;
92	--delay-short: 50ms;
93	--delay-medium: 100ms;
94	--delay-long: 200ms;
95
96	/* Stagger delays for sequential animations */
97	--delay-stagger-1: 0ms;
98	--delay-stagger-2: 50ms;
99	--delay-stagger-3: 100ms;
100	--delay-stagger-4: 150ms;
101	--delay-stagger-5: 200ms;
102
103	/* ===== Semantic Transitions ===== */
104	--transition-colors: color, background-color, border-color, fill, stroke;
105	--transition-opacity: opacity;
106	--transition-transform: transform;
107	--transition-shadow: box-shadow;
108	--transition-all: all;
109
110	/* Component transitions */
111	--transition-hover: var(--duration-fast) var(--ease-out);
112	--transition-focus: var(--duration-fast) var(--ease-out);
113	--transition-active: var(--duration-fastest) var(--ease-out);
114	--transition-enter: var(--duration-normal) var(--ease-out);
115	--transition-exit: var(--duration-fast) var(--ease-in);
116	--transition-move: var(--duration-normal) var(--ease-in-out);
117	--transition-expand: var(--duration-slow) var(--ease-out);
118	--transition-collapse: var(--duration-normal) var(--ease-in);
119	}
120
121	/* ===== Reduced Motion ===== */
122	@media (prefers-reduced-motion: reduce) {
123	:root {
124	--duration-50: 0ms;
125	--duration-100: 0ms;
126	--duration-150: 0ms;
127	--duration-200: 0ms;
128	--duration-300: 0ms;
129	--duration-400: 0ms;
130	--duration-500: 0ms;
131	--duration-700: 0ms;
132	--duration-1000: 0ms;
133	}
134	}
135
136	/* Alternative: Keep minimal motion */
137	@media (prefers-reduced-motion: reduce) {
138	:root {
139	--duration-fastest: 0ms;
140	--duration-fast: 0ms;
141	--duration-normal: 50ms; /* Minimal feedback */
142	--duration-slow: 50ms;
143	--duration-slower: 100ms;
144	--duration-slowest: 100ms;
145
146	/* Dis

People who liked this also viewed

6 picks

Type