[{"data":1,"prerenderedAt":1376},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-performance":137,"-getting-started-performance-surround":1371},[4,30,74,98,127],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-info",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Configuration","\u002Fgetting-started\u002Fconfiguration","1.getting-started\u002F3.configuration","i-lucide-settings",{"title":26,"path":27,"stem":28,"icon":29},"Performance","\u002Fgetting-started\u002Fperformance","1.getting-started\u002F4.performance","i-lucide-gauge",{"title":31,"icon":6,"path":32,"stem":33,"children":34,"page":6},"Composables","\u002Fcomposables","2.composables",[35,39,44,49,54,59,64,69],{"title":11,"path":36,"stem":37,"icon":38},"\u002Fcomposables\u002Fintroduction","2.composables\u002F0.introduction","i-lucide-box",{"title":40,"path":41,"stem":42,"icon":43},"useAnimate","\u002Fcomposables\u002Fuse-animate","2.composables\u002F1.use-animate","i-ph-play-circle",{"title":45,"path":46,"stem":47,"icon":48},"useWaapiAnimate","\u002Fcomposables\u002Fuse-waapi-animate","2.composables\u002F2.use-waapi-animate","i-ph-lightning",{"title":50,"path":51,"stem":52,"icon":53},"useAnimatable","\u002Fcomposables\u002Fuse-animatable","2.composables\u002F3.use-animatable","i-ph-cube",{"title":55,"path":56,"stem":57,"icon":58},"useSplitText","\u002Fcomposables\u002Fuse-split-text","2.composables\u002F4.use-split-text","i-ph-text-t",{"title":60,"path":61,"stem":62,"icon":63},"useScrambleText","\u002Fcomposables\u002Fuse-scramble-text","2.composables\u002F5.use-scramble-text","i-ph-shuffle",{"title":65,"path":66,"stem":67,"icon":68},"useDraggable","\u002Fcomposables\u002Fuse-draggable","2.composables\u002F6.use-draggable","i-ph-hand-grabbing",{"title":70,"path":71,"stem":72,"icon":73},"useAnimeTimeline","\u002Fcomposables\u002Fuse-anime-timeline","2.composables\u002F7.use-anime-timeline","i-ph-list-numbers",{"title":75,"path":76,"stem":77,"children":78,"page":6},"Misc","\u002Fmisc","4.misc",[79,83,88,93],{"title":11,"path":80,"stem":81,"icon":82},"\u002Fmisc\u002Fintroduction","4.misc\u002F0.introduction","i-ph-puzzle-piece",{"title":84,"path":85,"stem":86,"icon":87},"Easings","\u002Fmisc\u002Feasings","4.misc\u002F1.easings","i-ph-chart-line",{"title":89,"path":90,"stem":91,"icon":92},"Utils","\u002Fmisc\u002Futils","4.misc\u002F2.utils","i-ph-wrench",{"title":94,"path":95,"stem":96,"icon":97},"Proxies","\u002Fmisc\u002Fproxies","4.misc\u002F3.proxies","i-ph-plugs-connected",{"title":99,"icon":6,"path":100,"stem":101,"children":102,"page":6},"Examples","\u002Fexamples","5.examples",[103,107,112,117,122],{"title":11,"path":104,"stem":105,"icon":106},"\u002Fexamples\u002Fintroduction","5.examples\u002F0.introduction","i-ph-shapes",{"title":108,"path":109,"stem":110,"icon":111},"Timeline storyboard","\u002Fexamples\u002Ftimeline-storyboard","5.examples\u002F1.timeline-storyboard","i-ph-film-strip",{"title":113,"path":114,"stem":115,"icon":116},"Drag to bin","\u002Fexamples\u002Fdrag-to-bin","5.examples\u002F2.drag-to-bin","i-ph-trash",{"title":118,"path":119,"stem":120,"icon":121},"Loading sequence","\u002Fexamples\u002Floading-sequence","5.examples\u002F3.loading-sequence","i-ph-spinner-gap",{"title":123,"path":124,"stem":125,"icon":126},"Text magnet","\u002Fexamples\u002Ftext-scatter","5.examples\u002F4.text-scatter","i-ph-magnet",{"title":128,"icon":6,"path":129,"stem":130,"children":131,"page":6},"Updates","\u002Fchanges","6.changes",[132],{"title":133,"path":134,"stem":135,"icon":136},"Changelog","\u002Fchanges\u002Fchangelog","6.changes\u002F1.changelog","i-ph-clock-counter-clockwise",{"id":138,"title":26,"body":139,"description":1362,"extension":1363,"links":1364,"meta":1365,"navigation":1366,"path":27,"seo":1367,"stem":28,"__hash__":1370},"docs\u002F1.getting-started\u002F4.performance.md",{"type":140,"value":141,"toc":1355},"minimark",[142,146,180,214,219,232,433,444,475,488,492,495,502,714,717,721,735,835,839,846,1034,1038,1045,1070,1351],[143,144,145],"p",{},"Most animation performance advice is about the browser, not any library.\nWhich properties are cheap, what forces a reflow, what the compositor can\ndo on its own. That ground is covered well elsewhere:",[147,148,149,159,166,173],"ul",{},[150,151,152],"li",{},[153,154,158],"a",{"href":155,"rel":156},"https:\u002F\u002Fweb.dev\u002Farticles\u002Fanimations-and-performance",[157],"nofollow","Animations and performance",[150,160,161],{},[153,162,165],{"href":163,"rel":164},"https:\u002F\u002Fweb.dev\u002Farticles\u002Favoid-large-complex-layouts-and-layout-thrashing",[157],"Avoid large, complex layouts and layout thrashing",[150,167,168],{},[153,169,172],{"href":170,"rel":171},"https:\u002F\u002Fweb.dev\u002Farticles\u002Fstick-to-compositor-only-properties-and-manage-layer-count",[157],"Stick to compositor-only properties",[150,174,175],{},[153,176,179],{"href":177,"rel":178},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002F@media\u002Fprefers-reduced-motion",[157],"prefers-reduced-motion",[143,181,182,183,187,188,187,191,187,194,197,198,201,202,205,206,209,210,213],{},"Short version: animate ",[184,185,186],"code",{},"translateX",", ",[184,189,190],{},"translateY",[184,192,193],{},"scale",[184,195,196],{},"rotate"," and\n",[184,199,200],{},"opacity",", leave ",[184,203,204],{},"width"," and ",[184,207,208],{},"top"," alone. The rest of this page is about\n",[184,211,212],{},"nanime"," itself.",[215,216,218],"h2",{"id":217},"choosing-between-the-two-engines","Choosing between the two engines",[143,220,221,225,226,205,229,231],{},[153,222,223],{"href":46},[184,224,45],{}," hands the animation to\nthe browser's Web Animations API. For ",[184,227,228],{},"transform",[184,230,200],{}," the\nbrowser runs it on the compositor thread, so it holds its frame rate while\nthe main thread is busy hydrating or fetching, and costs less CPU and\nbattery. Modals, dropdowns, page entrances and ambient loops all fit.",[233,234,239],"pre",{"className":235,"code":236,"language":237,"meta":238,"style":238},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst modal = useTemplateRef('modal')\n\nuseWaapiAnimate(modal, {\n  transform: ['translateY(20px) scale(0.95)', 'translateY(0px) scale(1)'],\n  opacity: [0, 1],\n  duration: 300,\n  easing: 'cubic-bezier(0.2, 0, 0, 1)',\n})\n\u003C\u002Fscript>\n","vue","",[184,240,241,276,306,313,327,362,385,398,415,423],{"__ignoreMap":238},[242,243,246,250,254,258,261,264,267,271,273],"span",{"class":244,"line":245},"line",1,[242,247,249],{"class":248},"sMK4o","\u003C",[242,251,253],{"class":252},"swJcz","script",[242,255,257],{"class":256},"spNyl"," setup",[242,259,260],{"class":256}," lang",[242,262,263],{"class":248},"=",[242,265,266],{"class":248},"\"",[242,268,270],{"class":269},"sfazB","ts",[242,272,266],{"class":248},[242,274,275],{"class":248},">\n",[242,277,279,282,286,288,292,295,298,301,303],{"class":244,"line":278},2,[242,280,281],{"class":256},"const",[242,283,285],{"class":284},"sTEyZ"," modal ",[242,287,263],{"class":248},[242,289,291],{"class":290},"s2Zo4"," useTemplateRef",[242,293,294],{"class":284},"(",[242,296,297],{"class":248},"'",[242,299,300],{"class":269},"modal",[242,302,297],{"class":248},[242,304,305],{"class":284},")\n",[242,307,309],{"class":244,"line":308},3,[242,310,312],{"emptyLinePlaceholder":311},true,"\n",[242,314,316,318,321,324],{"class":244,"line":315},4,[242,317,45],{"class":290},[242,319,320],{"class":284},"(modal",[242,322,323],{"class":248},",",[242,325,326],{"class":248}," {\n",[242,328,330,333,336,339,341,344,346,348,351,354,356,359],{"class":244,"line":329},5,[242,331,332],{"class":252},"  transform",[242,334,335],{"class":248},":",[242,337,338],{"class":284}," [",[242,340,297],{"class":248},[242,342,343],{"class":269},"translateY(20px) scale(0.95)",[242,345,297],{"class":248},[242,347,323],{"class":248},[242,349,350],{"class":248}," '",[242,352,353],{"class":269},"translateY(0px) scale(1)",[242,355,297],{"class":248},[242,357,358],{"class":284},"]",[242,360,361],{"class":248},",\n",[242,363,365,368,370,372,376,378,381,383],{"class":244,"line":364},6,[242,366,367],{"class":252},"  opacity",[242,369,335],{"class":248},[242,371,338],{"class":284},[242,373,375],{"class":374},"sbssI","0",[242,377,323],{"class":248},[242,379,380],{"class":374}," 1",[242,382,358],{"class":284},[242,384,361],{"class":248},[242,386,388,391,393,396],{"class":244,"line":387},7,[242,389,390],{"class":252},"  duration",[242,392,335],{"class":248},[242,394,395],{"class":374}," 300",[242,397,361],{"class":248},[242,399,401,404,406,408,411,413],{"class":244,"line":400},8,[242,402,403],{"class":252},"  easing",[242,405,335],{"class":248},[242,407,350],{"class":248},[242,409,410],{"class":269},"cubic-bezier(0.2, 0, 0, 1)",[242,412,297],{"class":248},[242,414,361],{"class":248},[242,416,418,421],{"class":244,"line":417},9,[242,419,420],{"class":248},"}",[242,422,305],{"class":284},[242,424,426,429,431],{"class":244,"line":425},10,[242,427,428],{"class":248},"\u003C\u002F",[242,430,253],{"class":252},[242,432,275],{"class":248},[143,434,435,439,440,443],{},[153,436,437],{"href":41},[184,438,40],{}," runs on the main thread through\n",[184,441,442],{},"requestAnimationFrame",", so it competes with everything else happening\nthere. Reach for it when you need something WAAPI has no way to express:",[147,445,446,456,462,469,472],{},[150,447,448,449,452,453],{},"SVG morphing with ",[184,450,451],{},"morphTo"," and motion paths with ",[184,454,455],{},"createMotionPath",[150,457,458,459],{},"SVG line drawing with ",[184,460,461],{},"createDrawable",[150,463,464,465],{},"Text scrambling through ",[153,466,467],{"href":61},[184,468,60],{},[150,470,471],{},"Animating plain JavaScript objects and numbers",[150,473,474],{},"Stagger maths and grid distribution",[143,476,477,478,481,482,484,485,487],{},"Mixing them in one component is fine. The\n",[153,479,480],{"href":119},"loading sequence"," spins its icon with\n",[184,483,45],{}," so it keeps turning while ",[184,486,40],{}," works on the main\nthread.",[215,489,491],{"id":490},"driving-fast-updates-with-useanimatable","Driving fast updates with useAnimatable",[143,493,494],{},"Cursor tracking, scroll handlers and drag events fire many times a second.\nRecreating an animation on each one means rebuilding an instance dozens of\ntimes before a single one finishes.",[143,496,497,501],{},[153,498,499],{"href":51},[184,500,50],{}," creates one instance up\nfront and exposes each property as a setter. The handler sets a new target\nvalue, and the composable tweens towards it from wherever the property\ncurrently sits.",[233,503,505],{"className":235,"code":504,"language":237,"meta":238,"style":238},"\u003Cscript setup lang=\"ts\">\nconst circle = useTemplateRef('circle')\n\nconst animatable = useAnimatable(circle, {\n  translateX: 0,\n  translateY: 0,\n  ease: 'outExpo',\n  duration: 300,\n})\n\nfunction onMouseMove(event: MouseEvent) {\n  animatable.translateX(event.clientX)\n  animatable.translateY(event.clientY)\n}\n\u003C\u002Fscript>\n",[184,506,507,527,549,553,572,584,595,611,621,627,631,657,679,699,705],{"__ignoreMap":238},[242,508,509,511,513,515,517,519,521,523,525],{"class":244,"line":245},[242,510,249],{"class":248},[242,512,253],{"class":252},[242,514,257],{"class":256},[242,516,260],{"class":256},[242,518,263],{"class":248},[242,520,266],{"class":248},[242,522,270],{"class":269},[242,524,266],{"class":248},[242,526,275],{"class":248},[242,528,529,531,534,536,538,540,542,545,547],{"class":244,"line":278},[242,530,281],{"class":256},[242,532,533],{"class":284}," circle ",[242,535,263],{"class":248},[242,537,291],{"class":290},[242,539,294],{"class":284},[242,541,297],{"class":248},[242,543,544],{"class":269},"circle",[242,546,297],{"class":248},[242,548,305],{"class":284},[242,550,551],{"class":244,"line":308},[242,552,312],{"emptyLinePlaceholder":311},[242,554,555,557,560,562,565,568,570],{"class":244,"line":315},[242,556,281],{"class":256},[242,558,559],{"class":284}," animatable ",[242,561,263],{"class":248},[242,563,564],{"class":290}," useAnimatable",[242,566,567],{"class":284},"(circle",[242,569,323],{"class":248},[242,571,326],{"class":248},[242,573,574,577,579,582],{"class":244,"line":329},[242,575,576],{"class":252},"  translateX",[242,578,335],{"class":248},[242,580,581],{"class":374}," 0",[242,583,361],{"class":248},[242,585,586,589,591,593],{"class":244,"line":364},[242,587,588],{"class":252},"  translateY",[242,590,335],{"class":248},[242,592,581],{"class":374},[242,594,361],{"class":248},[242,596,597,600,602,604,607,609],{"class":244,"line":387},[242,598,599],{"class":252},"  ease",[242,601,335],{"class":248},[242,603,350],{"class":248},[242,605,606],{"class":269},"outExpo",[242,608,297],{"class":248},[242,610,361],{"class":248},[242,612,613,615,617,619],{"class":244,"line":400},[242,614,390],{"class":252},[242,616,335],{"class":248},[242,618,395],{"class":374},[242,620,361],{"class":248},[242,622,623,625],{"class":244,"line":417},[242,624,420],{"class":248},[242,626,305],{"class":284},[242,628,629],{"class":244,"line":425},[242,630,312],{"emptyLinePlaceholder":311},[242,632,634,637,640,642,646,648,652,655],{"class":244,"line":633},11,[242,635,636],{"class":256},"function",[242,638,639],{"class":290}," onMouseMove",[242,641,294],{"class":248},[242,643,645],{"class":644},"sHdIc","event",[242,647,335],{"class":248},[242,649,651],{"class":650},"sBMFI"," MouseEvent",[242,653,654],{"class":248},")",[242,656,326],{"class":248},[242,658,660,663,666,668,670,672,674,677],{"class":244,"line":659},12,[242,661,662],{"class":284},"  animatable",[242,664,665],{"class":248},".",[242,667,186],{"class":290},[242,669,294],{"class":252},[242,671,645],{"class":284},[242,673,665],{"class":248},[242,675,676],{"class":284},"clientX",[242,678,305],{"class":252},[242,680,682,684,686,688,690,692,694,697],{"class":244,"line":681},13,[242,683,662],{"class":284},[242,685,665],{"class":248},[242,687,190],{"class":290},[242,689,294],{"class":252},[242,691,645],{"class":284},[242,693,665],{"class":248},[242,695,696],{"class":284},"clientY",[242,698,305],{"class":252},[242,700,702],{"class":244,"line":701},14,[242,703,704],{"class":248},"}\n",[242,706,708,710,712],{"class":244,"line":707},15,[242,709,428],{"class":248},[242,711,253],{"class":252},[242,713,275],{"class":248},[143,715,716],{},"A getter would work here too, but every mouse move would revert the\nrunning animation and build a new one. Getters are for values that change\noccasionally, like a prop or a media query. A plain object is enough when\nnothing changes at all.",[215,718,720],{"id":719},"keeping-the-returned-instance-intact","Keeping the returned instance intact",[143,722,723,724,727,728,205,731,734],{},"The animation composables return their instance wrapped in a\n",[184,725,726],{},"shallowReactive"," object, which is what makes ",[184,729,730],{},"progress",[184,732,733],{},"paused","\nreadable in a template. Destructuring reads those once and hands back\nplain values, disconnecting them from the instance.",[233,736,739],{"className":737,"code":738,"language":270,"meta":238,"style":238},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F loses reactivity\nconst { play, pause, progress } = useAnimate(box, { ... })\n\n\u002F\u002F keeps it\nconst animation = useAnimate(box, { ... })\nanimation.play()\n",[184,740,741,747,790,794,799,822],{"__ignoreMap":238},[242,742,743],{"class":244,"line":245},[242,744,746],{"class":745},"sHwdD","\u002F\u002F loses reactivity\n",[242,748,749,751,754,757,759,762,764,767,769,772,775,778,780,782,785,788],{"class":244,"line":278},[242,750,281],{"class":256},[242,752,753],{"class":248}," {",[242,755,756],{"class":284}," play",[242,758,323],{"class":248},[242,760,761],{"class":284}," pause",[242,763,323],{"class":248},[242,765,766],{"class":284}," progress ",[242,768,420],{"class":248},[242,770,771],{"class":248}," =",[242,773,774],{"class":290}," useAnimate",[242,776,777],{"class":284},"(box",[242,779,323],{"class":248},[242,781,753],{"class":248},[242,783,784],{"class":248}," ...",[242,786,787],{"class":248}," }",[242,789,305],{"class":284},[242,791,792],{"class":244,"line":308},[242,793,312],{"emptyLinePlaceholder":311},[242,795,796],{"class":244,"line":315},[242,797,798],{"class":745},"\u002F\u002F keeps it\n",[242,800,801,803,806,808,810,812,814,816,818,820],{"class":244,"line":329},[242,802,281],{"class":256},[242,804,805],{"class":284}," animation ",[242,807,263],{"class":248},[242,809,774],{"class":290},[242,811,777],{"class":284},[242,813,323],{"class":248},[242,815,753],{"class":248},[242,817,784],{"class":248},[242,819,787],{"class":248},[242,821,305],{"class":284},[242,823,824,827,829,832],{"class":244,"line":364},[242,825,826],{"class":284},"animation",[242,828,665],{"class":248},[242,830,831],{"class":290},"play",[242,833,834],{"class":284},"()\n",[215,836,838],{"id":837},"handing-composables-an-element-rather-than-a-selector","Handing composables an element rather than a selector",[143,840,841,842,845],{},"Targets can be a selector string, a component instance or a template ref.\nInside a component that renders more than once on a page, ",[184,843,844],{},"'.card'","\nresolves against the whole document, so one instance animates another's\nelements. A template ref points at one element and needs no lookup.",[233,847,849],{"className":235,"code":848,"language":237,"meta":238,"style":238},"\u003Cscript setup lang=\"ts\">\nconst card = useTemplateRef('card')\n\nuseAnimate(card, {\n  scale: [0.9, 1],\n  opacity: [0, 1],\n  duration: 400,\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"card\" class=\"card\">Content\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[184,850,851,871,893,897,908,928,946,957,963,971,975,984,1026],{"__ignoreMap":238},[242,852,853,855,857,859,861,863,865,867,869],{"class":244,"line":245},[242,854,249],{"class":248},[242,856,253],{"class":252},[242,858,257],{"class":256},[242,860,260],{"class":256},[242,862,263],{"class":248},[242,864,266],{"class":248},[242,866,270],{"class":269},[242,868,266],{"class":248},[242,870,275],{"class":248},[242,872,873,875,878,880,882,884,886,889,891],{"class":244,"line":278},[242,874,281],{"class":256},[242,876,877],{"class":284}," card ",[242,879,263],{"class":248},[242,881,291],{"class":290},[242,883,294],{"class":284},[242,885,297],{"class":248},[242,887,888],{"class":269},"card",[242,890,297],{"class":248},[242,892,305],{"class":284},[242,894,895],{"class":244,"line":308},[242,896,312],{"emptyLinePlaceholder":311},[242,898,899,901,904,906],{"class":244,"line":315},[242,900,40],{"class":290},[242,902,903],{"class":284},"(card",[242,905,323],{"class":248},[242,907,326],{"class":248},[242,909,910,913,915,917,920,922,924,926],{"class":244,"line":329},[242,911,912],{"class":252},"  scale",[242,914,335],{"class":248},[242,916,338],{"class":284},[242,918,919],{"class":374},"0.9",[242,921,323],{"class":248},[242,923,380],{"class":374},[242,925,358],{"class":284},[242,927,361],{"class":248},[242,929,930,932,934,936,938,940,942,944],{"class":244,"line":364},[242,931,367],{"class":252},[242,933,335],{"class":248},[242,935,338],{"class":284},[242,937,375],{"class":374},[242,939,323],{"class":248},[242,941,380],{"class":374},[242,943,358],{"class":284},[242,945,361],{"class":248},[242,947,948,950,952,955],{"class":244,"line":387},[242,949,390],{"class":252},[242,951,335],{"class":248},[242,953,954],{"class":374}," 400",[242,956,361],{"class":248},[242,958,959,961],{"class":244,"line":400},[242,960,420],{"class":248},[242,962,305],{"class":284},[242,964,965,967,969],{"class":244,"line":417},[242,966,428],{"class":248},[242,968,253],{"class":252},[242,970,275],{"class":248},[242,972,973],{"class":244,"line":425},[242,974,312],{"emptyLinePlaceholder":311},[242,976,977,979,982],{"class":244,"line":633},[242,978,249],{"class":248},[242,980,981],{"class":252},"template",[242,983,275],{"class":248},[242,985,986,989,992,995,997,999,1001,1003,1006,1008,1010,1012,1014,1017,1020,1022,1024],{"class":244,"line":659},[242,987,988],{"class":248},"  \u003C",[242,990,991],{"class":252},"div",[242,993,994],{"class":256}," ref",[242,996,263],{"class":248},[242,998,266],{"class":248},[242,1000,888],{"class":269},[242,1002,266],{"class":248},[242,1004,1005],{"class":256}," class",[242,1007,263],{"class":248},[242,1009,266],{"class":248},[242,1011,888],{"class":269},[242,1013,266],{"class":248},[242,1015,1016],{"class":248},">",[242,1018,1019],{"class":284},"Content",[242,1021,428],{"class":248},[242,1023,991],{"class":252},[242,1025,275],{"class":248},[242,1027,1028,1030,1032],{"class":244,"line":681},[242,1029,428],{"class":248},[242,1031,981],{"class":252},[242,1033,275],{"class":248},[215,1035,1037],{"id":1036},"keeping-split-text-short","Keeping split text short",[143,1039,1040,1044],{},[153,1041,1042],{"href":56},[184,1043,55],{}," wraps each unit in its own\nelement. A heading split into characters is a few dozen spans. An article\nsplit the same way is several thousand for the browser to style and lay\nout.",[143,1046,1047,1048,1051,1052,1055,1056,1059,1060,187,1063,205,1066,1069],{},"Split headings, hero titles and short callouts, and prefer\n",[184,1049,1050],{},"{ words: true }"," or ",[184,1053,1054],{},"{ lines: true }"," over ",[184,1057,1058],{},"{ chars: true }"," where the\neffect still reads. The composable returns a ",[184,1061,1062],{},"lines",[184,1064,1065],{},"words",[184,1067,1068],{},"chars","\narray, so moving between levels is a change of option and target:",[233,1071,1073],{"className":235,"code":1072,"language":237,"meta":238,"style":238},"\u003Cscript setup lang=\"ts\">\nimport { stagger } from '#nanime\u002Futils'\n\nconst heading = useTemplateRef('heading')\n\n\u002F\u002F one span per character on a short heading\nconst { chars } = useSplitText(heading, { chars: true })\n\nuseAnimate(chars, {\n  translateY: [20, 0],\n  opacity: [0, 1],\n  delay: stagger(40),\n  duration: 400,\n  ease: 'outQuad',\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ch2 ref=\"heading\">Ship it\u003C\u002Fh2>\n\u003C\u002Ftemplate>\n",[184,1074,1075,1095,1119,1123,1145,1149,1154,1190,1194,1205,1224,1242,1260,1270,1285,1291,1300,1305,1314,1342],{"__ignoreMap":238},[242,1076,1077,1079,1081,1083,1085,1087,1089,1091,1093],{"class":244,"line":245},[242,1078,249],{"class":248},[242,1080,253],{"class":252},[242,1082,257],{"class":256},[242,1084,260],{"class":256},[242,1086,263],{"class":248},[242,1088,266],{"class":248},[242,1090,270],{"class":269},[242,1092,266],{"class":248},[242,1094,275],{"class":248},[242,1096,1097,1101,1103,1106,1108,1111,1113,1116],{"class":244,"line":278},[242,1098,1100],{"class":1099},"s7zQu","import",[242,1102,753],{"class":248},[242,1104,1105],{"class":284}," stagger",[242,1107,787],{"class":248},[242,1109,1110],{"class":1099}," from",[242,1112,350],{"class":248},[242,1114,1115],{"class":269},"#nanime\u002Futils",[242,1117,1118],{"class":248},"'\n",[242,1120,1121],{"class":244,"line":308},[242,1122,312],{"emptyLinePlaceholder":311},[242,1124,1125,1127,1130,1132,1134,1136,1138,1141,1143],{"class":244,"line":315},[242,1126,281],{"class":256},[242,1128,1129],{"class":284}," heading ",[242,1131,263],{"class":248},[242,1133,291],{"class":290},[242,1135,294],{"class":284},[242,1137,297],{"class":248},[242,1139,1140],{"class":269},"heading",[242,1142,297],{"class":248},[242,1144,305],{"class":284},[242,1146,1147],{"class":244,"line":329},[242,1148,312],{"emptyLinePlaceholder":311},[242,1150,1151],{"class":244,"line":364},[242,1152,1153],{"class":745},"\u002F\u002F one span per character on a short heading\n",[242,1155,1156,1158,1160,1163,1165,1167,1170,1173,1175,1177,1180,1182,1186,1188],{"class":244,"line":387},[242,1157,281],{"class":256},[242,1159,753],{"class":248},[242,1161,1162],{"class":284}," chars ",[242,1164,420],{"class":248},[242,1166,771],{"class":248},[242,1168,1169],{"class":290}," useSplitText",[242,1171,1172],{"class":284},"(heading",[242,1174,323],{"class":248},[242,1176,753],{"class":248},[242,1178,1179],{"class":252}," chars",[242,1181,335],{"class":248},[242,1183,1185],{"class":1184},"sfNiH"," true",[242,1187,787],{"class":248},[242,1189,305],{"class":284},[242,1191,1192],{"class":244,"line":400},[242,1193,312],{"emptyLinePlaceholder":311},[242,1195,1196,1198,1201,1203],{"class":244,"line":417},[242,1197,40],{"class":290},[242,1199,1200],{"class":284},"(chars",[242,1202,323],{"class":248},[242,1204,326],{"class":248},[242,1206,1207,1209,1211,1213,1216,1218,1220,1222],{"class":244,"line":425},[242,1208,588],{"class":252},[242,1210,335],{"class":248},[242,1212,338],{"class":284},[242,1214,1215],{"class":374},"20",[242,1217,323],{"class":248},[242,1219,581],{"class":374},[242,1221,358],{"class":284},[242,1223,361],{"class":248},[242,1225,1226,1228,1230,1232,1234,1236,1238,1240],{"class":244,"line":633},[242,1227,367],{"class":252},[242,1229,335],{"class":248},[242,1231,338],{"class":284},[242,1233,375],{"class":374},[242,1235,323],{"class":248},[242,1237,380],{"class":374},[242,1239,358],{"class":284},[242,1241,361],{"class":248},[242,1243,1244,1247,1249,1251,1253,1256,1258],{"class":244,"line":659},[242,1245,1246],{"class":252},"  delay",[242,1248,335],{"class":248},[242,1250,1105],{"class":290},[242,1252,294],{"class":284},[242,1254,1255],{"class":374},"40",[242,1257,654],{"class":284},[242,1259,361],{"class":248},[242,1261,1262,1264,1266,1268],{"class":244,"line":681},[242,1263,390],{"class":252},[242,1265,335],{"class":248},[242,1267,954],{"class":374},[242,1269,361],{"class":248},[242,1271,1272,1274,1276,1278,1281,1283],{"class":244,"line":701},[242,1273,599],{"class":252},[242,1275,335],{"class":248},[242,1277,350],{"class":248},[242,1279,1280],{"class":269},"outQuad",[242,1282,297],{"class":248},[242,1284,361],{"class":248},[242,1286,1287,1289],{"class":244,"line":707},[242,1288,420],{"class":248},[242,1290,305],{"class":284},[242,1292,1294,1296,1298],{"class":244,"line":1293},16,[242,1295,428],{"class":248},[242,1297,253],{"class":252},[242,1299,275],{"class":248},[242,1301,1303],{"class":244,"line":1302},17,[242,1304,312],{"emptyLinePlaceholder":311},[242,1306,1308,1310,1312],{"class":244,"line":1307},18,[242,1309,249],{"class":248},[242,1311,981],{"class":252},[242,1313,275],{"class":248},[242,1315,1317,1319,1321,1323,1325,1327,1329,1331,1333,1336,1338,1340],{"class":244,"line":1316},19,[242,1318,988],{"class":248},[242,1320,215],{"class":252},[242,1322,994],{"class":256},[242,1324,263],{"class":248},[242,1326,266],{"class":248},[242,1328,1140],{"class":269},[242,1330,266],{"class":248},[242,1332,1016],{"class":248},[242,1334,1335],{"class":284},"Ship it",[242,1337,428],{"class":248},[242,1339,215],{"class":252},[242,1341,275],{"class":248},[242,1343,1345,1347,1349],{"class":244,"line":1344},20,[242,1346,428],{"class":248},[242,1348,981],{"class":252},[242,1350,275],{"class":248},[1352,1353,1354],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":238,"searchDepth":278,"depth":278,"links":1356},[1357,1358,1359,1360,1361],{"id":217,"depth":278,"text":218},{"id":490,"depth":278,"text":491},{"id":719,"depth":278,"text":720},{"id":837,"depth":278,"text":838},{"id":1036,"depth":278,"text":1037},"Choosing the right composable and options for animations that stay smooth.","md",null,{},{"icon":29},{"title":1368,"description":1369},"Performance - nanime","How to pick the right nanime composable and options for animations that stay smooth.","ap8meUzAeN8_bAv8-xZnLTCBdaA7bEs4ACxzj9Pil2g",[1372,1374],{"title":21,"path":22,"stem":23,"description":1373,"icon":24,"children":-1},"Configuring nanime options for your Nuxt project.",{"title":11,"path":36,"stem":37,"description":1375,"icon":38,"children":-1},"Explore the available composables in nanime.",1788821082172]