[{"data":1,"prerenderedAt":1234},["ShallowReactive",2],{"navigation_docs":3,"-documentation-design-motion":353,"-documentation-design-motion-surround":1229},[4,114,302],{"title":5,"path":6,"stem":7,"children":8,"page":34},"Documentation","\u002Fdocumentation","1.documentation",[9,35,56,93],{"title":10,"path":11,"stem":12,"children":13,"page":34},"Getting Started","\u002Fdocumentation\u002Fgetting-started","1.documentation\u002F1.getting-started",[14,18,22,26,30],{"title":15,"path":16,"stem":17},"Installation","\u002Fdocumentation\u002Fgetting-started\u002Finstallation","1.documentation\u002F1.getting-started\u002F1.installation",{"title":19,"path":20,"stem":21},"Agents","\u002Fdocumentation\u002Fgetting-started\u002Fagents","1.documentation\u002F1.getting-started\u002F2.agents",{"title":23,"path":24,"stem":25},"Migration","\u002Fdocumentation\u002Fgetting-started\u002Fmigration","1.documentation\u002F1.getting-started\u002F3.migration",{"title":27,"path":28,"stem":29},"Contributing","\u002Fdocumentation\u002Fgetting-started\u002Fcontributing","1.documentation\u002F1.getting-started\u002F4.contributing",{"title":31,"path":32,"stem":33},"What's new","\u002Fdocumentation\u002Fgetting-started\u002Fwhats-new","1.documentation\u002F1.getting-started\u002F5.whats-new",false,{"title":36,"path":37,"stem":38,"children":39,"page":34},"Guidelines","\u002Fdocumentation\u002Fguidelines","1.documentation\u002F2.guidelines",[40,44,48,52],{"title":41,"path":42,"stem":43},"Design Principles","\u002Fdocumentation\u002Fguidelines\u002Fdesign-principles","1.documentation\u002F2.guidelines\u002F1.design-principles",{"title":45,"path":46,"stem":47},"Accessibility","\u002Fdocumentation\u002Fguidelines\u002Faccessibility","1.documentation\u002F2.guidelines\u002F2.accessibility",{"title":49,"path":50,"stem":51},"Interactions","\u002Fdocumentation\u002Fguidelines\u002Finteractions","1.documentation\u002F2.guidelines\u002F3.interactions",{"title":53,"path":54,"stem":55},"Components","\u002Fdocumentation\u002Fguidelines\u002Fcomponents","1.documentation\u002F2.guidelines\u002F4.components",{"title":57,"path":58,"stem":59,"children":60,"page":34},"Design","\u002Fdocumentation\u002Fdesign","1.documentation\u002F3.design",[61,65,69,73,77,81,85,89],{"title":62,"path":63,"stem":64},"Tokens","\u002Fdocumentation\u002Fdesign\u002Ftokens","1.documentation\u002F3.design\u002F1.tokens",{"title":66,"path":67,"stem":68},"Color Palette","\u002Fdocumentation\u002Fdesign\u002Fcolor-palette","1.documentation\u002F3.design\u002F2.color-palette",{"title":70,"path":71,"stem":72},"Elevation","\u002Fdocumentation\u002Fdesign\u002Felevation","1.documentation\u002F3.design\u002F3.elevation",{"title":74,"path":75,"stem":76},"Spacing","\u002Fdocumentation\u002Fdesign\u002Fspacing","1.documentation\u002F3.design\u002F4.spacing",{"title":78,"path":79,"stem":80},"Border Radius","\u002Fdocumentation\u002Fdesign\u002Fborder-radius","1.documentation\u002F3.design\u002F5.border-radius",{"title":82,"path":83,"stem":84},"Typography","\u002Fdocumentation\u002Fdesign\u002Ftypography","1.documentation\u002F3.design\u002F6.typography",{"title":86,"path":87,"stem":88},"Icons","\u002Fdocumentation\u002Fdesign\u002Ficons","1.documentation\u002F3.design\u002F7.icons",{"title":90,"path":91,"stem":92},"Motion","\u002Fdocumentation\u002Fdesign\u002Fmotion","1.documentation\u002F3.design\u002F8.motion",{"title":94,"path":95,"stem":96,"children":97,"page":34},"Content","\u002Fdocumentation\u002Fcontent","1.documentation\u002F4.content",[98,102,106,110],{"title":99,"path":100,"stem":101},"Wording","\u002Fdocumentation\u002Fcontent\u002Fwording","1.documentation\u002F4.content\u002F1.wording",{"title":103,"path":104,"stem":105},"Messaging","\u002Fdocumentation\u002Fcontent\u002Fmessaging","1.documentation\u002F4.content\u002F2.messaging",{"title":107,"path":108,"stem":109},"Glossary","\u002Fdocumentation\u002Fcontent\u002Fglossary","1.documentation\u002F4.content\u002F3.glossary",{"title":111,"path":112,"stem":113},"Artificial Intelligence","\u002Fdocumentation\u002Fcontent\u002Fartificial-intelligence","1.documentation\u002F4.content\u002F4.artificial-intelligence",{"title":53,"path":115,"stem":116,"children":117,"page":34},"\u002Fcomponents","2.components",[118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250,254,258,262,266,270,274,278,282,286,290,294,298],{"title":119,"path":120,"stem":121},"Action Menu","\u002Fcomponents\u002Faction-menu","2.components\u002Faction-menu",{"title":123,"path":124,"stem":125},"Avatar","\u002Fcomponents\u002Favatar","2.components\u002Favatar",{"title":127,"path":128,"stem":129},"Badge","\u002Fcomponents\u002Fbadge","2.components\u002Fbadge",{"title":131,"path":132,"stem":133},"Banner","\u002Fcomponents\u002Fbanner","2.components\u002Fbanner",{"title":135,"path":136,"stem":137},"Button","\u002Fcomponents\u002Fbutton","2.components\u002Fbutton",{"title":139,"path":140,"stem":141},"Card","\u002Fcomponents\u002Fcard","2.components\u002Fcard",{"title":143,"path":144,"stem":145},"Chart","\u002Fcomponents\u002Fchart","2.components\u002Fchart",{"title":147,"path":148,"stem":149},"Checkbox","\u002Fcomponents\u002Fcheckbox","2.components\u002Fcheckbox",{"title":151,"path":152,"stem":153},"Collapsible","\u002Fcomponents\u002Fcollapsible","2.components\u002Fcollapsible",{"title":155,"path":156,"stem":157},"Colorpicker","\u002Fcomponents\u002Fcolorpicker","2.components\u002Fcolorpicker",{"title":159,"path":160,"stem":161},"Data Table","\u002Fcomponents\u002Fdata-table","2.components\u002Fdata-table",{"title":163,"path":164,"stem":165},"Datepicker","\u002Fcomponents\u002Fdatepicker","2.components\u002Fdatepicker",{"title":167,"path":168,"stem":169},"Email Field","\u002Fcomponents\u002Femail-field","2.components\u002Femail-field",{"title":171,"path":172,"stem":173},"Empty State","\u002Fcomponents\u002Fempty-state","2.components\u002Fempty-state",{"title":175,"path":176,"stem":177},"Entity Data Table","\u002Fcomponents\u002Fentity-data-table","2.components\u002Fentity-data-table",{"title":179,"path":180,"stem":181},"Entity Select","\u002Fcomponents\u002Fentity-select","2.components\u002Fentity-select",{"title":183,"path":184,"stem":185},"Floating UI","\u002Fcomponents\u002Ffloating-ui","2.components\u002Ffloating-ui",{"title":187,"path":188,"stem":189},"Help Text","\u002Fcomponents\u002Fhelp-text","2.components\u002Fhelp-text",{"title":191,"path":192,"stem":193},"Icon","\u002Fcomponents\u002Ficon","2.components\u002Ficon",{"title":195,"path":196,"stem":197},"Link","\u002Fcomponents\u002Flink","2.components\u002Flink",{"title":199,"path":200,"stem":201},"Loader","\u002Fcomponents\u002Floader","2.components\u002Floader",{"title":203,"path":204,"stem":205},"Modal","\u002Fcomponents\u002Fmodal","2.components\u002Fmodal",{"title":207,"path":208,"stem":209},"Number Field","\u002Fcomponents\u002Fnumber-field","2.components\u002Fnumber-field",{"title":211,"path":212,"stem":213},"Pagination","\u002Fcomponents\u002Fpagination","2.components\u002Fpagination",{"title":215,"path":216,"stem":217},"Password Field","\u002Fcomponents\u002Fpassword-field","2.components\u002Fpassword-field",{"title":219,"path":220,"stem":221},"Popover","\u002Fcomponents\u002Fpopover","2.components\u002Fpopover",{"title":223,"path":224,"stem":225},"Progress Bar","\u002Fcomponents\u002Fprogress-bar","2.components\u002Fprogress-bar",{"title":227,"path":228,"stem":229},"Promo Badge","\u002Fcomponents\u002Fpromo-badge","2.components\u002Fpromo-badge",{"title":231,"path":232,"stem":233},"Radio Group","\u002Fcomponents\u002Fradio-group","2.components\u002Fradio-group",{"title":235,"path":236,"stem":237},"Search","\u002Fcomponents\u002Fsearch","2.components\u002Fsearch",{"title":239,"path":240,"stem":241},"Select","\u002Fcomponents\u002Fselect","2.components\u002Fselect",{"title":243,"path":244,"stem":245},"Skeleton Bar","\u002Fcomponents\u002Fskeleton-bar","2.components\u002Fskeleton-bar",{"title":247,"path":248,"stem":249},"Slider","\u002Fcomponents\u002Fslider","2.components\u002Fslider",{"title":251,"path":252,"stem":253},"Snackbar","\u002Fcomponents\u002Fsnackbar","2.components\u002Fsnackbar",{"title":255,"path":256,"stem":257},"Status Dot","\u002Fcomponents\u002Fstatus-dot","2.components\u002Fstatus-dot",{"title":259,"path":260,"stem":261},"Switch","\u002Fcomponents\u002Fswitch","2.components\u002Fswitch",{"title":263,"path":264,"stem":265},"Tabs","\u002Fcomponents\u002Ftabs","2.components\u002Ftabs",{"title":267,"path":268,"stem":269},"Text","\u002Fcomponents\u002Ftext","2.components\u002Ftext",{"title":271,"path":272,"stem":273},"Text Editor","\u002Fcomponents\u002Ftext-editor","2.components\u002Ftext-editor",{"title":275,"path":276,"stem":277},"Text Field","\u002Fcomponents\u002Ftext-field","2.components\u002Ftext-field",{"title":279,"path":280,"stem":281},"Textarea","\u002Fcomponents\u002Ftextarea","2.components\u002Ftextarea",{"title":283,"path":284,"stem":285},"Theme Select","\u002Fcomponents\u002Ftheme-select","2.components\u002Ftheme-select",{"title":287,"path":288,"stem":289},"Toast","\u002Fcomponents\u002Ftoast","2.components\u002Ftoast",{"title":291,"path":292,"stem":293},"Tooltip","\u002Fcomponents\u002Ftooltip","2.components\u002Ftooltip",{"title":295,"path":296,"stem":297},"Unit Field","\u002Fcomponents\u002Funit-field","2.components\u002Funit-field",{"title":299,"path":300,"stem":301},"URL Field","\u002Fcomponents\u002Furl-field","2.components\u002Furl-field",{"title":303,"path":304,"stem":305,"children":306,"page":34},"Utilities","\u002Futilities","3.utilities",[307,319,336,344],{"title":53,"path":308,"stem":309,"children":310,"page":34},"\u002Futilities\u002Fcomponents","3.utilities\u002Fcomponents",[311,315],{"title":312,"path":313,"stem":314},"Inset","\u002Futilities\u002Fcomponents\u002Finset","3.utilities\u002Fcomponents\u002Finset",{"title":316,"path":317,"stem":318},"Theme Provider","\u002Futilities\u002Fcomponents\u002Ftheme-provider","3.utilities\u002Fcomponents\u002Ftheme-provider",{"title":320,"path":321,"stem":322,"children":323,"page":34},"Composables","\u002Futilities\u002Fcomposables","3.utilities\u002Fcomposables",[324,328,332],{"title":325,"path":326,"stem":327},"useFutureFlags","\u002Futilities\u002Fcomposables\u002Fuse-future-flags","3.utilities\u002Fcomposables\u002Fuse-future-flags",{"title":329,"path":330,"stem":331},"useSnackbar","\u002Futilities\u002Fcomposables\u002Fuse-snackbar","3.utilities\u002Fcomposables\u002Fuse-snackbar",{"title":333,"path":334,"stem":335},"useTheme","\u002Futilities\u002Fcomposables\u002Fuse-theme","3.utilities\u002Fcomposables\u002Fuse-theme",{"title":337,"path":338,"stem":339,"children":340,"page":34},"Directives","\u002Futilities\u002Fdirectives","3.utilities\u002Fdirectives",[341],{"title":291,"path":342,"stem":343},"\u002Futilities\u002Fdirectives\u002Ftooltip","3.utilities\u002Fdirectives\u002Ftooltip",{"title":345,"path":346,"stem":347,"children":348,"page":34},"Plugins","\u002Futilities\u002Fplugins","3.utilities\u002Fplugins",[349],{"title":350,"path":351,"stem":352},"Device helper","\u002Futilities\u002Fplugins\u002Fdevice-helper","3.utilities\u002Fplugins\u002Fdevice-helper",{"id":354,"title":90,"body":355,"description":1223,"extension":1224,"links":1225,"meta":1226,"navigation":722,"path":91,"seo":1227,"stem":92,"__hash__":1228},"docs\u002F1.documentation\u002F3.design\u002F8.motion.md",{"type":356,"value":357,"toc":1214},"minimark",[358,361,365,368,373,396,399,403,406,472,475,478,482,519,536,539,542,546,549,606,609,616,633,637,644,647,650,1042,1067,1071,1130,1186,1189,1204,1207,1210],[359,360],"motion-patterns",{},[362,363,364],"p",{},"Merchants spend entire workdays in the admin completing business-critical tasks. Motion in this context is feedback, not decoration. It confirms that a click registered, shows where an element came from, and keeps state changes from feeling abrupt. Users should notice what changed, never the animation itself.",[362,366,367],{},"When in doubt, do not animate. A fast, well-eased 150ms transition beats an elaborate 500ms sequence every time.",[369,370,372],"h2",{"id":371},"principles","Principles",[374,375,376,384,390],"ul",{},[377,378,379,383],"li",{},[380,381,382],"strong",{},"Minimal."," Use only as much motion as necessary. Every movement has a clear purpose, so users can focus on their work rather than the interface.",[377,385,386,389],{},[380,387,388],{},"Purposeful."," Every animation answers a question: did my click register, where did this element come from, what just changed. If it answers no question, cut it.",[377,391,392,395],{},[380,393,394],{},"Calm."," Motion in Meteor is professional and quiet. Avoid playful, bouncy, or hectic movement. Save expressiveness for rare moments such as onboarding or empty states, never for everyday interactions.",[362,397,398],{},"Marketing surfaces follow their own motion guidelines with longer, more expressive timing. Those values are designed for storytelling and do not transfer to product interfaces.",[369,400,402],{"id":401},"when-to-animate","When to animate",[362,404,405],{},"Decide based on how often a user triggers the change:",[407,408,409,424],"table",{},[410,411,412],"thead",{},[413,414,415,419,422],"tr",{},[416,417,418],"th",{},"Frequency",[416,420,421],{},"Example",[416,423,90],{},[425,426,427,439,450,461],"tbody",{},[413,428,429,433,436],{},[430,431,432],"td",{},"Many times per hour",[430,434,435],{},"Navigating lists, moving selection, toggling table rows",[430,437,438],{},"None, or 100ms at most",[413,440,441,444,447],{},[430,442,443],{},"Keyboard-initiated",[430,445,446],{},"Focus movement, arrow-key navigation, shortcuts",[430,448,449],{},"Never animate",[413,451,452,455,458],{},[430,453,454],{},"Occasional",[430,456,457],{},"Opening a modal, popover, or drawer",[430,459,460],{},"Standard, under 400ms",[413,462,463,466,469],{},[430,464,465],{},"Rare",[430,467,468],{},"Onboarding, empty states, success moments",[430,470,471],{},"May be slightly more expressive",[362,473,474],{},"High-frequency actions must feel instant. Animating them makes the interface feel disconnected from the user's input, and the delay compounds hundreds of times a day. Click through both lists quickly, or hold an arrow key, to feel the difference:",[476,477],"motion-list-navigation",{},[369,479,481],{"id":480},"duration","Duration",[407,483,484,493],{},[410,485,486],{},[413,487,488,491],{},[416,489,490],{},"Element",[416,492,481],{},[425,494,495,503,511],{},[413,496,497,500],{},[430,498,499],{},"Hover, press, color, and shadow changes",[430,501,502],{},"100-150ms",[413,504,505,508],{},[430,506,507],{},"Tooltips, dropdowns, popovers",[430,509,510],{},"150-250ms",[413,512,513,516],{},[430,514,515],{},"Modals, drawers, side panels",[430,517,518],{},"250-400ms",[374,520,521,530,533],{},[377,522,523,524,529],{},"Exits run 30-50% faster than entrances. The user has already decided to leave; do not make them wait. ",[525,526,527],"a",{"href":204},[380,528,203],{}," enters in 400ms and exits in 200ms.",[377,531,532],{},"Larger elements and longer travel distances get more time. A full-height drawer needs more than a tooltip.",[377,534,535],{},"400ms is the ceiling for any product UI animation. If motion feels slow, reduce the duration before changing anything else.",[362,537,538],{},"The same enter and exit transition at three durations:",[540,541],"motion-duration-compare",{},[369,543,545],{"id":544},"easing","Easing",[362,547,548],{},"Three curves cover Meteor interfaces:",[407,550,551,564],{},[410,552,553],{},[413,554,555,558,561],{},[416,556,557],{},"Role",[416,559,560],{},"Curve",[416,562,563],{},"Use for",[425,565,566,580,593],{},[413,567,568,571,577],{},[430,569,570],{},"Decelerate",[430,572,573],{},[574,575,576],"code",{},"cubic-bezier(0.05, 0.7, 0.1, 1)",[430,578,579],{},"Elements entering the screen",[413,581,582,585,590],{},[430,583,584],{},"Accelerate",[430,586,587],{},[574,588,589],{},"cubic-bezier(0.3, 0, 0.8, 0.15)",[430,591,592],{},"Elements leaving the screen",[413,594,595,598,603],{},[430,596,597],{},"Standard",[430,599,600],{},[574,601,602],{},"cubic-bezier(0.4, 0, 0.2, 1)",[430,604,605],{},"Movement and resizing of elements already on screen",[607,608],"motion-easing-compare",{},[362,610,611,612,615],{},"Entrances decelerate: they start fast, so the interface reads as responding instantly, then land softly. Exits accelerate: they get out of the way without ceremony. The built-in ",[574,613,614],{},"ease"," keyword is acceptable for hover and color changes.",[362,617,618,619,622,623,627,628,632],{},"Reserve ",[574,620,621],{},"linear"," for constant motion such as the ",[525,624,625],{"href":200},[380,626,199],{}," spinner or a ",[525,629,630],{"href":224},[380,631,223],{},". Everywhere else it feels rigid and mechanical. Never use a pure ease-in curve for an entrance; it delays feedback at the exact moment the user is watching most closely.",[369,634,636],{"id":635},"entering-and-exiting","Entering and exiting",[362,638,639,640,643],{},"Elements never appear from nothing or grow from a point. Pair a quick fade with a subtle scale from ",[574,641,642],{},"0.9",", so the element always has a visible shape:",[645,646],"motion-scale-entry",{},[362,648,649],{},"The canonical pattern for a Vue transition, including the reduced motion fallback:",[651,652,657],"pre",{"className":653,"code":654,"language":655,"meta":656,"style":656},"language-css shiki shiki-themes github-light github-dark-default github-dark-default",".panel-enter-active {\n  transition: opacity 250ms cubic-bezier(0.05, 0.7, 0.1, 1);\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition:\n      opacity 250ms cubic-bezier(0.05, 0.7, 0.1, 1),\n      scale 250ms cubic-bezier(0.05, 0.7, 0.1, 1);\n  }\n}\n\n.panel-leave-active {\n  transition: opacity 150ms cubic-bezier(0.3, 0, 0.8, 0.15);\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition:\n      opacity 150ms cubic-bezier(0.3, 0, 0.8, 0.15),\n      scale 150ms cubic-bezier(0.3, 0, 0.8, 0.15);\n  }\n}\n\n.panel-enter-from,\n.panel-leave-to {\n  opacity: 0;\n\n  @media (prefers-reduced-motion: no-preference) {\n    scale: 0.9;\n  }\n}\n","css","",[574,658,659,672,717,724,742,751,782,812,818,824,829,837,873,878,891,898,927,956,961,966,971,980,988,1002,1007,1020,1032,1037],{"__ignoreMap":656},[660,661,664,668],"span",{"class":662,"line":663},"line",1,[660,665,667],{"class":666},"srQ81",".panel-enter-active",[660,669,671],{"class":670},"sSgjj"," {\n",[660,673,675,679,682,685,689,692,695,698,701,704,706,709,711,714],{"class":662,"line":674},2,[660,676,678],{"class":677},"sfxXV","  transition",[660,680,681],{"class":670},": opacity ",[660,683,684],{"class":677},"250",[660,686,688],{"class":687},"sLfaJ","ms",[660,690,691],{"class":677}," cubic-bezier",[660,693,694],{"class":670},"(",[660,696,697],{"class":677},"0.05",[660,699,700],{"class":670},", ",[660,702,703],{"class":677},"0.7",[660,705,700],{"class":670},[660,707,708],{"class":677},"0.1",[660,710,700],{"class":670},[660,712,713],{"class":677},"1",[660,715,716],{"class":670},");\n",[660,718,720],{"class":662,"line":719},3,[660,721,723],{"emptyLinePlaceholder":722},true,"\n",[660,725,727,730,733,736,739],{"class":662,"line":726},4,[660,728,729],{"class":670},"  @",[660,731,732],{"class":677},"media",[660,734,735],{"class":670}," (",[660,737,738],{"class":677},"prefers-reduced-motion",[660,740,741],{"class":670},": no-preference) {\n",[660,743,745,748],{"class":662,"line":744},5,[660,746,747],{"class":677},"    transition",[660,749,750],{"class":670},":\n",[660,752,754,757,759,761,763,765,767,769,771,773,775,777,779],{"class":662,"line":753},6,[660,755,756],{"class":670},"      opacity ",[660,758,684],{"class":677},[660,760,688],{"class":687},[660,762,691],{"class":677},[660,764,694],{"class":670},[660,766,697],{"class":677},[660,768,700],{"class":670},[660,770,703],{"class":677},[660,772,700],{"class":670},[660,774,708],{"class":677},[660,776,700],{"class":670},[660,778,713],{"class":677},[660,780,781],{"class":670},"),\n",[660,783,785,788,790,792,794,796,798,800,802,804,806,808,810],{"class":662,"line":784},7,[660,786,787],{"class":670},"      scale ",[660,789,684],{"class":677},[660,791,688],{"class":687},[660,793,691],{"class":677},[660,795,694],{"class":670},[660,797,697],{"class":677},[660,799,700],{"class":670},[660,801,703],{"class":677},[660,803,700],{"class":670},[660,805,708],{"class":677},[660,807,700],{"class":670},[660,809,713],{"class":677},[660,811,716],{"class":670},[660,813,815],{"class":662,"line":814},8,[660,816,817],{"class":670},"  }\n",[660,819,821],{"class":662,"line":820},9,[660,822,823],{"class":670},"}\n",[660,825,827],{"class":662,"line":826},10,[660,828,723],{"emptyLinePlaceholder":722},[660,830,832,835],{"class":662,"line":831},11,[660,833,834],{"class":666},".panel-leave-active",[660,836,671],{"class":670},[660,838,840,842,844,847,849,851,853,856,858,861,863,866,868,871],{"class":662,"line":839},12,[660,841,678],{"class":677},[660,843,681],{"class":670},[660,845,846],{"class":677},"150",[660,848,688],{"class":687},[660,850,691],{"class":677},[660,852,694],{"class":670},[660,854,855],{"class":677},"0.3",[660,857,700],{"class":670},[660,859,860],{"class":677},"0",[660,862,700],{"class":670},[660,864,865],{"class":677},"0.8",[660,867,700],{"class":670},[660,869,870],{"class":677},"0.15",[660,872,716],{"class":670},[660,874,876],{"class":662,"line":875},13,[660,877,723],{"emptyLinePlaceholder":722},[660,879,881,883,885,887,889],{"class":662,"line":880},14,[660,882,729],{"class":670},[660,884,732],{"class":677},[660,886,735],{"class":670},[660,888,738],{"class":677},[660,890,741],{"class":670},[660,892,894,896],{"class":662,"line":893},15,[660,895,747],{"class":677},[660,897,750],{"class":670},[660,899,901,903,905,907,909,911,913,915,917,919,921,923,925],{"class":662,"line":900},16,[660,902,756],{"class":670},[660,904,846],{"class":677},[660,906,688],{"class":687},[660,908,691],{"class":677},[660,910,694],{"class":670},[660,912,855],{"class":677},[660,914,700],{"class":670},[660,916,860],{"class":677},[660,918,700],{"class":670},[660,920,865],{"class":677},[660,922,700],{"class":670},[660,924,870],{"class":677},[660,926,781],{"class":670},[660,928,930,932,934,936,938,940,942,944,946,948,950,952,954],{"class":662,"line":929},17,[660,931,787],{"class":670},[660,933,846],{"class":677},[660,935,688],{"class":687},[660,937,691],{"class":677},[660,939,694],{"class":670},[660,941,855],{"class":677},[660,943,700],{"class":670},[660,945,860],{"class":677},[660,947,700],{"class":670},[660,949,865],{"class":677},[660,951,700],{"class":670},[660,953,870],{"class":677},[660,955,716],{"class":670},[660,957,959],{"class":662,"line":958},18,[660,960,817],{"class":670},[660,962,964],{"class":662,"line":963},19,[660,965,823],{"class":670},[660,967,969],{"class":662,"line":968},20,[660,970,723],{"emptyLinePlaceholder":722},[660,972,974,977],{"class":662,"line":973},21,[660,975,976],{"class":666},".panel-enter-from",[660,978,979],{"class":670},",\n",[660,981,983,986],{"class":662,"line":982},22,[660,984,985],{"class":666},".panel-leave-to",[660,987,671],{"class":670},[660,989,991,994,997,999],{"class":662,"line":990},23,[660,992,993],{"class":677},"  opacity",[660,995,996],{"class":670},": ",[660,998,860],{"class":677},[660,1000,1001],{"class":670},";\n",[660,1003,1005],{"class":662,"line":1004},24,[660,1006,723],{"emptyLinePlaceholder":722},[660,1008,1010,1012,1014,1016,1018],{"class":662,"line":1009},25,[660,1011,729],{"class":670},[660,1013,732],{"class":677},[660,1015,735],{"class":670},[660,1017,738],{"class":677},[660,1019,741],{"class":670},[660,1021,1023,1026,1028,1030],{"class":662,"line":1022},26,[660,1024,1025],{"class":677},"    scale",[660,1027,996],{"class":670},[660,1029,642],{"class":677},[660,1031,1001],{"class":670},[660,1033,1035],{"class":662,"line":1034},27,[660,1036,817],{"class":670},[660,1038,1040],{"class":662,"line":1039},28,[660,1041,823],{"class":670},[374,1043,1044,1047,1064],{},[377,1045,1046],{},"Elements that move as a unit share timing. A modal and its backdrop, or a popover and its arrow, use identical duration and easing. Mismatched timing reads as broken.",[377,1048,1049,1050,1054,1055,1059,1060,1063],{},"Anchored elements such as a ",[525,1051,1052],{"href":220},[380,1053,219],{}," or ",[525,1056,1057],{"href":292},[380,1058,291],{}," scale from their trigger via ",[574,1061,1062],{},"transform-origin",", not from the center. Modals are the exception and stay centered.",[377,1065,1066],{},"Exits are quieter than entrances: a fade with a small scale or nudge, not a dramatic slide across the screen.",[369,1068,1070],{"id":1069},"implementation","Implementation",[374,1072,1073,1113,1120,1127],{},[377,1074,1075,1076,1079,1080,1083,1084,1087,1088,1091,1092,700,1095,700,1098,700,1101,1104,1105,1108,1109,1112],{},"Animate only ",[574,1077,1078],{},"transform"," (including ",[574,1081,1082],{},"translate"," and ",[574,1085,1086],{},"scale",") and ",[574,1089,1090],{},"opacity",". These run on the GPU and skip layout work. Never animate ",[574,1093,1094],{},"width",[574,1096,1097],{},"height",[574,1099,1100],{},"margin",[574,1102,1103],{},"padding",", or ",[574,1106,1107],{},"top","\u002F",[574,1110,1111],{},"left",".",[377,1114,1115,1116,1119],{},"Use CSS transitions for anything the user can toggle. Transitions retarget smoothly when interrupted mid-animation; keyframes restart from zero and look broken. Reserve ",[574,1117,1118],{},"@keyframes"," for loaders and one-shot sequences that always run to completion.",[377,1121,1122,1123,1126],{},"Name transition properties explicitly. ",[574,1124,1125],{},"transition: all"," picks up properties you never intended to animate and breaks silently when styles change.",[377,1128,1129],{},"Do not animate elements into place on initial page load. Save motion for state changes the user causes.",[1131,1132,1134,1156],"do-dont",{":vertical":1133},"true",[1135,1136,1137],"template",{"v-slot:do":656},[374,1138,1139,1147,1150,1153],{},[377,1140,1141,1142,1083,1144,1146],{},"Animate ",[574,1143,1078],{},[574,1145,1090],{}," with an explicit property list.",[377,1148,1149],{},"Use the decelerate curve for entrances and the accelerate curve for exits.",[377,1151,1152],{},"Keep every product UI animation at 400ms or less, with exits faster than entrances.",[377,1154,1155],{},"Give paired elements, like a modal and its backdrop, identical duration and easing.",[1135,1157,1158,1164,1176,1179],{"v-slot:dont":656},[377,1159,1160,1161,1163],{},"Write ",[574,1162,1125],{}," or inherit timing from a copied snippet.",[377,1165,1141,1166,700,1168,700,1170,1104,1172,1108,1174,1112],{},[574,1167,1094],{},[574,1169,1097],{},[574,1171,1100],{},[574,1173,1107],{},[574,1175,1111],{},[377,1177,1178],{},"Animate keyboard-initiated changes such as focus movement.",[377,1180,1181,1182,1185],{},"Enter from ",[574,1183,1184],{},"scale(0)"," or slide in from outside the viewport.",[369,1187,45],{"id":1188},"accessibility",[362,1190,1191,1192,1194,1195,700,1197,1199,1200,1203],{},"Respect ",[574,1193,738],{}," in every animation you ship. Reduced motion means removing movement, not removing feedback: drop ",[574,1196,1086],{},[574,1198,1082],{},", and other positional changes, and keep quick opacity or color fades that aid comprehension. The pattern in the code sample above gates all movement behind ",[574,1201,1202],{},"prefers-reduced-motion: no-preference",", which is the standard used across Meteor components.",[362,1205,1206],{},"Motion must never delay information. Move focus and trigger screen reader announcements when the state change starts, not after the animation finishes. Errors, confirmations, and focus indicators appear immediately.",[362,1208,1209],{},"Avoid flashing, rapid oscillation, and large sweeping movements across the viewport. They can cause discomfort and motion sickness regardless of the user's system settings.",[1211,1212,1213],"style",{},"html pre.shiki code .srQ81, html code.shiki .srQ81{--shiki-light:#6F42C1;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .sSgjj, html code.shiki .sSgjj{--shiki-light:#24292E;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .sfxXV, html code.shiki .sfxXV{--shiki-light:#005CC5;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .sLfaJ, html code.shiki .sLfaJ{--shiki-light:#D73A49;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":656,"searchDepth":674,"depth":674,"links":1215},[1216,1217,1218,1219,1220,1221,1222],{"id":371,"depth":674,"text":372},{"id":401,"depth":674,"text":402},{"id":480,"depth":674,"text":481},{"id":544,"depth":674,"text":545},{"id":635,"depth":674,"text":636},{"id":1069,"depth":674,"text":1070},{"id":1188,"depth":674,"text":45},"Timing, easing, and usage rules that keep motion in Meteor interfaces fast, purposeful, and almost invisible.","md",null,{},{"title":90,"description":1223},"akhPvJKza1Zq1LJBkZIPKK9BKE_spgBHEaH8YE6qZKI",[1230,1232],{"title":86,"path":87,"stem":88,"description":1231,"children":-1},"Meteor's icon set, built for consistency, clarity, and legibility across all sizes and themes.",{"title":99,"path":100,"stem":101,"description":1233,"children":-1},"Guidelines for Shopware's tone of voice, inclusive language, and writing conventions across product copy.",1787065081882]