{"id":"373b413b-64ea-454e-af07-8ca7c7e1a10b","shortId":"naMG9b","kind":"skill","title":"motion-design","tagline":"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 ","description":"# Motion Design Skill\n\n## When to Apply\n\nUse this skill when:\n- Creating UI animations (buttons, cards, modals, page transitions)\n- Designing micro-interactions and feedback animations\n- Building loading, success, or error states\n- Animating illustrations or decorative elements\n- Planning scroll-triggered or progress-based animations\n- Establishing brand motion identity\n- Choreographing multi-element sequences\n\n**Decision tree:**\n1. Does it serve a functional purpose (feedback, guidance)? → Timing rules for responsiveness\n2. Does it express brand personality? → Motion Personality archetypes\n3. Does it tell a story or guide attention? → Disney principles + choreography\n4. Is this a complex multi-element scene? → 1/3 Rule + stagger patterns\n\n---\n\n## Quick Reference: 8-Step Checklist\n\nBefore creating any animation:\n\n1. **Emotional target?** — joy, calm, urgency, elegance\n2. **Motion Personality?** — Playful, Premium, Corporate, Energetic\n3. **Primary property?** — position, scale, rotation, opacity\n4. **Duration?** — see duration table below\n5. **Easing family?** — entrance=decelerate, exit=accelerate\n6. **Hero element?** — apply staging principles\n7. **Secondary + ambient layers?** — add richness\n8. **1/3 rules?** — motion distance, simultaneous elements\n\n---\n\n## Three Pillars (CRITICAL)\n\nEvery animation must satisfy three pillars before any technical decisions:\n\n| Pillar | Question | Drives |\n|--------|----------|--------|\n| **Emotional Intent** | What should the viewer FEEL? | Easing, timing, amplitude |\n| **Visual Narrative** | What's the micro-story? | Setup → Action → Resolution |\n| **Motion Craft** | How do we make it believable? | Physics, secondary motion, paths |\n\n**Three motion layers** (flat animation = missing layers):\n- **Primary**: Main action the viewer follows\n- **Secondary**: Supporting richness (shadows, icons shifting)\n- **Ambient**: Background life (gradients, subtle pulses)\n\n> Deep dive: [director/core-philosophy.md](director/core-philosophy.md)\n\n---\n\n## Motion Personality\n\nSelect ONE archetype per project. Apply consistently.\n\n| Archetype | Duration | Easing | Overshoot | Keywords |\n|-----------|----------|--------|-----------|----------|\n| **Playful** | 150-300ms | ease-out-back | 10-20% | fun, whimsical, bouncy, cute |\n| **Premium** | 350-600ms | cubic-bezier(0.4,0,0.2,1) | 0% | elegant, minimal, luxury, sophisticated |\n| **Corporate** | 200-400ms | cubic-bezier(0.2,0,0,1) | 0-3% | clean, professional, business, dashboard |\n| **Energetic** | 100-250ms | ease-out-expo | 15-30% | dynamic, energetic, bold, exciting |\n\n**Default**: Corporate for UI, Playful for illustrations.\n\n**Brand Motion Identity** — define three constants:\n1. **Signature easing**: One curve for 80% of animations\n2. **Duration palette**: 3 durations (quick / standard / slow)\n3. **Entrance pattern**: One consistent entry style\n\n> Deep dive: [director/motion-personality.md](director/motion-personality.md)\n\n---\n\n## Property Selection\n\n| Effect Goal | Primary Property | Secondary Properties |\n|-------------|------------------|---------------------|\n| Entrance/Exit | position | opacity, scale |\n| Emphasis/Attention | scale | rotation (subtle), opacity pulse |\n| State Change | opacity, color | scale (press feedback) |\n| Direction/Flow | position | rotation (follow path) |\n| Depth/3D Feel | scale + shadow | position (parallax) |\n| Loading/Progress | rotation (spinner) | scale, opacity pulse |\n| Success | scale (pop) | color, rotation (checkmark draw) |\n| Error/Alert | position (shake) | color, rotation (wobble) |\n\n**Simplicity threshold**: Use the minimum properties needed. One = direct. Two = polished. Three+ = potentially overwhelming.\n\n> Deep dive: [reference/property-selection.md](reference/property-selection.md)\n\n---\n\n## Duration Table\n\n| Element Type | Duration | Rationale |\n|-------------|----------|-----------|\n| Tooltip / micro-feedback | 80-120ms | Must feel instant |\n| Button press / toggle | 120-180ms | Responsive feedback |\n| Icon transition | 150-250ms | Clear state change |\n| Card enter / exit | 200-350ms | Spatial awareness |\n| Modal / dialog | 300-400ms | Focus shift |\n| Page transition | 400-600ms | Context switch |\n| Dramatic reveal | 600-1200ms | Theatrical build |\n\n**Distance scales duration**: 100px = base. 200px = 1.3x. 400px = 1.6x.\n\n**Enter > Exit**: Entrances 30-50% longer than exits. Users care about what appears.\n\n**Interactive feedback**:\n- Hover: <100ms\n- Press: <150ms\n- Release/settle: 200-300ms\n- Error shake: 300-400ms (2-3 oscillations)\n\n> Deep dive: [reference/timing-easing-tables.md](reference/timing-easing-tables.md)\n\n---\n\n## Easing Selection\n\n**Directional rules**:\n- **Entrance** → decelerate (fast start, gentle landing): ease-out family\n- **Exit** → accelerate (gentle start, fast departure): ease-in family\n- **On-screen** → smooth both ends: ease-in-out family\n- **Looping ambient** → seamless: sine-based ease-in-out\n\n**Industry standards**:\n\n| Standard | Cubic Bezier | Use For |\n|----------|-------------|---------|\n| Material Design 3 | (0.2, 0, 0, 1) | Default on-screen |\n| MD3 Emphasized | (0.05, 0.7, 0.1, 1) | Entrances, attention |\n| MD3 Accelerate | (0.3, 0, 1, 1) | Exits, dismissals |\n| Apple HIG | (0.25, 0.1, 0.25, 1) | Standard iOS |\n| Snappy UI | (0.2, 0, 0, 1) | Fast, decisive |\n| Gentle float | (0.4, 0, 0.2, 1) | Ambient, background |\n| Bounce settle | (0.175, 0.885, 0.32, 1.275) | Overshoot, playful |\n\n**Material-based easing**:\n\n| Material | Duration Scale | Overshoot |\n|----------|---------------|-----------|\n| Rigid (metal, stone) | 1.2x | 0% |\n| Elastic (rubber, gel) | 0.8x | 15-25% |\n| Fluid (water, paint) | 1.5x | 5% |\n| Paper (cards, sheets) | 1.0x | 3-5% |\n| Gas (smoke, fog) | 2.0x | 0% |\n| Glass (brittle) | 0.9x | 0% |\n\n> Deep dive: [reference/timing-easing-tables.md](reference/timing-easing-tables.md)\n\n---\n\n## Common Patterns\n\n### Button Press (Playful)\n1. **Anticipation**: Scale to 0.97 (50ms, ease-out)\n2. **Squash**: Scale to [1.04, 0.96] (100ms, ease-in)\n3. **Follow through**: Overshoots to 1.02, settles to 1.0 (spring, 200ms)\n4. **Secondary**: Shadow shrinks during press, icon shifts down 2px\n5. **Total**: ~150ms press + 200ms settle\n\n### Card Entrance (Premium)\n1. **Start**: 20px below target, opacity 0\n2. **Path**: Slight curve (10px X offset at midpoint)\n3. **Easing**: ease-out-cubic deceleration\n4. **Follow through**: Shadow arrives 50ms after card\n5. **Secondary**: Content fades in 100ms after card lands\n6. **Staging**: Other cards dim to 80%\n\n### Success State (Playful)\n1. **Primary**: Scale pop with ease-out-back\n2. **Secondary**: Checkmark draws in\n3. **Ambient**: Subtle particle burst\n4. **Color**: Green fill\n5. **Total**: 300-400ms\n\n### Error Shake (Corporate)\n1. **Primary**: Position oscillates 2-3 times, ±10-15px horizontal\n2. **Easing**: ease-in-out for sharp stops\n3. **Color**: Red tint\n4. **Total**: 300-400ms\n5. **No overshoot**: Errors feel firm\n\n> More patterns: [patterns/entrance-exit.md](patterns/entrance-exit.md) | [patterns/state-feedback.md](patterns/state-feedback.md)\n\n---\n\n## Choreography Essentials\n\n**Coordinated entry**:\n- Lead with the hero — primary element enters first or most prominently\n- Spatial consistency — all elements enter from same direction\n- Counter-motion — hero moves right → ambient moves left at 20-30% speed\n\n**1/3 Rule (distance)**: No motion travels more than 1/3 of screen without a keyframe change.\n\n**1/3 Rule (elements)**: With 3+ elements, no more than 1/3 in active motion simultaneously.\n\n**Stagger budgets**:\n\n| Pattern | Delay | Total Budget | Use Case |\n|---------|-------|-------------|----------|\n| Micro cascade | 20-40ms | <200ms | List items, grid cells |\n| Standard | 50-100ms | <400ms | Cards, panels, nav |\n| Dramatic | 100-200ms | <600ms | Hero sections |\n| Wave | 30-60ms | <500ms | Data visualizations |\n\n**Critical**: Total stagger must stay under 500ms.\n\n> Deep dive: [director/choreography.md](director/choreography.md)\n\n---\n\n## Emotion-to-Motion Map\n\n| Emotion | Character | Path | Easing | Duration |\n|---------|-----------|------|--------|----------|\n| Joy | Bouncy, arcs | Curved, upward | ease-out-back | 200-400ms |\n| Calm | Smooth, flowing | Gentle curves | sine ease-in-out | 500-1000ms |\n| Urgency | Sharp, fast | Straight lines | ease-out | 100-200ms |\n| Sadness | Slow, downward | Drooping curves | cubic ease-in-out | 600-1200ms |\n| Surprise | Sudden, expanding | Radial outward | ease-out-expo | 150-300ms |\n| Elegance | Slow, controlled | Long arcs | (0.4,0,0.2,1) | 400-700ms |\n| Playfulness | Bouncy, irregular | Arcs, squiggly | ease-out-back | 200-350ms |\n\n**Path as language**: Angular = tense. Curved = friendly. Spiral = whimsical. Diagonal = purposeful. Vertical = growth/weight. Horizontal = progress.\n\n> Deep dive: [director/emotion-mapping.md](director/emotion-mapping.md)\n\n---\n\n## Weight Classification\n\n| Weight | Examples | Duration | Overshoot | Easing |\n|--------|----------|----------|-----------|--------|\n| Heavy | Modals, overlays | 300-500ms | 0% | Gentle, high damping |\n| Medium | Cards, panels | 200-350ms | 3-5% | Moderate |\n| Light | Tooltips, badges, icons | 80-200ms | 5-15% | Responsive |\n\n---\n\n## Quality Rules\n\n### CRITICAL — never break\n1. **Never linear for spatial movement** — always use easing curves (linear only for spinners, progress bars)\n2. **Never opacity-only** for important state changes — combine with position or scale\n3. **Never exceed 1/3 screen** without intermediate keyframe\n4. **Always three motion layers** — primary + secondary + ambient\n\n### HIGH — strongly follow\n1. Match duration to element type (see tables)\n2. Use directional easing (ease-out entrance, ease-in exit)\n3. Apply Disney principles (especially anticipation, follow-through)\n4. Maintain consistent personality across scene\n\n> Full checklist: [reference/quality-checklist.md](reference/quality-checklist.md)\n\n---\n\n## Troubleshooting Quick Reference\n\n| Problem | Likely Cause | Fix |\n|---------|-------------|-----|\n| Looks robotic | Linear easing or no arcs | Add easing curves + arc paths |\n| Feels too slow | Duration too long for element type | Check duration table, use ease-out |\n| Feels cheap/flat | Missing secondary + ambient | Add shadow motion + background life |\n| Too distracting | Too many elements moving | Apply 1/3 rule, reduce amplitude |\n| No personality | Generic easing everywhere | Apply personality archetype consistently |\n\n> Deep dive: [reference/troubleshooting.md](reference/troubleshooting.md)\n\n---\n\n## File Reference\n\n**Philosophy** (director/):\n- [core-philosophy.md](director/core-philosophy.md) — Three Pillars deep dive\n- [decision-framework.md](director/decision-framework.md) — Full decision pipeline\n- [disney-principles.md](director/disney-principles.md) — 12 principles, UI-adapted\n- [motion-personality.md](director/motion-personality.md) — 4 archetypes + brand identity\n- [emotion-mapping.md](director/emotion-mapping.md) — Emotion → motion + color psychology\n- [choreography.md](director/choreography.md) — Multi-element coordination\n- [narrative-structure.md](director/narrative-structure.md) — Micro-story framework\n- [context-adaptation.md](director/context-adaptation.md) — Platform, a11y, performance\n\n**Reference** (reference/):\n- [timing-easing-tables.md](reference/timing-easing-tables.md) — Duration + easing lookups\n- [property-selection.md](reference/property-selection.md) — Property communication guide\n- [troubleshooting.md](reference/troubleshooting.md) — Animation smells + fixes\n- [quality-checklist.md](reference/quality-checklist.md) — Evaluation criteria\n\n**Patterns** (patterns/):\n- [entrance-exit.md](patterns/entrance-exit.md) — Entrance/exit recipes\n- [state-feedback.md](patterns/state-feedback.md) — Success, error, loading, hover\n- [ambient-continuous.md](patterns/ambient-continuous.md) — Looping, breathing, parallax\n- [multi-element.md](patterns/multi-element.md) — Stagger + choreography recipes","tags":["motion","design","skill","lottiefiles","agent-skills","animation","lottie","motion-design"],"capabilities":["skill","source-lottiefiles","skill-motion-design","topic-agent-skills","topic-animation","topic-lottie","topic-motion-design"],"categories":["motion-design-skill"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/LottieFiles/motion-design-skill/motion-design","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add LottieFiles/motion-design-skill","source_repo":"https://github.com/LottieFiles/motion-design-skill","install_from":"skills.sh"}},"qualityScore":"0.497","qualityRationale":"deterministic score 0.50 from registry signals: · indexed on github topic:agent-skills · 94 github stars · SKILL.md body (11,953 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-02T06:55:31.750Z","embedding":null,"createdAt":"2026-04-18T22:14:29.402Z","updatedAt":"2026-05-02T06:55:31.750Z","lastSeenAt":"2026-05-02T06:55:31.750Z","tsv":"'-100':1000 '-1000':1064 '-120':483 '-1200':529,1088 '-15':882,1179 '-180':492 '-20':306 '-200':1008,1075,1176 '-25':710 '-250':346,499 '-3':339,573,879 '-30':353,949 '-300':299,565,1100 '-350':508,1124,1166 '-40':991 '-400':329,515,570,869,901,1051 '-5':723,1169 '-50':548 '-500':1156 '-60':1015 '-600':313,522 '-700':1112 '0':319,322,335,336,338,635,636,653,669,670,677,703,729,734,799,1108,1158 '0.05':644 '0.1':646,661 '0.175':684 '0.2':320,334,634,668,678,1109 '0.25':660,662 '0.3':652 '0.32':686 '0.4':318,676,1107 '0.7':645 '0.8':707 '0.885':685 '0.9':732 '0.96':758 '0.97':748 '1':96,152,321,337,371,637,647,654,655,663,671,679,744,793,843,874,1110,1186,1235 '1.0':720,771 '1.02':768 '1.04':757 '1.2':701 '1.275':687 '1.3':539 '1.5':714 '1.6':542 '1/3':139,199,951,959,966,975,1219,1326 '10':305,881 '100':345,1007,1074 '100ms':560,759,829 '100px':536 '10px':804 '12':1360 '120':491 '15':352,709 '150':298,498,1099 '150ms':562,786 '2':109,159,380,572,753,800,852,878,885,1202,1243 '2.0':727 '20':948,990 '200':328,507,564,1050,1123,1165 '200ms':773,788,993 '200px':538 '20px':795 '2px':783 '3':118,166,383,388,633,722,763,809,857,894,970,1168,1216,1255 '30':547,1014 '300':514,569,868,900,1155 '350':312 '4':130,173,774,816,862,898,1224,1264,1367 '400':521,1111 '400ms':1002 '400px':541 '5':179,716,784,824,866,903,1178 '50':999 '500':1063 '500ms':1017,1026 '50ms':749,821 '6':186,833 '600':528,1087 '600ms':1010 '7':192 '8':145,198 '80':377,482,839,1175 'a11y':1392 'acceler':185,594,651 'across':1268 'action':240,263 'activ':977 'adapt':26,1364 'add':196,1288,1314 'alway':1192,1225 'ambient':194,273,615,680,858,944,1231,1313 'ambient-continuous.md':1427 'amplitud':230,1329 'angular':1129 'anim':15,24,32,52,64,71,84,151,209,258,379,1408 'anticip':745,1260 'appear':556 'appl':658 'appli':4,45,189,290,1256,1325,1335 'arc':1043,1106,1117,1287,1291 'archetyp':117,287,292,1337,1368 'arriv':820 'attent':126,649 'awar':511 'back':304,851,1049,1122 'background':274,681,1317 'badg':1173 'bar':1201 'base':83,537,619,692 'believ':249 'bezier':317,333,628 'bold':356 'bounc':682 'bounci':309,1042,1115 'brand':86,113,365,1369 'break':1185 'breath':1430 'brittl':731 'budget':981,985 'build':65,532 'burst':861 'busi':342 'button':53,488,741 'calm':156,1053 'card':54,504,718,790,823,831,836,1003,1163 'care':553 'cascad':989 'case':987 'caus':1279 'cell':997 'chang':418,503,965,1210 'charact':1037 'cheap/flat':1310 'check':1302 'checklist':147,1271 'checkmark':446,854 'choreograph':89 'choreographi':21,129,915,1435 'choreography.md':1377 'classif':1146 'clean':340 'clear':501 'color':420,444,451,863,895,1375 'combin':1211 'common':739 'communic':1404 'complex':134 'consist':291,392,931,1266,1338 'constant':370 'content':826 'context':524 'context-adaptation.md':1389 'control':1104 'coordin':917,1382 'core-philosophy.md':1347 'corpor':164,327,359,873 'counter':939 'counter-mot':938 'craft':243 'creat':9,31,50,149 'criteria':1414 'critic':207,1020,1183 'cubic':316,332,627,814,1082 'cubic-bezi':315,331 'curv':375,803,1044,1057,1081,1131,1195,1290 'cute':310 'damp':1161 'dashboard':343 'data':1018 'deceler':183,584,815 'decis':94,217,673,1356 'decision-framework.md':1353 'decor':74 'deep':279,395,468,575,735,1027,1141,1339,1351 'default':358,638 'defin':368 'delay':983 'departur':598 'depth/3d':429 'design':3,6,41,58,632 'diagon':1135 'dialog':513 'dim':837 'direct':462,581,937,1245 'direction/flow':424 'director':1346 'director/choreography.md':1029,1030,1378 'director/context-adaptation.md':1390 'director/core-philosophy.md':281,282,1348 'director/decision-framework.md':1354 'director/disney-principles.md':1359 'director/emotion-mapping.md':1143,1144,1372 'director/motion-personality.md':397,398,1366 'director/narrative-structure.md':1384 'dismiss':657 'disney':23,127,1257 'disney-principles.md':1358 'distanc':202,533,953 'distract':1320 'dive':280,396,469,576,736,1028,1142,1340,1352 'downward':1079 'dramat':526,1006 'draw':447,855 'drive':220 'driven':12 'droop':1080 'durat':174,176,293,381,384,472,476,535,695,1040,1149,1237,1296,1303,1398 'dynam':354 'eas':20,180,228,294,302,349,373,579,590,600,610,621,693,751,761,810,812,849,886,888,1039,1047,1060,1072,1084,1096,1120,1151,1194,1246,1248,1252,1284,1289,1307,1333,1399 'ease-in':599,760,1251 'ease-in-out':609,620,887,1059,1083 'ease-out':589,750,1071,1247,1306 'ease-out-back':301,848,1046,1119 'ease-out-cub':811 'ease-out-expo':348,1095 'effect':401 'elast':704 'eleg':158,323,1102 'element':75,92,137,188,204,474,924,933,968,971,1239,1300,1323,1381 'emot':11,153,221,1032,1036,1373 'emotion-mapping.md':1371 'emotion-to-mot':1031 'emotionally-driven':10 'emphas':643 'emphasis/attention':411 'end':608 'energet':165,344,355 'enter':505,544,925,934 'entranc':182,389,546,583,648,791,1250 'entrance-exit.md':1417 'entrance/exit':407,1419 'entri':393,918 'error':69,567,871,906,1424 'error/alert':448 'especi':1259 'essenti':916 'establish':85 'evalu':1413 'everi':208 'everywher':1334 'exampl':1148 'exceed':1218 'excit':357 'exit':184,506,545,551,593,656,1254 'expand':1092 'expo':351,1098 'express':112 'fade':827 'famili':181,592,602,613 'fast':585,597,672,1068 'feedback':63,103,423,481,495,558 'feel':227,430,486,907,1293,1309 'file':1343 'fill':865 'firm':908 'first':926 'fix':1280,1410 'flat':257 'float':675 'flow':1055 'fluid':711 'focus':517 'fog':726 'follow':266,427,764,817,1234,1262 'follow-through':1261 'framework':1388 'friend':1132 'full':1270,1355 'fun':307 'function':101 'gas':724 'gel':706 'generic':1332 'gentl':587,595,674,1056,1159 'glass':730 'goal':402 'gradient':276 'green':864 'grid':996 'growth/weight':1138 'guid':125,1405 'guidanc':104 'heavi':1152 'hero':187,922,941,1011 'hig':659 'high':1160,1232 'horizont':884,1139 'hover':559,1426 'icon':271,496,780,1174 'ident':88,367,1370 'illustr':72,364 'import':1208 'industri':624 'instant':487 'intent':222 'interact':36,61,557 'intermedi':1222 'io':665 'irregular':1116 'item':995 'joy':155,1041 'keyfram':964,1223 'keyword':296 'land':588,832 'languag':1128 'layer':195,256,260,1228 'lead':919 'left':946 'life':275,1318 'light':1171 'like':1278 'line':1070 'linear':1188,1196,1283 'list':994 'load':37,66,1425 'loading/progress':435 'long':1105,1298 'longer':549 'look':1281 'lookup':1400 'loop':614,1429 'luxuri':325 'main':262 'maintain':1265 'make':247 'mani':1322 'map':1035 'match':1236 'materi':631,691,694 'material-bas':690 'md3':642,650 'medium':1162 'metal':699 'micro':35,60,237,480,988,1386 'micro-feedback':479 'micro-interact':34,59 'micro-stori':236,1385 'midpoint':808 'minim':324 'minimum':458 'miss':259,1311 'modal':55,512,1153 'moder':1170 'motion':2,5,40,87,115,160,201,242,252,255,283,366,940,955,978,1034,1227,1316,1374 'motion-design':1 'motion-personality.md':1365 'move':942,945,1324 'movement':1191 'ms':300,314,330,347,484,493,500,509,516,523,530,566,571,870,902,992,1001,1009,1016,1052,1065,1076,1089,1101,1113,1125,1157,1167,1177 'multi':91,136,1380 'multi-el':90,135,1379 'multi-element.md':1432 'must':210,485,1023 'narrat':232 'narrative-structure.md':1383 'nav':1005 'need':460 'never':1184,1187,1203,1217 'offset':806 'on-screen':603,639 'one':286,374,391,461 'opac':172,409,415,419,439,798,1205 'opacity-on':1204 'oscil':574,877 'outward':1094 'overlay':1154 'overshoot':295,688,697,766,905,1150 'overwhelm':467 'page':39,56,519 'paint':713 'palett':382 'panel':1004,1164 'paper':717 'parallax':434,1431 'particl':860 'path':253,428,801,1038,1126,1292 'pattern':142,390,740,910,982,1415,1416 'patterns/ambient-continuous.md':1428 'patterns/entrance-exit.md':911,912,1418 'patterns/multi-element.md':1433 'patterns/state-feedback.md':913,914,1422 'per':288 'perform':1393 'person':114,116,161,284,1267,1331,1336 'philosophi':1345 'physic':250 'pillar':206,213,218,1350 'pipelin':1357 'plan':76 'platform':1391 'play':162,297,362,689,743,842,1114 'polish':464 'pop':443,846 'posit':169,408,425,433,449,876,1213 'potenti':466 'premium':163,311,792 'press':422,489,561,742,779,787 'primari':167,261,403,844,875,923,1229 'principl':7,25,128,191,1258,1361 'problem':1277 'profession':341 'progress':82,1140,1200 'progress-bas':81 'project':289 'promin':929 'properti':168,399,404,406,459,1403 'property-selection.md':1401 'provid':18 'psycholog':1376 'puls':278,416,440 'purpos':102,1136 'px':883 'qualiti':1181 'quality-checklist.md':1411 'question':219 'quick':143,385,1275 'radial':1093 'rational':477 'recip':1420,1436 'red':896 'reduc':1328 'refer':144,1276,1344,1394,1395 'reference/property-selection.md':470,471,1402 'reference/quality-checklist.md':1272,1273,1412 'reference/timing-easing-tables.md':577,578,737,738,1397 'reference/troubleshooting.md':1341,1342,1407 'release/settle':563 'resolut':241 'respons':108,494,1180 'reveal':527 'rich':197,269 'right':943 'rigid':698 'robot':1282 'rotat':171,413,426,436,445,452 'rubber':705 'rule':106,140,200,582,952,967,1182,1327 'sad':1077 'satisfi':211 'scale':170,410,412,421,431,438,442,534,696,746,755,845,1215 'scene':138,1269 'screen':605,641,961,1220 'scroll':78 'scroll-trigg':77 'seamless':616 'secondari':193,251,267,405,775,825,853,1230,1312 'section':1012 'see':175,1241 'select':285,400,580 'sequenc':93 'serv':99 'settl':683,769,789 'setup':239 'shadow':270,432,776,819,1315 'shake':450,568,872 'sharp':892,1067 'sheet':719 'shift':272,518,781 'shrink':777 'signatur':372 'simplic':454 'simultan':203,979 'sine':618,1058 'sine-bas':617 'skill':42,48 'skill-motion-design' 'slight':802 'slow':387,1078,1103,1295 'smell':1409 'smoke':725 'smooth':606,1054 'snappi':666 'sophist':326 'sound':14 'source-lottiefiles' 'spatial':510,930,1190 'speed':950 'spinner':437,1199 'spiral':1133 'spring':772 'squash':754 'squigg':1118 'stage':190,834 'stagger':141,980,1022,1434 'standard':386,625,626,664,998 'start':586,596,794 'state':38,70,417,502,841,1209 'state-feedback.md':1421 'stay':1024 'step':146 'stone':700 'stop':893 'stori':123,238,1387 'straight':1069 'strong':1233 'style':394 'subtl':277,414,859 'success':67,441,840,1423 'sudden':1091 'support':268 'surpris':1090 'switch':525 'tabl':177,473,1242,1304 'target':154,797 'technic':13,216 'tell':121 'tens':1130 'theatric':531 'three':205,212,254,369,465,1226,1349 'threshold':455 'time':19,105,229,880 'timing-easing-tables.md':1396 'tint':897 'toggl':490 'tooltip':478,1172 'topic-agent-skills' 'topic-animation' 'topic-lottie' 'topic-motion-design' 'total':785,867,899,984,1021 'transit':17,33,57,497,520 'travel':956 'tree':95 'trigger':79 'troubleshoot':1274 'troubleshooting.md':1406 'two':463 'type':475,1240,1301 'ui':28,51,361,667,1363 'ui-adapt':1362 'upward':1045 'urgenc':157,1066 'use':29,46,456,629,986,1193,1244,1305 'user':552 'vertic':1137 'viewer':226,265 'visual':231,1019 'water':712 'wave':1013 'weight':1145,1147 'whimsic':308,1134 'without':962,1221 'wobbl':453 'x':540,543,702,708,715,721,728,733,805","prices":[{"id":"3c385fcd-471e-4db0-b8ff-79fe48da2d75","listingId":"373b413b-64ea-454e-af07-8ca7c7e1a10b","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"LottieFiles","category":"motion-design-skill","install_from":"skills.sh"},"createdAt":"2026-04-18T22:14:29.402Z"}],"sources":[{"listingId":"373b413b-64ea-454e-af07-8ca7c7e1a10b","source":"github","sourceId":"LottieFiles/motion-design-skill/motion-design","sourceUrl":"https://github.com/LottieFiles/motion-design-skill/tree/main/skills/motion-design","isPrimary":false,"firstSeenAt":"2026-04-18T22:14:29.402Z","lastSeenAt":"2026-05-02T06:55:31.750Z"}],"details":{"listingId":"373b413b-64ea-454e-af07-8ca7c7e1a10b","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"LottieFiles","slug":"motion-design","github":{"repo":"LottieFiles/motion-design-skill","stars":94,"topics":["agent-skills","animation","lottie","motion-design","ui"],"license":"mit","html_url":"https://github.com/LottieFiles/motion-design-skill","pushed_at":"2026-03-12T09:23:59Z","description":"Universal motion design principles for AI agents — timing, easing, choreography, and Disney animation principles adapted for UI","skill_md_sha":"9b5e2df492752a8343f21a6782a16c97ca5d8f9f","skill_md_path":"skills/motion-design/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/LottieFiles/motion-design-skill/tree/main/skills/motion-design"},"layout":"multi","source":"github","category":"motion-design-skill","frontmatter":{"name":"motion-design","license":"MIT","description":"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 transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system."},"skills_sh_url":"https://skills.sh/LottieFiles/motion-design-skill/motion-design"},"updatedAt":"2026-05-02T06:55:31.750Z"}}