[{"data":1,"prerenderedAt":316},["ShallowReactive",2],{"navigation_docs":3,"-examples-loading-sequence":137,"-examples-loading-sequence-surround":286,"preview-examples\u002Fshowcase\u002Floading-sequence\u002FLoadingSequenceDemo.vue-false":291,"mdc-rt1r2g-key":292},[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":118,"body":139,"description":279,"extension":280,"links":281,"meta":282,"navigation":283,"path":119,"seo":284,"stem":120,"__hash__":285},"docs\u002F5.examples\u002F3.loading-sequence.md",{"type":140,"value":141,"toc":273},"minimark",[142,146,151,156,159,163,183,190,197,200,204,259],[143,144,145],"p",{},"A terminal-style build log. Hit run and a spinner starts turning while a\nstatus line scrambles from one build step to the next, until the sequence\nfinishes and a checkmark pops in to confirm success. Pause mid-build and both\nthe spinner and the step timer stop together. Resume and the spinner carries\non from the angle it stopped at, while the current step waits out its full\npause again before the log moves on.",[147,148],"render-code-block-preview",{":code":149,"src":150},"false","examples\u002Fshowcase\u002Floading-sequence\u002FLoadingSequenceDemo.vue",[152,153,155],"h2",{"id":154},"whats-happening","What's happening",[143,157,158],{},"Hit Run and the log starts ticking through build steps one at a time, a\nspinner turning next to the status line. Each step's text doesn't swap\nin. It scrambles through random characters before settling on the new line,\nlike an old terminal typing itself out. When the last step finishes, the\nspinner is replaced by a checkmark that pops in.",[152,160,162],{"id":161},"how-its-built","How it's built",[143,164,165,166,172,173,177,178,182],{},"Three composables split the work by state:\n",[167,168,169],"a",{"href":46},[170,171,45],"code",{}," spins the icon (off the\nmain thread, so it doesn't stutter under other work),\n",[167,174,175],{"href":61},[170,176,60],{}," handles the text\ntransition between steps, and ",[167,179,180],{"href":41},[170,181,40],{}," pops\nthe checkmark in at the end.",[143,184,185,186,189],{},"The build steps are a plain array of objects, each with its text and an\noptional scramble duration. Advancing through them is a ",[170,187,188],{},"setTimeout"," chain:\na step's scramble duration plus a fixed reading pause sets how long to wait\nbefore moving to the next one. Pausing clears that timer, and resuming sets\na fresh one for the current step, so the step it was on waits out its full\npause again rather than the part that was left.",[143,191,192,193,196],{},"The scramble needs no imperative trigger. Its target text is a reactive\ncomputed value tied to the current step index, so\n",[170,194,195],{},"useScrambleText(statusEl, { duration }, scrambleConfig)"," picks up the\nchange the moment the step advances and animates the transition on its own.",[143,198,199],{},"The spinner and success mark are scoped to their own state too. The spinner\nelement exists in the DOM only while loading, and the success mark only\nwhile succeeded, so each composable only ever applies to an element that's\nthere.",[152,201,203],{"id":202},"building-it-yourself","Building it yourself",[205,206,207,211,218,230,238,244,247],"ol",{},[208,209,210],"li",{},"Define a plain array of step objects, each with a status string and an optional scramble duration.",[208,212,213,214,217],{},"Track state as ",[170,215,216],{},"'idle' | 'loading' | 'success'",", plus a current step index and the current status text.",[208,219,220,221,224,225,229],{},"Render the spinner element only while ",[170,222,223],{},"state === 'loading'",", and animate it with ",[167,226,227],{"href":46},[170,228,45],{},", spinning it to 360° on a linear, looping ease.",[208,231,232,233,237],{},"Bind the status line to ",[167,234,235],{"href":61},[170,236,60],{}," with a reactive computed target built from the current step's text. Changing that text is enough to trigger a new scramble.",[208,239,240,241,243],{},"Advance steps with a ",[170,242,188],{}," chain: each step's scramble duration plus a fixed reading pause sets the wait before advancing again.",[208,245,246],{},"Pause by clearing that timer and pausing the spinner instance. Resume by playing the spinner again and setting a fresh timer for the current step.",[208,248,249,250,253,254,258],{},"On the last step, switch state to ",[170,251,252],{},"'success'"," and animate a checkmark in with ",[167,255,256],{"href":41},[170,257,40],{},".",[260,261,263],"collapsible",{"name":262},"AI build prompt",[264,265,270],"pre",{"className":266,"code":268,"language":269},[267],"language-text","Using the nanime Nuxt module, build a Vue 3 terminal-style build-log\ncomponent with three states: idle, loading, success. Define an array of\nbuild step objects, each with its status text and an optional\nscrambleDuration that overrides a shared default.\n\nOn start, cycle through the steps with a setTimeout chain, showing\n\"[n\u002Ftotal] step text\" as the current status. Bind the status text to\nuseScrambleText(statusEl, { duration }, { text: currentText, chars:\n'0123456789abcdef', settleDuration: 300, revealRate: 20 }) using a reactive\ncomputed target, so each step change triggers a new scramble automatically\nwithout any imperative call.\n\nWhile state is loading, render a spinner icon animated with\nuseWaapiAnimate(spinnerEl, { rotate: { to: 360 }, duration: 800,\nease: 'linear', loop: true }).\n\nAdd pause and resume: pausing calls clearTimeout on the step timer and\npauses the spinner instance. Resuming plays the spinner again and sets a new\ntimeout for the current step's full wait (its scramble duration plus the\nreading pause), not the portion that was left when it paused.\n\nWhen the last step completes, switch state to success, show a checkmark\nelement, and animate it in with useAnimate (opacity from 0 to 1, scale\nfrom 0.8 to 1, outQuad ease, 300ms).\n","text",[170,271,268],{"__ignoreMap":272},"",{"title":272,"searchDepth":274,"depth":274,"links":275},2,[276,277,278],{"id":154,"depth":274,"text":155},{"id":161,"depth":274,"text":162},{"id":202,"depth":274,"text":203},"Idle to loading to success.","md",null,{},{"icon":121},{"title":118,"description":279},"bascuFJZs7fynXfRrX1Ii7QSwlVjVJD7lbPlMRPiuzo",[287,289],{"title":113,"path":114,"stem":115,"description":288,"icon":116,"children":-1},"Dragging, hit testing, and a list that closes its own gap.",{"title":123,"path":124,"stem":125,"description":290,"icon":126,"children":-1},"Flipping magnetic text attraction and repulsion.","\n::loading-sequence-demo\n::\n\n\n::u-button\n---\nto: https:\u002F\u002Fgithub.com\u002Fastraldev\u002Fnanime\u002Fblob\u002Fmain\u002Fdocs\u002Fapp\u002Fcomponents\u002Fcontent\u002Fexamples\u002Fshowcase\u002Floading-sequence\u002FLoadingSequenceDemo.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":293,"body":294},{},{"type":295,"children":296},"root",[297,302],{"type":298,"tag":299,"props":300,"children":301},"element","loading-sequence-demo",{},[],{"type":298,"tag":303,"props":304,"children":313},"u-button",{"className":305,"color":308,"icon":309,"target":310,"to":311,"variant":312},[306,307],"mt-2.5","pl-0.5","neutral","i-simple-icons-github","_blank","https:\u002F\u002Fgithub.com\u002Fastraldev\u002Fnanime\u002Fblob\u002Fmain\u002Fdocs\u002Fapp\u002Fcomponents\u002Fcontent\u002Fexamples\u002Fshowcase\u002Floading-sequence\u002FLoadingSequenceDemo.vue","link",[314],{"type":269,"value":315},"View on GitHub",1788821081793]