{"id":"6e7d4638-1405-4f6f-83f7-82d768c89b09","shortId":"VGE5HM","kind":"skill","title":"motion-and-storytelling","tagline":"Disney's 12 animation principles, cinematic storytelling techniques, and comic book conventions apply to web UI — used subtly, they make interfaces feel alive, intentional, and emotionally resonant. Use when designing transitions, micro-interactions, onboarding flows, scroll anim","description":"# Motion and Storytelling in UI\n\nAnimation and motion are not decoration — they are communication. When applied with the same discipline as typography or colour, they tell the user what is happening, where to look, and what the product feels like to use. The source material — Disney's 12 principles, cinematic language, comic book conventions — is centuries of accumulated knowledge about how to communicate through movement and sequence.\n\nThe key word is **subtlety**. In UI, motion should be felt, not watched.\n\n---\n\n## Disney's 12 Principles Applied to UI\n\n### 1. Squash and Stretch\nObjects compress on impact and extend on acceleration. In UI: a button that scales down slightly on press and springs back communicates physicality and responsiveness.\n\n```css\nbutton:active { transform: scale(0.96); }\nbutton { transition: transform 80ms ease-out; }\n```\n\nUse sparingly — reserved for primary CTAs and satisfying confirmations.\n\n### 2. Anticipation\nA small preparatory movement before the main action. In UI: a menu item shifting slightly before opening, or a loading indicator appearing before a transition begins, prepares the user for what is coming.\n\n### 3. Staging\nPresent one idea clearly at a time. In UI: entrance animations should direct attention to the new content, not compete with existing content. When a modal opens, the rest of the page dims — that is staging.\n\n### 4. Straight Ahead vs Pose to Pose\n**Pose to pose** — defining start and end states and letting the system interpolate — is the CSS/JS approach. Define clear initial and final states; let `transition` or a spring physics library handle the in-between.\n\n### 5. Follow-Through and Overlapping Action\nElements don't all stop at the same time. In UI: staggered list item entrances (each item enters 40–60ms after the previous) feel more natural than all items appearing simultaneously.\n\n```css\n.item:nth-child(1) { animation-delay: 0ms; }\n.item:nth-child(2) { animation-delay: 50ms; }\n.item:nth-child(3) { animation-delay: 100ms; }\n```\n\n### 6. Ease In and Ease Out\nNothing in nature starts or stops instantly. Use easing curves, not linear transitions.\n\n| Easing | Use for |\n|---|---|\n| `ease-out` (fast start, slow end) | Elements entering the screen — feels natural arrival |\n| `ease-in` (slow start, fast end) | Elements leaving the screen — feels intentional exit |\n| `ease-in-out` | Elements moving between positions on screen |\n| Spring physics | Interactive elements that respond to touch/drag |\n\nNever use `linear` for UI motion — it reads as mechanical and unfinished.\n\n### 7. Arcs\nNatural movement follows arcs, not straight lines. Tooltips and popovers that scale from their origin point (rather than fading uniformly) follow this principle. `transform-origin` matters.\n\n### 8. Secondary Action\nA supporting motion that reinforces the main action. In UI: an icon inside a button that shifts slightly when the button is pressed. A checkmark that draws itself after a form submission. These details reward attention without demanding it.\n\n### 9. Timing\nDuration is meaning. Fast = responsive, energetic. Slow = weighty, important.\n\n| Duration | Use for |\n|---|---|\n| 80–120ms | Micro-interactions (button press, hover) |\n| 150–250ms | Component transitions (dropdown open, tooltip) |\n| 250–400ms | Page-level transitions, modal entrance |\n| 400–600ms | Hero animations, onboarding sequences |\n| > 600ms | Almost always too long — the user is waiting |\n\n### 10. Exaggeration\nA small, deliberate overstatement makes an action feel satisfying. In UI: a success checkmark that overshoots slightly before settling, or a notification badge that pops just slightly larger than its final size. The exaggeration is 10–15%, not theatrical.\n\n### 11. Solid Drawing (Solid Design)\nRespect the 3D space of the interface. Elements should move in ways consistent with their perceived layer — a bottom sheet slides up from below because it lives below the content, not from the side. A tooltip appears near its trigger, not across the screen.\n\n### 12. Appeal\nThe overall motion should feel right for the brand. A playful consumer app can use bouncier, springier motion. A financial tool uses precise, controlled transitions. Appeal is not decoration — it is brand personality expressed through time.\n\n---\n\n## Cinematic Techniques\n\n### Reveal and Entrance\nContent that enters the viewport has more impact when it arrives, rather than simply existing. Scroll-triggered entrance animations — a section fading up as the user scrolls into it — borrow from cinematic reveals. The key: **the content drives in from a meaningful direction** (below, because that's where the user is scrolling from).\n\n```css\n@keyframes fade-up {\n  from { opacity: 0; transform: translateY(24px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n```\n\n### Parallax\nBackground elements moving slower than foreground elements creates depth. In web: a hero background image moving at 50% scroll speed while content moves at 100% creates a sense of layers. Use subtly — aggressive parallax causes motion sickness.\n\n### Cut vs Dissolve\n- **Hard cut** (instant state change): fast, decisive, efficient. Use for navigation between pages, closing modals.\n- **Dissolve / crossfade**: gradual, considered, connected. Use when two states are related — a tab switching, an image gallery transitioning.\n\n### Scene Setting\nThe first frame of a section sets the scene before detail appears. A hero with a strong image and large type, followed by supporting details appearing after a brief delay, is a cinematic opening. The user's eye is directed to the subject before reading begins.\n\n---\n\n## Comic Book Conventions\n\n### Panel Sequence\nComics tell stories through a sequence of static frames that imply motion between them. In UI: step indicators, onboarding carousels, and progress flows use the same logic — each \"panel\" is a moment in a sequence, and the user's eye moves between them.\n\n### Speed Lines and Energy\nEmphasis lines, radial gradients, and directional blur suggest motion and energy without actual animation. A button with a subtle directional gradient implies it is pointing somewhere. A loading indicator with trailing opacity implies direction.\n\n### Typography as Tone\nIn comics, the size, weight, and style of lettering communicates emotion — a shout is set in large bold caps, a whisper in thin small italics. In UI: oversized display type for a hero carries energy; small muted caption text recedes. This is micro-typography as emotional register, not just hierarchy.\n\n### The Gutter\nIn comics, the reader's imagination fills the space between panels. In UI, transitions are the gutter — what happens between states. A smooth transition lets the user's brain construct a coherent mental model. A jarring jump forces them to re-orient.\n\n---\n\n## Practical Rules\n\n1. **Respect `prefers-reduced-motion`** — always. Users with vestibular disorders or motion sensitivity must be able to use the product without animation.\n\n```css\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n```\n\n2. **Motion should serve the user, not entertain them.** Every animation should answer: does this help the user understand what happened, where something came from, or where to look next?\n\n3. **Duration under 400ms for almost everything.** If an animation takes longer, it is slowing the user down.\n\n4. **Never animate layout properties** (`width`, `height`, `padding`, `top`, `left`) — they cause reflow. Animate `transform` and `opacity` only — they run on the GPU.\n\n5. **One motion at a time per region.** Simultaneous competing animations create visual noise. Stage them.\n\n## Review Checklist\n\n- [ ] Does `prefers-reduced-motion` disable or reduce all animations?\n- [ ] Are all transitions using `ease-out` (enter), `ease-in` (exit), or `ease-in-out` (reposition)?\n- [ ] Is linear easing avoided?\n- [ ] Are durations under 400ms for component-level transitions?\n- [ ] Are only `transform` and `opacity` animated (not layout properties)?\n- [ ] Do entrance animations move from a meaningful direction (bottom for scroll-reveal, origin for scale)?\n- [ ] Does motion match brand tone (bouncy for playful, precise for enterprise)?\n- [ ] Are staggered entrances used for list items rather than simultaneous appearance?","tags":["motion","and","storytelling","dembrandt","skills","accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens"],"capabilities":["skill","source-dembrandt","skill-motion-and-storytelling","topic-accessibility","topic-agent-skills","topic-claude-code-skills","topic-claude-skills","topic-cursor-skills","topic-design-system","topic-design-tokens","topic-enterprise-ux","topic-gestalt","topic-skills-sh","topic-typography","topic-ui-design"],"categories":["dembrandt-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/dembrandt/dembrandt-skills/motion-and-storytelling","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add dembrandt/dembrandt-skills","source_repo":"https://github.com/dembrandt/dembrandt-skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 9 github stars · SKILL.md body (8,361 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-18T19:08:27.730Z","embedding":null,"createdAt":"2026-05-18T13:14:02.785Z","updatedAt":"2026-05-18T19:08:27.730Z","lastSeenAt":"2026-05-18T19:08:27.730Z","tsv":"'0':759,768 '0.01':1113,1119 '0.96':164 '0ms':343 '1':130,339,765,1078 '10':565,602 '100':794 '100ms':361 '11':606 '12':7,90,125,655 '120ms':528 '15':603 '150':535 '2':181,348,1122 '24px':762 '250':542 '250ms':536 '3':216,357,1152 '3d':613 '4':254,1170 '40':321 '400':550 '400ms':543,1155,1246 '5':296,1193 '50':787 '50ms':352 '6':362 '600ms':551,556 '60ms':322 '7':442 '8':471 '80':527 '80ms':168 '9':513 'abl':1094 'acceler':141 'accumul':100 'across':652 'action':190,302,473,481,573 'activ':161 'actual':955 'aggress':802 'ahead':256 'aliv':27 'almost':557,1157 'alway':558,1084 'anim':8,42,48,228,341,350,359,553,717,956,1100,1111,1132,1161,1172,1183,1203,1220,1257,1263 'animation-delay':340,349,358 'animation-dur':1110 'answer':1134 'anticip':182 'app':669 'appeal':656,682 'appear':204,332,647,856,870,1298 'appli':17,58,127 'approach':277 'arc':443,447 'arriv':397,708 'attent':231,509 'avoid':1242 'back':154 'background':770,783 'badg':589 'begin':208,890 'blur':949 'bold':997 'book':15,95,892 'borrow':728 'bottom':629,1269 'bounci':1282 'bouncier':672 'brain':1061 'brand':665,688,1280 'brief':873 'button':145,160,165,488,494,532,958 'came':1145 'cap':998 'caption':1017 'carousel':915 'carri':1013 'caus':804,1181 'centuri':98 'chang':814 'checklist':1210 'checkmark':498,580 'child':338,347,356 'cinemat':10,92,693,730,877 'clear':221,279 'close':823 'coher':1064 'colour':66 'come':215 'comic':14,94,891,896,981,1034 'communic':56,105,155,989 'compet':237,1202 'compon':537,1249 'component-level':1248 'compress':135 'confirm':180 'connect':829 'consid':828 'consist':623 'construct':1062 'consum':668 'content':235,240,640,698,735,791 'control':680 'convent':16,96,893 'creat':777,795,1204 'crossfad':826 'css':159,334,752,1101 'css/js':276 'ctas':177 'curv':377 'cut':807,811 'decis':816 'decor':53,685 'defin':264,278 'delay':342,351,360,874 'deliber':569 'demand':511 'depth':778 'design':34,610 'detail':507,855,869 'dim':250 'direct':230,741,884,948,962,976,1268 'disabl':1216 'disciplin':62 'disney':5,88,123 'disord':1088 'display':1008 'dissolv':809,825 'draw':500,608 'drive':736 'dropdown':539 'durat':515,524,1112,1118,1153,1244 'eas':170,363,366,376,381,385,399,413,1226,1230,1235,1241 'ease-in':398,1229 'ease-in-out':412,1234 'ease-out':169,384,1225 'effici':817 'element':303,391,405,416,425,618,771,776 'emot':30,990,1026 'emphasi':943 'end':267,390,404 'energet':520 'energi':942,953,1014 'enter':320,392,700,1228 'enterpris':1287 'entertain':1129 'entranc':227,317,549,697,716,1262,1290 'everi':1131 'everyth':1158 'exagger':566,600 'exist':239,712 'exit':411,1232 'express':690 'extend':139 'eye':882,935 'fade':462,720,755 'fade-up':754 'fast':387,403,518,815 'feel':26,81,326,395,409,574,661 'felt':120 'fill':1039 'final':282,597 'financi':676 'first':846 'flow':40,918 'follow':298,446,464,866 'follow-through':297 'forc':1070 'foreground':775 'form':504 'frame':847,904 'galleri':841 'gpu':1192 'gradient':946,963 'gradual':827 'gutter':1032,1049 'handl':291 'happen':73,1051,1142 'hard':810 'height':1176 'help':1137 'hero':552,782,858,1012 'hierarchi':1030 'hover':534 'icon':485 'idea':220 'imag':784,840,862 'imagin':1038 'impact':137,705 'impli':906,964,975 'import':523,1115,1121 'in-between':293 'indic':203,913,971 'initi':280 'insid':486 'instant':374,812 'intent':28,410 'interact':38,424,531 'interfac':25,617 'interpol':273 'ital':1004 'item':195,316,319,331,335,344,353,1294 'jar':1068 'jump':1069 'key':111,733 'keyfram':753 'knowledg':101 'languag':93 'larg':864,996 'larger':594 'layer':627,799 'layout':1173,1259 'leav':406 'left':1179 'let':270,284,1057 'letter':988 'level':546,1250 'librari':290 'like':82 'line':450,940,944 'linear':379,432,1240 'list':315,1293 'live':637 'load':202,970 'logic':922 'long':560 'longer':1163 'look':76,1150 'main':189,480 'make':24,571 'match':1279 'materi':87 'matter':470 'mean':517 'meaning':740,1267 'mechan':439 'media':1102 'mental':1065 'menu':194 'micro':37,530,1023 'micro-interact':36,529 'micro-typographi':1022 'modal':243,548,824 'model':1066 'moment':927 'motion':2,43,50,117,435,476,659,674,805,907,951,1083,1090,1106,1123,1195,1215,1278 'motion-and-storytel':1 'move':417,620,772,785,792,936,1264 'movement':107,186,445 'ms':1114,1120 'must':1092 'mute':1016 'natur':328,370,396,444 'navig':820 'near':648 'never':430,1171 'new':234 'next':1151 'nois':1206 'noth':368 'notif':588 'nth':337,346,355 'nth-child':336,345,354 'object':134 'onboard':39,554,914 'one':219,1194 'opac':758,764,974,1186,1256 'open':199,244,540,878 'orient':1075 'origin':458,469,1274 'overal':658 'overlap':301 'overs':1007 'overshoot':582 'overstat':570 'pad':1177 'page':249,545,822 'page-level':544 'panel':894,924,1043 'parallax':769,803 'per':1199 'perceiv':626 'person':689 'physic':156,289,423 'play':667,1284 'point':459,967 'pop':591 'popov':453 'pose':258,260,261,263 'posit':419 'practic':1076 'precis':679,1285 'prefer':1081,1104,1213 'prefers-reduced-mot':1080,1103,1212 'prepar':209 'preparatori':185 'present':218 'press':151,496,533 'previous':325 'primari':176 'principl':9,91,126,466 'product':80,1098 'progress':917 'properti':1174,1260 'radial':945 'rather':460,709,1295 're':1074 're-ori':1073 'read':437,889 'reader':1036 'reced':1019 'reduc':1082,1105,1107,1214,1218 'reflow':1182 'region':1200 'regist':1027 'reinforc':478 'relat':835 'reposit':1238 'reserv':174 'reson':31 'respect':611,1079 'respond':427 'respons':158,519 'rest':246 'reveal':695,731,1273 'review':1209 'reward':508 'right':662 'rule':1077 'run':1189 'satisfi':179,575 'scale':147,163,455,1276 'scene':843,853 'screen':394,408,421,654 'scroll':41,714,725,750,788,1272 'scroll-rev':1271 'scroll-trigg':713 'secondari':472 'section':719,850 'sens':797 'sensit':1091 'sequenc':109,555,895,901,930 'serv':1125 'set':844,851,994 'settl':585 'sheet':630 'shift':196,490 'shout':992 'sick':806 'side':644 'simpli':711 'simultan':333,1201,1297 'size':598,983 'skill' 'skill-motion-and-storytelling' 'slide':631 'slight':149,197,491,583,593 'slow':389,401,521,1166 'slower':773 'small':184,568,1003,1015 'smooth':1055 'solid':607,609 'someth':1144 'somewher':968 'sourc':86 'source-dembrandt' 'space':614,1041 'spare':173 'speed':789,939 'spring':153,288,422 'springier':673 'squash':131 'stage':217,253,1207 'stagger':314,1289 'start':265,371,388,402 'state':268,283,813,833,1053 'static':903 'step':912 'stop':307,373 'stori':898 'storytel':4,11,45 'straight':255,449 'stretch':133 'strong':861 'style':986 'subject':887 'submiss':505 'subt':22,801 'subtl':961 'subtleti':114 'success':579 'suggest':950 'support':475,868 'switch':838 'system':272 'tab':837 'take':1162 'techniqu':12,694 'tell':68,897 'text':1018 'theatric':605 'thin':1002 'time':224,311,514,692,1198 'tone':979,1281 'tool':677 'tooltip':451,541,646 'top':1178 'topic-accessibility' 'topic-agent-skills' 'topic-claude-code-skills' 'topic-claude-skills' 'topic-cursor-skills' 'topic-design-system' 'topic-design-tokens' 'topic-enterprise-ux' 'topic-gestalt' 'topic-skills-sh' 'topic-typography' 'topic-ui-design' 'touch/drag':429 'trail':973 'transform':162,167,468,760,766,1184,1254 'transform-origin':467 'transit':35,166,207,285,380,538,547,681,842,1046,1056,1117,1223,1251 'transition-dur':1116 'translatey':761,767 'trigger':650,715 'two':832 'type':865,1009 'typographi':64,977,1024 'ui':20,47,116,129,143,192,226,313,434,483,577,911,1006,1045 'understand':1140 'unfinish':441 'uniform':463 'use':21,32,84,172,375,382,431,525,671,678,800,818,830,919,1096,1224,1291 'user':70,211,562,724,748,880,933,1059,1085,1127,1139,1168 'vestibular':1087 'viewport':702 'visual':1205 'vs':257,808 'wait':564 'watch':122 'way':622 'web':19,780 'weight':984 'weighti':522 'whisper':1000 'width':1175 'without':510,954,1099 'word':112","prices":[{"id":"7b6e9e96-9803-44be-bc0f-2d8f3d9e6965","listingId":"6e7d4638-1405-4f6f-83f7-82d768c89b09","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"dembrandt","category":"dembrandt-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:14:02.785Z"}],"sources":[{"listingId":"6e7d4638-1405-4f6f-83f7-82d768c89b09","source":"github","sourceId":"dembrandt/dembrandt-skills/motion-and-storytelling","sourceUrl":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/motion-and-storytelling","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:02.785Z","lastSeenAt":"2026-05-18T19:08:27.730Z"}],"details":{"listingId":"6e7d4638-1405-4f6f-83f7-82d768c89b09","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"dembrandt","slug":"motion-and-storytelling","github":{"repo":"dembrandt/dembrandt-skills","stars":9,"topics":["accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens","enterprise-ux","gestalt","skills-sh","typography","ui-design","ux","wcag"],"license":"mit","html_url":"https://github.com/dembrandt/dembrandt-skills","pushed_at":"2026-05-14T22:34:06Z","description":"UX and design system skills for AI agents based on 20 years of experience","skill_md_sha":"4363249cef5a686a4f71ddd72b3426124b03f24e","skill_md_path":"skills/motion-and-storytelling/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/motion-and-storytelling"},"layout":"multi","source":"github","category":"dembrandt-skills","frontmatter":{"name":"motion-and-storytelling","description":"Disney's 12 animation principles, cinematic storytelling techniques, and comic book conventions apply to web UI — used subtly, they make interfaces feel alive, intentional, and emotionally resonant. Use when designing transitions, micro-interactions, onboarding flows, scroll animations, or any motion in the UI."},"skills_sh_url":"https://skills.sh/dembrandt/dembrandt-skills/motion-and-storytelling"},"updatedAt":"2026-05-18T19:08:27.730Z"}}