[{"data":1,"prerenderedAt":1541},["ShallowReactive",2],{"navigation_docs":3,"-misc-utils":81,"-misc-utils-surround":303,"preview-examples/misc/StaggerDemo.vue":306,"preview-examples/misc/SnapDemo.vue":307,"mdc-wba2cm-key":308,"mdc--4bp0z8-key":939},[4,25,63],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/getting-started","1.getting-started",[10,15,20],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","/getting-started/introduction","1.getting-started/1.introduction","i-lucide-info",{"title":16,"path":17,"stem":18,"icon":19},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Configuration","/getting-started/configuration","1.getting-started/3.configuration","i-lucide-settings",{"title":26,"path":27,"stem":28,"children":29},"Composables","/composables","2.composables",[30,33,38,43,48,53,58],{"title":11,"path":27,"stem":31,"icon":32},"2.composables/index","i-lucide-box",{"title":34,"path":35,"stem":36,"icon":37},"useAnimate","/composables/use-animate","2.composables/1.use-animate","i-ph-play-circle",{"title":39,"path":40,"stem":41,"icon":42},"useWaapiAnimate","/composables/use-waapi-animate","2.composables/2.use-waapi-animate","i-ph-lightning",{"title":44,"path":45,"stem":46,"icon":47},"useAnimatable","/composables/use-animatable","2.composables/3.use-animatable","i-ph-cube",{"title":49,"path":50,"stem":51,"icon":52},"useSplitText","/composables/use-split-text","2.composables/4.use-split-text","i-ph-text-t",{"title":54,"path":55,"stem":56,"icon":57},"useLayout","/composables/use-layout","2.composables/5.use-layout","i-ph-layout",{"title":59,"path":60,"stem":61,"icon":62},"useDraggable","/composables/use-draggable","2.composables/6.use-draggable","i-ph-hand-grabbing",{"title":64,"path":65,"stem":66,"children":67},"Misc","/misc","4.misc",[68,71,76],{"title":11,"path":65,"stem":69,"icon":70},"4.misc/index","i-ph-puzzle-piece",{"title":72,"path":73,"stem":74,"icon":75},"Easings","/misc/easings","4.misc/1.easings","i-ph-chart-line",{"title":77,"path":78,"stem":79,"icon":80},"Utils","/misc/utils","4.misc/2.utils","i-ph-wrench",{"id":82,"title":77,"body":83,"description":296,"extension":297,"links":298,"meta":299,"navigation":300,"path":78,"seo":301,"stem":79,"__hash__":302},"docs/4.misc/2.utils.md",{"type":84,"value":85,"toc":290},"minimark",[86,93,109,229,234,242,247,251,254,261,275,278,286],[87,88,89],"blockquote",{},[90,91,92],"p",{},"A collection of utility functions for common animation tasks that can also serve as modifier functions.",[90,94,95,96,103,104,108],{},"You can access all utils provided by ",[97,98,102],"a",{"href":99,"rel":100},"https://animejs.com/documentation/utilities",[101],"nofollow","AnimeJS"," via ",[105,106,107],"code",{},"#nanime/utils",".",[110,111,116],"pre",{"className":112,"code":113,"language":114,"meta":115,"style":115},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { snap, lerp, mapRange } from '#nanime/utils'\n\nsnap(30)\nlerp(0, 100)\nmapRange(0, 100, 0, 200)\n","ts","",[105,117,118,161,168,185,203],{"__ignoreMap":115},[119,120,123,127,131,135,138,141,143,146,149,152,155,158],"span",{"class":121,"line":122},"line",1,[119,124,126],{"class":125},"s7zQu","import",[119,128,130],{"class":129},"sMK4o"," {",[119,132,134],{"class":133},"sTEyZ"," snap",[119,136,137],{"class":129},",",[119,139,140],{"class":133}," lerp",[119,142,137],{"class":129},[119,144,145],{"class":133}," mapRange",[119,147,148],{"class":129}," }",[119,150,151],{"class":125}," from",[119,153,154],{"class":129}," '",[119,156,107],{"class":157},"sfazB",[119,159,160],{"class":129},"'\n",[119,162,164],{"class":121,"line":163},2,[119,165,167],{"emptyLinePlaceholder":166},true,"\n",[119,169,171,175,178,182],{"class":121,"line":170},3,[119,172,174],{"class":173},"s2Zo4","snap",[119,176,177],{"class":133},"(",[119,179,181],{"class":180},"sbssI","30",[119,183,184],{"class":133},")\n",[119,186,188,191,193,196,198,201],{"class":121,"line":187},4,[119,189,190],{"class":173},"lerp",[119,192,177],{"class":133},[119,194,195],{"class":180},"0",[119,197,137],{"class":129},[119,199,200],{"class":180}," 100",[119,202,184],{"class":133},[119,204,206,209,211,213,215,217,219,222,224,227],{"class":121,"line":205},5,[119,207,208],{"class":173},"mapRange",[119,210,177],{"class":133},[119,212,195],{"class":180},[119,214,137],{"class":129},[119,216,200],{"class":180},[119,218,137],{"class":129},[119,220,221],{"class":180}," 0",[119,223,137],{"class":129},[119,225,226],{"class":180}," 200",[119,228,184],{"class":133},[230,231,233],"h2",{"id":232},"stagger","Stagger",[90,235,236,241],{},[97,237,240],{"href":238,"rel":239},"https://animejs.com/documentation/utilities/stagger",[101],"stagger()"," allows you to create staggering effects for your animations.",[243,244,246],"h3",{"id":245},"sample-usage","Sample usage",[248,249],"render-code-block-preview",{"src":250},"examples/misc/StaggerDemo.vue",[230,252,253],{"id":174},"Snap",[90,255,256],{},[97,257,260],{"href":258,"rel":259},"https://animejs.com/documentation/utilities/snap",[101],"snap()",[87,262,263],{},[90,264,265,266,274],{},"Rounds a Number to the nearest specified increment or creates a snapping ",[105,267,270],{"className":268,"language":269,"style":115},"language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts-type",[119,271,273],{"class":272},"sBMFI","Function"," with a pre-defined increment parameter.",[248,276],{"src":277},"examples/misc/SnapDemo.vue",[90,279,280,281,285],{},"See ",[97,282,284],{"href":99,"rel":283},[101],"AnimeJS Utilities documentation"," for more.",[287,288,289],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":115,"searchDepth":163,"depth":163,"links":291},[292,295],{"id":232,"depth":163,"text":233,"children":293},[294],{"id":245,"depth":170,"text":246},{"id":174,"depth":163,"text":253},"Guide on how to utilize exposed animejs utils","md",null,{},{"icon":80},{"title":77,"description":296},"TslFGVPGCHlGiDpgmbwbRBogbbhIu2uQ8VrJuuosZ-c",[304,298],{"title":72,"path":73,"stem":74,"description":305,"icon":75,"children":-1},"Documentation for available easings.","\n::code-group\n```ts [Script]\nimport { stagger } from '#nanime/utils'\n\nconst items = useTemplateRef('items')\n\nuseAnimate(items, {\n  opacity: [0, 1],\n  scale: [0.5, 1],\n  delay: stagger(100, { grid: [9, 1], from: 'center' }),\n  duration: 800,\n  ease: 'outElastic(1, .5)',\n  loop: true,\n  alternate: true,\n})\n```\n\n```vue [Template]\n\u003Ctemplate>\n  \u003Cdiv class=\"flex gap-2.5\">\n    \u003Cdiv v-for=\"i in 9\" :key=\"i\" ref=\"items\" class=\"simple-box opacity-0 w-8\" />\n  \u003C/div>\n\u003C/template>\n```\n\n\n::\n\n::stagger-demo\n::\n\n::u-button\n---\nto: https://github.com/astraldev/nanime/blob/main/docs/app/components/content/examples/misc/StaggerDemo.vue\ntarget: _blank\nvariant: link\ncolor: neutral\nicon: i-simple-icons-github\nclass: mt-2.5 pl-0.5\n---\nView on GitHub\n::\n","\n::code-group\n```ts [Script]\nimport { snap } from '#nanime/utils'\nimport type { AnimationParams } from '#nanime/types'\n\nconst defaults: AnimationParams = {\n  x: { to: 300 },\n  duration: 3000,\n  loop: true,\n  alternate: true,\n  ease: 'outBack',\n}\n\nuseAnimate('.normal', defaults)\nuseAnimate('.snapped', {\n  ...defaults,\n  modifier: snap(30),\n})\n```\n\n```vue [Template]\n\u003Ctemplate>\n  \u003Cdiv class=\"flex gap-4 flex-col\">\n    \u003Cdiv class=\"simple-box normal w-8\" />\n\n    \u003Cdiv class=\"simple-box snapped w-8\" />\n  \u003C/div>\n\u003C/template>\n```\n\n\n::\n\n::snap-demo\n::\n\n::u-button\n---\nto: https://github.com/astraldev/nanime/blob/main/docs/app/components/content/examples/misc/SnapDemo.vue\ntarget: _blank\nvariant: link\ncolor: neutral\nicon: i-simple-icons-github\nclass: mt-2.5 pl-0.5\n---\nView on GitHub\n::\n",{"data":309,"body":310},{},{"type":311,"children":312},"root",[313,916,920,934],{"type":314,"tag":315,"props":316,"children":317},"element","code-group",{},[318,734],{"type":314,"tag":110,"props":319,"children":322},{"className":112,"code":320,"filename":321,"language":114,"meta":115,"style":115},"import { snap } from '#nanime/utils'\nimport type { AnimationParams } from '#nanime/types'\n\nconst defaults: AnimationParams = {\n  x: { to: 300 },\n  duration: 3000,\n  loop: true,\n  alternate: true,\n  ease: 'outBack',\n}\n\nuseAnimate('.normal', defaults)\nuseAnimate('.snapped', {\n  ...defaults,\n  modifier: snap(30),\n})\n","Script",[323],{"type":314,"tag":105,"props":324,"children":325},{"__ignoreMap":115},[326,366,408,415,449,486,509,532,553,584,593,601,636,669,687,721],{"type":314,"tag":119,"props":327,"children":328},{"class":121,"line":122},[329,335,340,345,349,353,357,362],{"type":314,"tag":119,"props":330,"children":332},{"style":331},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[333],{"type":334,"value":126},"text",{"type":314,"tag":119,"props":336,"children":338},{"style":337},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[339],{"type":334,"value":130},{"type":314,"tag":119,"props":341,"children":343},{"style":342},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[344],{"type":334,"value":134},{"type":314,"tag":119,"props":346,"children":347},{"style":337},[348],{"type":334,"value":148},{"type":314,"tag":119,"props":350,"children":351},{"style":331},[352],{"type":334,"value":151},{"type":314,"tag":119,"props":354,"children":355},{"style":337},[356],{"type":334,"value":154},{"type":314,"tag":119,"props":358,"children":360},{"style":359},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[361],{"type":334,"value":107},{"type":314,"tag":119,"props":363,"children":364},{"style":337},[365],{"type":334,"value":160},{"type":314,"tag":119,"props":367,"children":368},{"class":121,"line":163},[369,373,378,382,387,391,395,399,404],{"type":314,"tag":119,"props":370,"children":371},{"style":331},[372],{"type":334,"value":126},{"type":314,"tag":119,"props":374,"children":375},{"style":331},[376],{"type":334,"value":377}," type",{"type":314,"tag":119,"props":379,"children":380},{"style":337},[381],{"type":334,"value":130},{"type":314,"tag":119,"props":383,"children":384},{"style":342},[385],{"type":334,"value":386}," AnimationParams",{"type":314,"tag":119,"props":388,"children":389},{"style":337},[390],{"type":334,"value":148},{"type":314,"tag":119,"props":392,"children":393},{"style":331},[394],{"type":334,"value":151},{"type":314,"tag":119,"props":396,"children":397},{"style":337},[398],{"type":334,"value":154},{"type":314,"tag":119,"props":400,"children":401},{"style":359},[402],{"type":334,"value":403},"#nanime/types",{"type":314,"tag":119,"props":405,"children":406},{"style":337},[407],{"type":334,"value":160},{"type":314,"tag":119,"props":409,"children":410},{"class":121,"line":170},[411],{"type":314,"tag":119,"props":412,"children":413},{"emptyLinePlaceholder":166},[414],{"type":334,"value":167},{"type":314,"tag":119,"props":416,"children":417},{"class":121,"line":187},[418,424,429,434,439,444],{"type":314,"tag":119,"props":419,"children":421},{"style":420},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[422],{"type":334,"value":423},"const",{"type":314,"tag":119,"props":425,"children":426},{"style":342},[427],{"type":334,"value":428}," defaults",{"type":314,"tag":119,"props":430,"children":431},{"style":337},[432],{"type":334,"value":433},":",{"type":314,"tag":119,"props":435,"children":437},{"style":436},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[438],{"type":334,"value":386},{"type":314,"tag":119,"props":440,"children":441},{"style":337},[442],{"type":334,"value":443}," =",{"type":314,"tag":119,"props":445,"children":446},{"style":337},[447],{"type":334,"value":448}," {\n",{"type":314,"tag":119,"props":450,"children":451},{"class":121,"line":205},[452,458,462,466,471,475,481],{"type":314,"tag":119,"props":453,"children":455},{"style":454},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[456],{"type":334,"value":457},"  x",{"type":314,"tag":119,"props":459,"children":460},{"style":337},[461],{"type":334,"value":433},{"type":314,"tag":119,"props":463,"children":464},{"style":337},[465],{"type":334,"value":130},{"type":314,"tag":119,"props":467,"children":468},{"style":454},[469],{"type":334,"value":470}," to",{"type":314,"tag":119,"props":472,"children":473},{"style":337},[474],{"type":334,"value":433},{"type":314,"tag":119,"props":476,"children":478},{"style":477},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[479],{"type":334,"value":480}," 300",{"type":314,"tag":119,"props":482,"children":483},{"style":337},[484],{"type":334,"value":485}," },\n",{"type":314,"tag":119,"props":487,"children":489},{"class":121,"line":488},6,[490,495,499,504],{"type":314,"tag":119,"props":491,"children":492},{"style":454},[493],{"type":334,"value":494},"  duration",{"type":314,"tag":119,"props":496,"children":497},{"style":337},[498],{"type":334,"value":433},{"type":314,"tag":119,"props":500,"children":501},{"style":477},[502],{"type":334,"value":503}," 3000",{"type":314,"tag":119,"props":505,"children":506},{"style":337},[507],{"type":334,"value":508},",\n",{"type":314,"tag":119,"props":510,"children":512},{"class":121,"line":511},7,[513,518,522,528],{"type":314,"tag":119,"props":514,"children":515},{"style":454},[516],{"type":334,"value":517},"  loop",{"type":314,"tag":119,"props":519,"children":520},{"style":337},[521],{"type":334,"value":433},{"type":314,"tag":119,"props":523,"children":525},{"style":524},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[526],{"type":334,"value":527}," true",{"type":314,"tag":119,"props":529,"children":530},{"style":337},[531],{"type":334,"value":508},{"type":314,"tag":119,"props":533,"children":535},{"class":121,"line":534},8,[536,541,545,549],{"type":314,"tag":119,"props":537,"children":538},{"style":454},[539],{"type":334,"value":540},"  alternate",{"type":314,"tag":119,"props":542,"children":543},{"style":337},[544],{"type":334,"value":433},{"type":314,"tag":119,"props":546,"children":547},{"style":524},[548],{"type":334,"value":527},{"type":314,"tag":119,"props":550,"children":551},{"style":337},[552],{"type":334,"value":508},{"type":314,"tag":119,"props":554,"children":556},{"class":121,"line":555},9,[557,562,566,570,575,580],{"type":314,"tag":119,"props":558,"children":559},{"style":454},[560],{"type":334,"value":561},"  ease",{"type":314,"tag":119,"props":563,"children":564},{"style":337},[565],{"type":334,"value":433},{"type":314,"tag":119,"props":567,"children":568},{"style":337},[569],{"type":334,"value":154},{"type":314,"tag":119,"props":571,"children":572},{"style":359},[573],{"type":334,"value":574},"outBack",{"type":314,"tag":119,"props":576,"children":577},{"style":337},[578],{"type":334,"value":579},"'",{"type":314,"tag":119,"props":581,"children":582},{"style":337},[583],{"type":334,"value":508},{"type":314,"tag":119,"props":585,"children":587},{"class":121,"line":586},10,[588],{"type":314,"tag":119,"props":589,"children":590},{"style":337},[591],{"type":334,"value":592},"}\n",{"type":314,"tag":119,"props":594,"children":596},{"class":121,"line":595},11,[597],{"type":314,"tag":119,"props":598,"children":599},{"emptyLinePlaceholder":166},[600],{"type":334,"value":167},{"type":314,"tag":119,"props":602,"children":604},{"class":121,"line":603},12,[605,610,614,618,623,627,631],{"type":314,"tag":119,"props":606,"children":608},{"style":607},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[609],{"type":334,"value":34},{"type":314,"tag":119,"props":611,"children":612},{"style":342},[613],{"type":334,"value":177},{"type":314,"tag":119,"props":615,"children":616},{"style":337},[617],{"type":334,"value":579},{"type":314,"tag":119,"props":619,"children":620},{"style":359},[621],{"type":334,"value":622},".normal",{"type":314,"tag":119,"props":624,"children":625},{"style":337},[626],{"type":334,"value":579},{"type":314,"tag":119,"props":628,"children":629},{"style":337},[630],{"type":334,"value":137},{"type":314,"tag":119,"props":632,"children":633},{"style":342},[634],{"type":334,"value":635}," defaults)\n",{"type":314,"tag":119,"props":637,"children":639},{"class":121,"line":638},13,[640,644,648,652,657,661,665],{"type":314,"tag":119,"props":641,"children":642},{"style":607},[643],{"type":334,"value":34},{"type":314,"tag":119,"props":645,"children":646},{"style":342},[647],{"type":334,"value":177},{"type":314,"tag":119,"props":649,"children":650},{"style":337},[651],{"type":334,"value":579},{"type":314,"tag":119,"props":653,"children":654},{"style":359},[655],{"type":334,"value":656},".snapped",{"type":314,"tag":119,"props":658,"children":659},{"style":337},[660],{"type":334,"value":579},{"type":314,"tag":119,"props":662,"children":663},{"style":337},[664],{"type":334,"value":137},{"type":314,"tag":119,"props":666,"children":667},{"style":337},[668],{"type":334,"value":448},{"type":314,"tag":119,"props":670,"children":672},{"class":121,"line":671},14,[673,678,683],{"type":314,"tag":119,"props":674,"children":675},{"style":337},[676],{"type":334,"value":677},"  ...",{"type":314,"tag":119,"props":679,"children":680},{"style":342},[681],{"type":334,"value":682},"defaults",{"type":314,"tag":119,"props":684,"children":685},{"style":337},[686],{"type":334,"value":508},{"type":314,"tag":119,"props":688,"children":690},{"class":121,"line":689},15,[691,696,700,704,708,712,717],{"type":314,"tag":119,"props":692,"children":693},{"style":454},[694],{"type":334,"value":695},"  modifier",{"type":314,"tag":119,"props":697,"children":698},{"style":337},[699],{"type":334,"value":433},{"type":314,"tag":119,"props":701,"children":702},{"style":607},[703],{"type":334,"value":134},{"type":314,"tag":119,"props":705,"children":706},{"style":342},[707],{"type":334,"value":177},{"type":314,"tag":119,"props":709,"children":710},{"style":477},[711],{"type":334,"value":181},{"type":314,"tag":119,"props":713,"children":714},{"style":342},[715],{"type":334,"value":716},")",{"type":314,"tag":119,"props":718,"children":719},{"style":337},[720],{"type":334,"value":508},{"type":314,"tag":119,"props":722,"children":724},{"class":121,"line":723},16,[725,730],{"type":314,"tag":119,"props":726,"children":727},{"style":337},[728],{"type":334,"value":729},"}",{"type":314,"tag":119,"props":731,"children":732},{"style":342},[733],{"type":334,"value":184},{"type":314,"tag":110,"props":735,"children":740},{"className":736,"code":737,"filename":738,"language":739,"meta":115,"style":115},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"flex gap-4 flex-col\">\n    \u003Cdiv class=\"simple-box normal w-8\" />\n\n    \u003Cdiv class=\"simple-box snapped w-8\" />\n  \u003C/div>\n\u003C/template>\n","Template","vue",[741],{"type":314,"tag":105,"props":742,"children":743},{"__ignoreMap":115},[744,762,803,841,848,884,900],{"type":314,"tag":119,"props":745,"children":746},{"class":121,"line":122},[747,752,757],{"type":314,"tag":119,"props":748,"children":749},{"style":337},[750],{"type":334,"value":751},"\u003C",{"type":314,"tag":119,"props":753,"children":754},{"style":454},[755],{"type":334,"value":756},"template",{"type":314,"tag":119,"props":758,"children":759},{"style":337},[760],{"type":334,"value":761},">\n",{"type":314,"tag":119,"props":763,"children":764},{"class":121,"line":163},[765,770,775,780,785,790,795,799],{"type":314,"tag":119,"props":766,"children":767},{"style":337},[768],{"type":334,"value":769},"  \u003C",{"type":314,"tag":119,"props":771,"children":772},{"style":454},[773],{"type":334,"value":774},"div",{"type":314,"tag":119,"props":776,"children":777},{"style":420},[778],{"type":334,"value":779}," class",{"type":314,"tag":119,"props":781,"children":782},{"style":337},[783],{"type":334,"value":784},"=",{"type":314,"tag":119,"props":786,"children":787},{"style":337},[788],{"type":334,"value":789},"\"",{"type":314,"tag":119,"props":791,"children":792},{"style":359},[793],{"type":334,"value":794},"flex gap-4 flex-col",{"type":314,"tag":119,"props":796,"children":797},{"style":337},[798],{"type":334,"value":789},{"type":314,"tag":119,"props":800,"children":801},{"style":337},[802],{"type":334,"value":761},{"type":314,"tag":119,"props":804,"children":805},{"class":121,"line":170},[806,811,815,819,823,827,832,836],{"type":314,"tag":119,"props":807,"children":808},{"style":337},[809],{"type":334,"value":810},"    \u003C",{"type":314,"tag":119,"props":812,"children":813},{"style":454},[814],{"type":334,"value":774},{"type":314,"tag":119,"props":816,"children":817},{"style":420},[818],{"type":334,"value":779},{"type":314,"tag":119,"props":820,"children":821},{"style":337},[822],{"type":334,"value":784},{"type":314,"tag":119,"props":824,"children":825},{"style":337},[826],{"type":334,"value":789},{"type":314,"tag":119,"props":828,"children":829},{"style":359},[830],{"type":334,"value":831},"simple-box normal w-8",{"type":314,"tag":119,"props":833,"children":834},{"style":337},[835],{"type":334,"value":789},{"type":314,"tag":119,"props":837,"children":838},{"style":337},[839],{"type":334,"value":840}," />\n",{"type":314,"tag":119,"props":842,"children":843},{"class":121,"line":187},[844],{"type":314,"tag":119,"props":845,"children":846},{"emptyLinePlaceholder":166},[847],{"type":334,"value":167},{"type":314,"tag":119,"props":849,"children":850},{"class":121,"line":205},[851,855,859,863,867,871,876,880],{"type":314,"tag":119,"props":852,"children":853},{"style":337},[854],{"type":334,"value":810},{"type":314,"tag":119,"props":856,"children":857},{"style":454},[858],{"type":334,"value":774},{"type":314,"tag":119,"props":860,"children":861},{"style":420},[862],{"type":334,"value":779},{"type":314,"tag":119,"props":864,"children":865},{"style":337},[866],{"type":334,"value":784},{"type":314,"tag":119,"props":868,"children":869},{"style":337},[870],{"type":334,"value":789},{"type":314,"tag":119,"props":872,"children":873},{"style":359},[874],{"type":334,"value":875},"simple-box snapped w-8",{"type":314,"tag":119,"props":877,"children":878},{"style":337},[879],{"type":334,"value":789},{"type":314,"tag":119,"props":881,"children":882},{"style":337},[883],{"type":334,"value":840},{"type":314,"tag":119,"props":885,"children":886},{"class":121,"line":488},[887,892,896],{"type":314,"tag":119,"props":888,"children":889},{"style":337},[890],{"type":334,"value":891},"  \u003C/",{"type":314,"tag":119,"props":893,"children":894},{"style":454},[895],{"type":334,"value":774},{"type":314,"tag":119,"props":897,"children":898},{"style":337},[899],{"type":334,"value":761},{"type":314,"tag":119,"props":901,"children":902},{"class":121,"line":511},[903,908,912],{"type":314,"tag":119,"props":904,"children":905},{"style":337},[906],{"type":334,"value":907},"\u003C/",{"type":314,"tag":119,"props":909,"children":910},{"style":454},[911],{"type":334,"value":756},{"type":314,"tag":119,"props":913,"children":914},{"style":337},[915],{"type":334,"value":761},{"type":314,"tag":917,"props":918,"children":919},"snap-demo",{},[],{"type":314,"tag":921,"props":922,"children":931},"u-button",{"className":923,"color":926,"icon":927,"target":928,"to":929,"variant":930},[924,925],"mt-2.5","pl-0.5","neutral","i-simple-icons-github","_blank","https://github.com/astraldev/nanime/blob/main/docs/app/components/content/examples/misc/SnapDemo.vue","link",[932],{"type":334,"value":933},"View on GitHub",{"type":314,"tag":287,"props":935,"children":936},{},[937],{"type":334,"value":938},"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);}",{"data":940,"body":941},{},{"type":311,"children":942},[943,1527,1531,1537],{"type":314,"tag":315,"props":944,"children":945},{},[946,1338],{"type":314,"tag":110,"props":947,"children":949},{"className":112,"code":948,"filename":321,"language":114,"meta":115,"style":115},"import { stagger } from '#nanime/utils'\n\nconst items = useTemplateRef('items')\n\nuseAnimate(items, {\n  opacity: [0, 1],\n  scale: [0.5, 1],\n  delay: stagger(100, { grid: [9, 1], from: 'center' }),\n  duration: 800,\n  ease: 'outElastic(1, .5)',\n  loop: true,\n  alternate: true,\n})\n",[950],{"type":314,"tag":105,"props":951,"children":952},{"__ignoreMap":115},[953,989,996,1038,1045,1065,1104,1141,1241,1261,1289,1308,1327],{"type":314,"tag":119,"props":954,"children":955},{"class":121,"line":122},[956,960,964,969,973,977,981,985],{"type":314,"tag":119,"props":957,"children":958},{"style":331},[959],{"type":334,"value":126},{"type":314,"tag":119,"props":961,"children":962},{"style":337},[963],{"type":334,"value":130},{"type":314,"tag":119,"props":965,"children":966},{"style":342},[967],{"type":334,"value":968}," stagger",{"type":314,"tag":119,"props":970,"children":971},{"style":337},[972],{"type":334,"value":148},{"type":314,"tag":119,"props":974,"children":975},{"style":331},[976],{"type":334,"value":151},{"type":314,"tag":119,"props":978,"children":979},{"style":337},[980],{"type":334,"value":154},{"type":314,"tag":119,"props":982,"children":983},{"style":359},[984],{"type":334,"value":107},{"type":314,"tag":119,"props":986,"children":987},{"style":337},[988],{"type":334,"value":160},{"type":314,"tag":119,"props":990,"children":991},{"class":121,"line":163},[992],{"type":314,"tag":119,"props":993,"children":994},{"emptyLinePlaceholder":166},[995],{"type":334,"value":167},{"type":314,"tag":119,"props":997,"children":998},{"class":121,"line":170},[999,1003,1008,1012,1017,1021,1025,1030,1034],{"type":314,"tag":119,"props":1000,"children":1001},{"style":420},[1002],{"type":334,"value":423},{"type":314,"tag":119,"props":1004,"children":1005},{"style":342},[1006],{"type":334,"value":1007}," items ",{"type":314,"tag":119,"props":1009,"children":1010},{"style":337},[1011],{"type":334,"value":784},{"type":314,"tag":119,"props":1013,"children":1014},{"style":607},[1015],{"type":334,"value":1016}," useTemplateRef",{"type":314,"tag":119,"props":1018,"children":1019},{"style":342},[1020],{"type":334,"value":177},{"type":314,"tag":119,"props":1022,"children":1023},{"style":337},[1024],{"type":334,"value":579},{"type":314,"tag":119,"props":1026,"children":1027},{"style":359},[1028],{"type":334,"value":1029},"items",{"type":314,"tag":119,"props":1031,"children":1032},{"style":337},[1033],{"type":334,"value":579},{"type":314,"tag":119,"props":1035,"children":1036},{"style":342},[1037],{"type":334,"value":184},{"type":314,"tag":119,"props":1039,"children":1040},{"class":121,"line":187},[1041],{"type":314,"tag":119,"props":1042,"children":1043},{"emptyLinePlaceholder":166},[1044],{"type":334,"value":167},{"type":314,"tag":119,"props":1046,"children":1047},{"class":121,"line":205},[1048,1052,1057,1061],{"type":314,"tag":119,"props":1049,"children":1050},{"style":607},[1051],{"type":334,"value":34},{"type":314,"tag":119,"props":1053,"children":1054},{"style":342},[1055],{"type":334,"value":1056},"(items",{"type":314,"tag":119,"props":1058,"children":1059},{"style":337},[1060],{"type":334,"value":137},{"type":314,"tag":119,"props":1062,"children":1063},{"style":337},[1064],{"type":334,"value":448},{"type":314,"tag":119,"props":1066,"children":1067},{"class":121,"line":488},[1068,1073,1077,1082,1086,1090,1095,1100],{"type":314,"tag":119,"props":1069,"children":1070},{"style":454},[1071],{"type":334,"value":1072},"  opacity",{"type":314,"tag":119,"props":1074,"children":1075},{"style":337},[1076],{"type":334,"value":433},{"type":314,"tag":119,"props":1078,"children":1079},{"style":342},[1080],{"type":334,"value":1081}," [",{"type":314,"tag":119,"props":1083,"children":1084},{"style":477},[1085],{"type":334,"value":195},{"type":314,"tag":119,"props":1087,"children":1088},{"style":337},[1089],{"type":334,"value":137},{"type":314,"tag":119,"props":1091,"children":1092},{"style":477},[1093],{"type":334,"value":1094}," 1",{"type":314,"tag":119,"props":1096,"children":1097},{"style":342},[1098],{"type":334,"value":1099},"]",{"type":314,"tag":119,"props":1101,"children":1102},{"style":337},[1103],{"type":334,"value":508},{"type":314,"tag":119,"props":1105,"children":1106},{"class":121,"line":511},[1107,1112,1116,1120,1125,1129,1133,1137],{"type":314,"tag":119,"props":1108,"children":1109},{"style":454},[1110],{"type":334,"value":1111},"  scale",{"type":314,"tag":119,"props":1113,"children":1114},{"style":337},[1115],{"type":334,"value":433},{"type":314,"tag":119,"props":1117,"children":1118},{"style":342},[1119],{"type":334,"value":1081},{"type":314,"tag":119,"props":1121,"children":1122},{"style":477},[1123],{"type":334,"value":1124},"0.5",{"type":314,"tag":119,"props":1126,"children":1127},{"style":337},[1128],{"type":334,"value":137},{"type":314,"tag":119,"props":1130,"children":1131},{"style":477},[1132],{"type":334,"value":1094},{"type":314,"tag":119,"props":1134,"children":1135},{"style":342},[1136],{"type":334,"value":1099},{"type":314,"tag":119,"props":1138,"children":1139},{"style":337},[1140],{"type":334,"value":508},{"type":314,"tag":119,"props":1142,"children":1143},{"class":121,"line":534},[1144,1149,1153,1157,1161,1166,1170,1174,1179,1183,1187,1192,1196,1200,1204,1208,1212,1216,1220,1225,1229,1233,1237],{"type":314,"tag":119,"props":1145,"children":1146},{"style":454},[1147],{"type":334,"value":1148},"  delay",{"type":314,"tag":119,"props":1150,"children":1151},{"style":337},[1152],{"type":334,"value":433},{"type":314,"tag":119,"props":1154,"children":1155},{"style":607},[1156],{"type":334,"value":968},{"type":314,"tag":119,"props":1158,"children":1159},{"style":342},[1160],{"type":334,"value":177},{"type":314,"tag":119,"props":1162,"children":1163},{"style":477},[1164],{"type":334,"value":1165},"100",{"type":314,"tag":119,"props":1167,"children":1168},{"style":337},[1169],{"type":334,"value":137},{"type":314,"tag":119,"props":1171,"children":1172},{"style":337},[1173],{"type":334,"value":130},{"type":314,"tag":119,"props":1175,"children":1176},{"style":454},[1177],{"type":334,"value":1178}," grid",{"type":314,"tag":119,"props":1180,"children":1181},{"style":337},[1182],{"type":334,"value":433},{"type":314,"tag":119,"props":1184,"children":1185},{"style":342},[1186],{"type":334,"value":1081},{"type":314,"tag":119,"props":1188,"children":1189},{"style":477},[1190],{"type":334,"value":1191},"9",{"type":314,"tag":119,"props":1193,"children":1194},{"style":337},[1195],{"type":334,"value":137},{"type":314,"tag":119,"props":1197,"children":1198},{"style":477},[1199],{"type":334,"value":1094},{"type":314,"tag":119,"props":1201,"children":1202},{"style":342},[1203],{"type":334,"value":1099},{"type":314,"tag":119,"props":1205,"children":1206},{"style":337},[1207],{"type":334,"value":137},{"type":314,"tag":119,"props":1209,"children":1210},{"style":454},[1211],{"type":334,"value":151},{"type":314,"tag":119,"props":1213,"children":1214},{"style":337},[1215],{"type":334,"value":433},{"type":314,"tag":119,"props":1217,"children":1218},{"style":337},[1219],{"type":334,"value":154},{"type":314,"tag":119,"props":1221,"children":1222},{"style":359},[1223],{"type":334,"value":1224},"center",{"type":314,"tag":119,"props":1226,"children":1227},{"style":337},[1228],{"type":334,"value":579},{"type":314,"tag":119,"props":1230,"children":1231},{"style":337},[1232],{"type":334,"value":148},{"type":314,"tag":119,"props":1234,"children":1235},{"style":342},[1236],{"type":334,"value":716},{"type":314,"tag":119,"props":1238,"children":1239},{"style":337},[1240],{"type":334,"value":508},{"type":314,"tag":119,"props":1242,"children":1243},{"class":121,"line":555},[1244,1248,1252,1257],{"type":314,"tag":119,"props":1245,"children":1246},{"style":454},[1247],{"type":334,"value":494},{"type":314,"tag":119,"props":1249,"children":1250},{"style":337},[1251],{"type":334,"value":433},{"type":314,"tag":119,"props":1253,"children":1254},{"style":477},[1255],{"type":334,"value":1256}," 800",{"type":314,"tag":119,"props":1258,"children":1259},{"style":337},[1260],{"type":334,"value":508},{"type":314,"tag":119,"props":1262,"children":1263},{"class":121,"line":586},[1264,1268,1272,1276,1281,1285],{"type":314,"tag":119,"props":1265,"children":1266},{"style":454},[1267],{"type":334,"value":561},{"type":314,"tag":119,"props":1269,"children":1270},{"style":337},[1271],{"type":334,"value":433},{"type":314,"tag":119,"props":1273,"children":1274},{"style":337},[1275],{"type":334,"value":154},{"type":314,"tag":119,"props":1277,"children":1278},{"style":359},[1279],{"type":334,"value":1280},"outElastic(1, .5)",{"type":314,"tag":119,"props":1282,"children":1283},{"style":337},[1284],{"type":334,"value":579},{"type":314,"tag":119,"props":1286,"children":1287},{"style":337},[1288],{"type":334,"value":508},{"type":314,"tag":119,"props":1290,"children":1291},{"class":121,"line":595},[1292,1296,1300,1304],{"type":314,"tag":119,"props":1293,"children":1294},{"style":454},[1295],{"type":334,"value":517},{"type":314,"tag":119,"props":1297,"children":1298},{"style":337},[1299],{"type":334,"value":433},{"type":314,"tag":119,"props":1301,"children":1302},{"style":524},[1303],{"type":334,"value":527},{"type":314,"tag":119,"props":1305,"children":1306},{"style":337},[1307],{"type":334,"value":508},{"type":314,"tag":119,"props":1309,"children":1310},{"class":121,"line":603},[1311,1315,1319,1323],{"type":314,"tag":119,"props":1312,"children":1313},{"style":454},[1314],{"type":334,"value":540},{"type":314,"tag":119,"props":1316,"children":1317},{"style":337},[1318],{"type":334,"value":433},{"type":314,"tag":119,"props":1320,"children":1321},{"style":524},[1322],{"type":334,"value":527},{"type":314,"tag":119,"props":1324,"children":1325},{"style":337},[1326],{"type":334,"value":508},{"type":314,"tag":119,"props":1328,"children":1329},{"class":121,"line":638},[1330,1334],{"type":314,"tag":119,"props":1331,"children":1332},{"style":337},[1333],{"type":334,"value":729},{"type":314,"tag":119,"props":1335,"children":1336},{"style":342},[1337],{"type":334,"value":184},{"type":314,"tag":110,"props":1339,"children":1341},{"className":736,"code":1340,"filename":738,"language":739,"meta":115,"style":115},"\u003Ctemplate>\n  \u003Cdiv class=\"flex gap-2.5\">\n    \u003Cdiv v-for=\"i in 9\" :key=\"i\" ref=\"items\" class=\"simple-box opacity-0 w-8\" />\n  \u003C/div>\n\u003C/template>\n",[1342],{"type":314,"tag":105,"props":1343,"children":1344},{"__ignoreMap":115},[1345,1360,1396,1497,1512],{"type":314,"tag":119,"props":1346,"children":1347},{"class":121,"line":122},[1348,1352,1356],{"type":314,"tag":119,"props":1349,"children":1350},{"style":337},[1351],{"type":334,"value":751},{"type":314,"tag":119,"props":1353,"children":1354},{"style":454},[1355],{"type":334,"value":756},{"type":314,"tag":119,"props":1357,"children":1358},{"style":337},[1359],{"type":334,"value":761},{"type":314,"tag":119,"props":1361,"children":1362},{"class":121,"line":163},[1363,1367,1371,1375,1379,1383,1388,1392],{"type":314,"tag":119,"props":1364,"children":1365},{"style":337},[1366],{"type":334,"value":769},{"type":314,"tag":119,"props":1368,"children":1369},{"style":454},[1370],{"type":334,"value":774},{"type":314,"tag":119,"props":1372,"children":1373},{"style":420},[1374],{"type":334,"value":779},{"type":314,"tag":119,"props":1376,"children":1377},{"style":337},[1378],{"type":334,"value":784},{"type":314,"tag":119,"props":1380,"children":1381},{"style":337},[1382],{"type":334,"value":789},{"type":314,"tag":119,"props":1384,"children":1385},{"style":359},[1386],{"type":334,"value":1387},"flex gap-2.5",{"type":314,"tag":119,"props":1389,"children":1390},{"style":337},[1391],{"type":334,"value":789},{"type":314,"tag":119,"props":1393,"children":1394},{"style":337},[1395],{"type":334,"value":761},{"type":314,"tag":119,"props":1397,"children":1398},{"class":121,"line":170},[1399,1403,1407,1412,1416,1420,1425,1429,1434,1438,1442,1447,1451,1456,1460,1464,1468,1472,1476,1480,1484,1489,1493],{"type":314,"tag":119,"props":1400,"children":1401},{"style":337},[1402],{"type":334,"value":810},{"type":314,"tag":119,"props":1404,"children":1405},{"style":454},[1406],{"type":334,"value":774},{"type":314,"tag":119,"props":1408,"children":1409},{"style":420},[1410],{"type":334,"value":1411}," v-for",{"type":314,"tag":119,"props":1413,"children":1414},{"style":337},[1415],{"type":334,"value":784},{"type":314,"tag":119,"props":1417,"children":1418},{"style":337},[1419],{"type":334,"value":789},{"type":314,"tag":119,"props":1421,"children":1422},{"style":359},[1423],{"type":334,"value":1424},"i in 9",{"type":314,"tag":119,"props":1426,"children":1427},{"style":337},[1428],{"type":334,"value":789},{"type":314,"tag":119,"props":1430,"children":1431},{"style":420},[1432],{"type":334,"value":1433}," :key",{"type":314,"tag":119,"props":1435,"children":1436},{"style":337},[1437],{"type":334,"value":784},{"type":314,"tag":119,"props":1439,"children":1440},{"style":337},[1441],{"type":334,"value":789},{"type":314,"tag":119,"props":1443,"children":1444},{"style":359},[1445],{"type":334,"value":1446},"i",{"type":314,"tag":119,"props":1448,"children":1449},{"style":337},[1450],{"type":334,"value":789},{"type":314,"tag":119,"props":1452,"children":1453},{"style":420},[1454],{"type":334,"value":1455}," ref",{"type":314,"tag":119,"props":1457,"children":1458},{"style":337},[1459],{"type":334,"value":784},{"type":314,"tag":119,"props":1461,"children":1462},{"style":337},[1463],{"type":334,"value":789},{"type":314,"tag":119,"props":1465,"children":1466},{"style":359},[1467],{"type":334,"value":1029},{"type":314,"tag":119,"props":1469,"children":1470},{"style":337},[1471],{"type":334,"value":789},{"type":314,"tag":119,"props":1473,"children":1474},{"style":420},[1475],{"type":334,"value":779},{"type":314,"tag":119,"props":1477,"children":1478},{"style":337},[1479],{"type":334,"value":784},{"type":314,"tag":119,"props":1481,"children":1482},{"style":337},[1483],{"type":334,"value":789},{"type":314,"tag":119,"props":1485,"children":1486},{"style":359},[1487],{"type":334,"value":1488},"simple-box opacity-0 w-8",{"type":314,"tag":119,"props":1490,"children":1491},{"style":337},[1492],{"type":334,"value":789},{"type":314,"tag":119,"props":1494,"children":1495},{"style":337},[1496],{"type":334,"value":840},{"type":314,"tag":119,"props":1498,"children":1499},{"class":121,"line":187},[1500,1504,1508],{"type":314,"tag":119,"props":1501,"children":1502},{"style":337},[1503],{"type":334,"value":891},{"type":314,"tag":119,"props":1505,"children":1506},{"style":454},[1507],{"type":334,"value":774},{"type":314,"tag":119,"props":1509,"children":1510},{"style":337},[1511],{"type":334,"value":761},{"type":314,"tag":119,"props":1513,"children":1514},{"class":121,"line":205},[1515,1519,1523],{"type":314,"tag":119,"props":1516,"children":1517},{"style":337},[1518],{"type":334,"value":907},{"type":314,"tag":119,"props":1520,"children":1521},{"style":454},[1522],{"type":334,"value":756},{"type":314,"tag":119,"props":1524,"children":1525},{"style":337},[1526],{"type":334,"value":761},{"type":314,"tag":1528,"props":1529,"children":1530},"stagger-demo",{},[],{"type":314,"tag":921,"props":1532,"children":1535},{"className":1533,"color":926,"icon":927,"target":928,"to":1534,"variant":930},[924,925],"https://github.com/astraldev/nanime/blob/main/docs/app/components/content/examples/misc/StaggerDemo.vue",[1536],{"type":334,"value":933},{"type":314,"tag":287,"props":1538,"children":1539},{},[1540],{"type":334,"value":938},1774818376830]