@juleshry/vue-animejs 1.2.2 → 1.4.0-beta.0

package/README.md

@@ -2,7 +2,7 @@
   <img src="./docs/src/public/icon-animated.svg" alt="vue-animejs" width="120" />
 
   <h1 align="center">vue-animejs</h1>
-  <p align="center">Vue 3 composables and directives for <a href="https://animejs.com/">Anime.js</a> v4 — reactive animations that integrate naturally with Vue's reactivity system and component lifecycle.</p>
+  <p align="center">SSR-safe Vue 3 composables and directives for <a href="https://animejs.com/">Anime.js</a> v4 — reactive animations that integrate naturally with Vue's reactivity system and component lifecycle.</p>
   <p align="center">
     <a href="https://www.npmjs.com/package/@juleshry/vue-animejs"><img src="https://img.shields.io/npm/v/%40juleshry%2Fvue-animejs?label=npm&color=a1b858" alt="npm version" /></a>
     <a href="https://www.npmjs.com/package/@juleshry/vue-animejs"><img src="https://img.shields.io/npm/dm/%40juleshry%2Fvue-animejs?color=50a36f" alt="npm downloads" /></a>
@@ -15,7 +15,9 @@
 
 ## 🚀 Overview
 
-**vue-animejs** wraps Anime.js v4 as idiomatic Vue 3 composables. It integrates with Vue's reactivity system — pass a `ref` as a target or option and the animation updates automatically. Lifecycle cleanup is handled for you, and every composable is safe to call during SSR (Nuxt, `@vue/server-renderer`) — Anime.js instances are only created once mounted in a browser.
+**vue-animejs** wraps Anime.js v4 as idiomatic Vue 3 composables. It integrates with Vue's reactivity system — pass a `ref` as a target or option and the animation updates automatically. Lifecycle cleanup is handled for you.
+
+**SSR-safe:** every composable and directive works with server-side rendering (Nuxt, `@vue/server-renderer`) with no `<ClientOnly>` wrapper. Nothing touches `window` or `document` on the server, and Anime.js instances are only created in the browser. Directives go further and render their initial state on the server (`v-animate`, `v-waapi`, `v-svg-drawable`, and `v-text-split` with `ssrHidden`), so elements don't flash their final state before hydration.
 
 **Before** — raw Anime.js in a Vue component:
 
@@ -77,6 +79,7 @@ useAnimate(el, { translateX: 250, duration: 800 })
 | `useRawAnimate`  | Thin wrapper around Anime.js `animate()` with ref unwrapping |
 | `useTimer`       | Drive a timer with full playback control          |
 | `useTimeline`    | Sequence multiple animations on a shared timeline |
+| `useScroll`      | Drive an animation's `autoplay` option from scroll position |
 | `useWaapi`       | Animate via the Web Animations API (WAAPI)        |
 | `useAnimatable`  | Create a reactive animatable object               |
 | `useDraggable`   | Make a DOM element draggable with full control    |

package/dist/composables/use-scroll.d.ts

@@ -0,0 +1,33 @@
+import { type ComputedRef, type MaybeRef } from "vue";
+import { type ScrollObserver, type ScrollObserverParams, type Tickable, type WAAPIAnimation } from "animejs";
+import { type AnimationTargets } from "@src/utils/resolve-target.ts";
+export interface UseScrollReturn {
+    /** The underlying Anime.js ScrollObserver. `undefined` until both container and target are available. */
+    observer: ComputedRef<ScrollObserver | undefined>;
+    /** The observer, or `false` while it doesn't exist yet — plug straight into an `autoplay` option. */
+    autoplay: ComputedRef<ScrollObserver | false>;
+    /** `{ autoplay }`, ready to pass straight as-is into `useTimeline`/`useTimer`/`useAnimate`'s options argument. */
+    autoplayComputed: ComputedRef<{
+        autoplay: ScrollObserver | false;
+    }>;
+    /** Re-reads the container and target bounds. */
+    refresh: () => ScrollObserver | undefined;
+    /** Cancels the observer and detaches its scroll listeners. */
+    revert: () => ScrollObserver | undefined;
+    /** Renders the on-screen debug markers for the observer's thresholds. */
+    debug: () => void;
+    /** Removes the on-screen debug markers. */
+    removeDebug: () => ScrollObserver | undefined;
+    /** Links a tickable (animation, timer, timeline) or WAAPI animation to be driven by this observer. */
+    link: (linked: Tickable | WAAPIAnimation) => ScrollObserver | undefined;
+}
+/**
+ * Wraps Anime.js `onScroll()` into a Vue composable. Reactively re-creates the ScrollObserver
+ * when the container, target, or options change, and reverts it automatically on unmount.
+ *
+ * @param container - The scrollable container. Accepts a template ref, a CSS selector, a DOM element, or a reactive ref to any of these.
+ * @param target - The element whose scroll position is observed within `container`. Same accepted shapes as `container`.
+ * @param options - Anime.js `ScrollObserverParams`, minus `container`/`target`. Accepts a plain object or a reactive ref / computed. Defaults to `{}`.
+ */
+export declare function useScroll(container: AnimationTargets, target: AnimationTargets, options?: MaybeRef<Omit<ScrollObserverParams, "container" | "target">>): UseScrollReturn;
+//# sourceMappingURL=use-scroll.d.ts.map

package/dist/composables/use-scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scroll.d.ts","sourceRoot":"","sources":["../../src/composables/use-scroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,WAAW,EAAW,KAAK,QAAQ,EAAS,MAAM,KAAK,CAAA;AAE/E,OAAO,EAAY,KAAK,cAAc,EAAE,KAAK,oBAAoB,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAA;AACtH,OAAO,EAAE,KAAK,gBAAgB,EAAiB,MAAM,8BAA8B,CAAA;AAEnF,MAAM,WAAW,eAAe;IAC9B,yGAAyG;IACzG,QAAQ,EAAE,WAAW,CAAC,cAAc,GAAG,SAAS,CAAC,CAAA;IACjD,qGAAqG;IACrG,QAAQ,EAAE,WAAW,CAAC,cAAc,GAAG,KAAK,CAAC,CAAA;IAC7C,kHAAkH;IAClH,gBAAgB,EAAE,WAAW,CAAC;QAAE,QAAQ,EAAE,cAAc,GAAG,KAAK,CAAA;KAAE,CAAC,CAAA;IACnE,gDAAgD;IAChD,OAAO,EAAE,MAAM,cAAc,GAAG,SAAS,CAAA;IACzC,8DAA8D;IAC9D,MAAM,EAAE,MAAM,cAAc,GAAG,SAAS,CAAA;IACxC,yEAAyE;IACzE,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,2CAA2C;IAC3C,WAAW,EAAE,MAAM,cAAc,GAAG,SAAS,CAAA;IAC7C,sGAAsG;IACtG,IAAI,EAAE,CAAC,MAAM,EAAE,QAAQ,GAAG,cAAc,KAAK,cAAc,GAAG,SAAS,CAAA;CACxE;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CACvB,SAAS,EAAE,gBAAgB,EAC3B,MAAM,EAAE,gBAAgB,EACxB,OAAO,GAAE,QAAQ,CAAC,IAAI,CAAC,oBAAoB,EAAE,WAAW,GAAG,QAAQ,CAAC,CAAM,GACzE,eAAe,CA4DjB"}

package/dist/directives/v-animate.d.ts

@@ -4,6 +4,9 @@ import type { Directive } from "vue";
  * Declarative animation directive. Applies an Anime.js animation to the element on mount,
  * re-creates it when the binding value changes, and reverts it on unmount.
  *
+ * During SSR, renders the animation's "from" state as an inline style (see `getInitialStyle`) so the
+ * element doesn't flash its final state before hydration.
+ *
  * @example
  * <div v-animate="{ translateX: 250, duration: 800 }" />
  * <div v-animate="reactiveOptions" />

package/dist/directives/v-animate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"v-animate.d.ts","sourceRoot":"","sources":["../../src/directives/v-animate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,eAAe,EAAoB,MAAM,SAAS,CAAA;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAIpC;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,EAAE,SAAS,CAAC,WAAW,EAAE,eAAe,CAkB5D,CAAA"}
+{"version":3,"file":"v-animate.d.ts","sourceRoot":"","sources":["../../src/directives/v-animate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,eAAe,EAAoB,MAAM,SAAS,CAAA;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAMpC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,EAAE,SAAS,CAAC,WAAW,EAAE,eAAe,CAyB5D,CAAA"}

package/dist/directives/v-svg-drawable.d.ts

@@ -5,6 +5,9 @@ import type { Directive } from "vue";
  * Proxy and animates the `draw` property on mount. Re-creates it when the binding value changes
  * and reverts on unmount.
  *
+ * During SSR, renders the path's starting draw state (see `getInitialDraw`) so it doesn't show fully
+ * drawn before hydration.
+ *
  * @example
  * <path v-svg-drawable="{ draw: '0 1', duration: 1200 }" />
  * <path v-svg-drawable="{ draw: ['0 0', '0.5 1', '0 1'], ease: 'inOutQuad', loop: true }" />

package/dist/directives/v-svg-drawable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"v-svg-drawable.d.ts","sourceRoot":"","sources":["../../src/directives/v-svg-drawable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,eAAe,EAA8C,MAAM,SAAS,CAAA;AACxG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAepC;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,SAAS,CAAC,kBAAkB,EAAE,eAAe,GAAG,SAAS,CAiBnF,CAAA"}
+{"version":3,"file":"v-svg-drawable.d.ts","sourceRoot":"","sources":["../../src/directives/v-svg-drawable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,eAAe,EAA8C,MAAM,SAAS,CAAA;AACxG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAiBpC;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,EAAE,SAAS,CAAC,kBAAkB,EAAE,eAAe,GAAG,SAAS,CAyBnF,CAAA"}

package/dist/directives/v-text-split.d.ts

@@ -2,11 +2,20 @@ import { type AnimationParams, type TextSplitterParams } from "animejs";
 import type { Directive } from "vue";
 export interface VTextSplitValue extends TextSplitterParams {
     animation?: AnimationParams;
+    /**
+     * SSR only: renders the element with `visibility: hidden` on the server, removed once the text is
+     * split and the animation has painted its starting state, so the unsplit text doesn't flash before
+     * hydration. Opt-in because the text stays invisible until JavaScript runs.
+     */
+    ssrHidden?: boolean;
 }
 /**
  * Declarative text-split directive. Splits the element's text into chars, words, or lines on
  * mount, and optionally animates the resulting spans. Re-creates on binding change, reverts on unmount.
  *
+ * With `ssrHidden: true`, the element is hidden on the server until its text is split and animated
+ * on the client (text can only be split in the browser).
+ *
  * @example
  * <p v-text-split="{ words: true, animation: { translateY: [20, 0], opacity: [0, 1], delay: stagger(60) } }">Hello</p>
  * <p v-text-split="{ chars: true, animation: { opacity: [0, 1], delay: stagger(30) } }">Hello</p>

package/dist/directives/v-text-split.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"v-text-split.d.ts","sourceRoot":"","sources":["../../src/directives/v-text-split.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,eAAe,EAGpB,KAAK,kBAAkB,EACxB,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAEpC,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD,SAAS,CAAC,EAAE,eAAe,CAAA;CAC5B;AAoCD;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,SAAS,CAAC,WAAW,EAAE,eAAe,GAAG,SAAS,CAe1E,CAAA"}
+{"version":3,"file":"v-text-split.d.ts","sourceRoot":"","sources":["../../src/directives/v-text-split.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,eAAe,EAGpB,KAAK,kBAAkB,EACxB,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD,SAAS,CAAC,EAAE,eAAe,CAAA;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAwCD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU,EAAE,SAAS,CAAC,WAAW,EAAE,eAAe,GAAG,SAAS,CAuB1E,CAAA"}

package/dist/directives/v-waapi.d.ts

@@ -4,6 +4,9 @@ import type { Directive } from "vue";
  * Declarative WAAPI animation directive. Applies an Anime.js WAAPI animation to the element on
  * mount, re-creates it when the binding value changes, and reverts it on unmount.
  *
+ * During SSR, renders the animation's "from" state as an inline style (see `getInitialStyle`) so the
+ * element doesn't flash its final state before hydration.
+ *
  * @example
  * <div v-waapi="{ translateX: 250, duration: 800 }" />
  * <div v-waapi="reactiveOptions" />

package/dist/directives/v-waapi.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"v-waapi.d.ts","sourceRoot":"","sources":["../../src/directives/v-waapi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,oBAAoB,EAAuB,MAAM,SAAS,CAAA;AAC/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AASpC;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,EAAE,SAAS,CAAC,WAAW,EAAE,oBAAoB,CAiC/D,CAAA"}
+{"version":3,"file":"v-waapi.d.ts","sourceRoot":"","sources":["../../src/directives/v-waapi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,oBAAoB,EAAuB,MAAM,SAAS,CAAA;AAC/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAiBpC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,EAAE,SAAS,CAAC,WAAW,EAAE,oBAAoB,CA8B/D,CAAA"}

package/dist/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue"),t=require("animejs"),n=require("@vueuse/core");function r(e){if(Array.isArray(e)){let t=e.map(e=>(0,n.unrefElement)(e)).filter(e=>e!=null);return t.length>0?t:void 0}return(0,n.unrefElement)(e)}function i(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([e,t])=>{c(e,t)},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});(0,n.tryOnUnmounted)(()=>{s(),g()});function c(n,r){if(_(),!n){console.warn(`Target element is null or undefined`),o.value=void 0;return}o.value=(0,e.markRaw)((0,t.animate)(n,r))}function l(){return o.value?.play()}function u(){return o.value?.reverse()}function d(){return o.value?.pause()}function f(){return o.value?.restart()}function p(){return o.value?.alternate()}function m(){return o.value?.resume()}function h(){return o.value?.complete()}function g(){return o.value?.cancel()}function _(){return o.value?.revert()}function v(e){return o.value?.reset(e)}function y(e,t,n){return o.value?.seek(e,t,n)}function b(e){return o.value?.stretch(e)}function x(){return o.value?.refresh()}return{animation:(0,e.shallowReadonly)(o),play:l,reverse:u,pause:d,restart:f,alternate:p,resume:m,complete:h,cancel:g,revert:_,reset:v,seek:y,stretch:b,refresh:x}}function a(n,i={}){let a=r(n);return a||console.warn(`Target is undefined`),(0,t.animate)(a,(0,e.unref)(i))}function o(r={}){let i=(0,e.shallowRef)(),a;function o(n){n!==a&&(a=n,g(),i.value=(0,e.markRaw)((0,t.createTimer)(n)))}(0,n.tryOnMounted)(()=>{o((0,e.unref)(r))});let{stop:s}=(0,e.watch)(()=>(0,e.unref)(r),e=>{n.isClient&&o(e)},{deep:1});(0,n.tryOnUnmounted)(()=>{s(),g()});function c(){return i.value?.play()}function l(){return i.value?.reverse()}function u(){return i.value?.pause()}function d(){return i.value?.restart()}function f(){return i.value?.alternate()}function p(){return i.value?.resume()}function m(){return i.value?.complete()}function h(e){return i.value?.reset(e)}function g(){return i.value?.cancel()}function _(){return i.value?.revert()}function v(e,t,n){return i.value?.seek(e,t,n)}function y(e){return i.value?.stretch(e)}return{timer:(0,e.shallowReadonly)(i),play:c,reverse:l,pause:u,restart:d,alternate:f,resume:p,complete:m,reset:h,cancel:g,revert:_,seek:v,stretch:y}}function s(i={}){let a=!1,o,s=[],c=(0,e.shallowRef)();function l(){for(let t of s)t.type===`add`?c.value?.add(r(t.targets),(0,e.toValue)(t.params),t.position):t.type===`set`?c.value?.set(r(t.targets),(0,e.toValue)(t.params),t.position):c.value?.call(t.callback,t.position)}function u(n){n!==o&&(o=n,O(),c.value=(0,e.markRaw)((0,t.createTimeline)(n)),l())}let{stop:d}=(0,e.watch)(()=>(0,e.unref)(i),e=>{n.isClient&&u(e)},{flush:`post`,deep:1});(0,n.tryOnMounted)(()=>{u((0,e.unref)(i)),a=!0}),(0,n.tryOnUnmounted)(()=>{d(),D()});function f(t,n,i){return s.push({type:`add`,targets:t,params:n,position:i}),a?{...c.value?.add(r(t),(0,e.toValue)(n),i),add:f,set:p,remove:m}:{...c.value,add:f,set:p,remove:m}}function p(t,n,i){return s.push({type:`set`,targets:t,params:n,position:i}),a?{...c.value?.set(r(t),(0,e.toValue)(n),i),add:f,set:p,remove:m}:{...c.value,add:f,set:p,remove:m}}function m(e,t){return a?{...c.value?.remove(r(e),t),add:f,set:p,remove:m}:(console.warn(`Cannot remove from timeline before mount`),{...c.value,add:f,set:p,remove:m})}function h(e,t){return c.value?.sync(e,t)}function g(e,t){return c.value?.label(e,t)}function _(e,t){return s.push({type:`call`,callback:e,position:t}),c.value?.call(e,t)}function v(e){return c.value?.init(e)}function y(){return c.value?.play()}function b(){return c.value?.reverse()}function x(){return c.value?.pause()}function S(){return c.value?.restart()}function C(){return c.value?.alternate()}function w(){return c.value?.resume()}function T(){return c.value?.complete()}function E(e){return c.value?.reset(e)}function D(){return c.value?.cancel()}function O(){return c.value?.revert()}function k(e,t,n){return c.value?.seek(e,t,n)}function A(e){return c.value?.stretch(e)}function j(){return c.value?.refresh()}return{timeline:(0,e.shallowReadonly)(c),add:f,set:p,sync:h,label:g,remove:m,call:_,init:v,play:y,reverse:b,pause:x,restart:S,alternate:C,resume:w,complete:T,reset:E,cancel:D,revert:O,seek:k,stretch:A,refresh:j}}function c(i,a={}){let o=(0,e.shallowRef)(),s=(0,e.computed)(()=>({el:r(i),opt:(0,e.unref)(a)})),{stop:c}=(0,e.watch)(s,({el:n,opt:r})=>{if(l(),!n){console.warn(`Targets element is null or undefined`),o.value=void 0;return}o.value=(0,e.markRaw)((0,t.createAnimatable)(n,r))},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});(0,n.tryOnUnmounted)(()=>{c(),l()});function l(){return o.value?.revert()}return{animatable:(0,e.shallowReadonly)(o),revert:l}}function l(n,i={}){let a=r(n);return a||console.warn(`Targets element is null or undefined`),(0,t.createAnimatable)(a,(0,e.unref)(i))}function u(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([n,r])=>{if(g(),!n){console.warn(`Targets element is null or undefined`),o.value=void 0;return}o.value=(0,e.markRaw)((0,t.createDraggable)(n,r))},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});(0,n.tryOnUnmounted)(()=>{g(),s()});function c(){return o.value?.disable()}function l(){return o.value?.enable()}function u(e,t){return o.value?.setX(e,t)}function d(e,t){return o.value?.setY(e,t)}function f(e,t,n){return o.value?.animateInView(e,t,n)}function p(e,t,n){return o.value?.scrollInView(e,t,n)}function m(){return o.value?.stop()}function h(){return o.value?.reset()}function g(){return o.value?.revert()}function _(){return o.value?.refresh()}return{draggable:(0,e.shallowReadonly)(o),disable:c,enable:l,setX:u,setY:d,animateInView:f,scrollInView:p,stop:m,reset:h,revert:g,refresh:_}}function d(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([n,r])=>{if(d(),!n){console.warn(`Target element is null or undefined`),o.value=void 0;return}o.value=(0,e.markRaw)((0,t.createLayout)(n,r))},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});(0,n.tryOnUnmounted)(()=>{d(),s()});function c(){return o.value?.record()}function l(e){return o.value?.animate(e)}function u(e,t){return o.value?.update(e,t)}function d(){return o.value?.revert()}return{layout:(0,e.shallowReadonly)(o),record:c,animate:l,update:u,revert:d}}function f(){function n(n,r){return(i,a,o,s)=>{let c=(0,e.unref)(n);return c?t.svg.morphTo(c,(0,e.unref)(r))(i,a,o,s):``}}function r(n,r){let i=(0,e.unref)(n)??``;return t.svg.createMotionPath(i,(0,e.unref)(r))}return{morphTo:n,createMotionPath:r}}function p(i,a=0,o=0){let s=(0,e.shallowRef)(),{stop:c}=(0,e.watch)(()=>r(i),n=>{if(s.value=void 0,!n){console.warn(`[useSvgDrawable] Target element is null or undefined`);return}s.value=(0,e.markRaw)(t.svg.createDrawable(n,(0,e.unref)(a),(0,e.unref)(o))[0])},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});return(0,n.tryOnUnmounted)(()=>{c(),s.value=void 0}),{drawable:(0,e.shallowReadonly)(s)}}function m(i,a){let o=(0,e.shallowRef)(),s=(0,e.computed)(()=>o.value?.lines??[]),c=(0,e.computed)(()=>o.value?.words??[]),l=(0,e.computed)(()=>o.value?.chars??[]),{stop:u}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([n,r])=>{d(),o.value=void 0,n&&(o.value=(0,e.markRaw)((0,t.splitText)(n,r)))},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});(0,n.tryOnUnmounted)(()=>{u(),o.value=void 0,d()});function d(){o.value?.revert()}function f(){o.value?.refresh()}return{splitter:(0,e.shallowReadonly)(o),lines:s,words:c,chars:l,revert:d,refresh:f}}function h(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([n,r])=>{o.value=(0,e.markRaw)(t.waapi.animate(n,r))},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});(0,n.tryOnUnmounted)(()=>{s()});function c(){return o.value?.resume()}function l(){return o.value?.pause()}function u(){return o.value?.alternate()}function d(){return o.value?.play()}function f(){return o.value?.reverse()}function p(t,n){return o.value?.seek((0,e.unref)(t),(0,e.unref)(n))}function m(){return o.value?.restart()}function h(){return o.value?.commitStyles()}function _(){return o.value?.complete()}function v(){return o.value?.cancel()}function y(){return o.value?.revert()}return{animation:(0,e.shallowReadonly)(o),resume:c,pause:l,alternate:u,play:d,reverse:f,seek:p,restart:m,commitStyles:h,complete:_,cancel:v,revert:y,convertEase:g}}function g(n,r=100){return t.waapi.convertEase((0,e.unref)(n),(0,e.unref)(r))}function _(r){let i=(0,e.shallowRef)(void 0),a=[],o=[],s=[],c=!1,l;(0,n.tryOnMounted)(()=>{c=!0,i.value=(0,e.markRaw)((0,t.createScope)((0,e.unref)(r)));for(let e of a)i.value.add(e);for(let[e,t]of o)i.value.add(e,t);for(let e of s)i.value.addOnce(e);a.length=0,o.length=0,s.length=0,(0,e.isRef)(r)&&(l=(0,e.watch)(r,n=>{i.value?.revert(),i.value=(0,e.markRaw)((0,t.createScope)(n))},{flush:`post`}))}),(0,n.tryOnUnmounted)(()=>{i.value?.revert(),l?.()});function u(e){return c?i.value?.add(e):void a.push(e)}function d(e,t){return c?i.value?.add(e,t):void o.push([e,t])}function f(e){return c?i.value?.addOnce(e):void s.push(e)}function p(e){return i.value?.keepTime(e)}function m(){return i.value?.revert()}function h(){return i.value?.refresh()}return{scope:(0,e.shallowReadonly)(i),add:u,registerMethod:d,addOnce:f,keepTime:p,revert:m,refresh:h}}var v=new WeakMap,y={mounted(e,n){n.value&&v.set(e,(0,t.animate)(e,n.value))},updated(e,n){if(n.value===n.oldValue)return;let r=v.get(e);r?.cancel(),r?.revert(),n.value&&v.set(e,(0,t.animate)(e,n.value))},unmounted(e){let t=v.get(e);t?.cancel(),t?.revert(),v.delete(e)}},b=new WeakMap,x={mounted(e,n){b.set(e,(0,t.createDraggable)(e,n.value??{}))},updated(e,n){n.value!==n.oldValue&&(b.get(e)?.revert(),b.set(e,(0,t.createDraggable)(e,n.value??{})))},unmounted(e){b.get(e)?.revert(),b.delete(e)}},S=new WeakMap;function C(e,n){let r=t.svg.createDrawable(e)[0];return{drawable:r,animation:n?(0,t.animate)(r,n):void 0}}var w={mounted(e,t){S.set(e,C(e,t.value))},updated(e,t){if(t.value===t.oldValue)return;let n=S.get(e);n?.animation?.cancel(),n?.animation?.revert(),S.set(e,C(e,t.value))},unmounted(e){let t=S.get(e);t?.animation?.cancel(),t?.animation?.revert(),S.delete(e)}},T=new WeakMap,E={mounted(e,n){n.value&&T.set(e,{animation:t.waapi.animate(e,n.value),originalStyle:e.style.cssText})},updated(e,n){if(n.value===n.oldValue)return;let r=T.get(e);r&&(r.animation.cancel(),e.style.cssText=r.originalStyle,T.delete(e)),n.value&&T.set(e,{animation:t.waapi.animate(e,n.value),originalStyle:e.style.cssText})},unmounted(e){let t=T.get(e);t&&(t.animation.cancel(),e.style.cssText=t.originalStyle,T.delete(e))}},D=new WeakMap;function O(e,n){let{animation:r,...i}=n??{},a=(0,t.splitText)(e,i),o={splitter:a,animation:void 0};if(r){if(i.lines)(document.fonts?.ready??Promise.resolve()).then(()=>{D.get(e)===o&&(o.animation=(0,t.animate)(a.lines,r))});else{let e=i.chars?a.chars:a.words;o.animation=(0,t.animate)(e,r)}}return o}function k(e){e.animation?.cancel(),e.splitter.revert()}var A={mounted(e,t){D.set(e,O(e,t.value))},updated(e,t){if(t.value===t.oldValue)return;let n=D.get(e);n&&k(n),D.set(e,O(e,t.value))},unmounted(e){let t=D.get(e);t&&k(t),D.delete(e)}};exports.useAnimatable=c,exports.useAnimate=i,exports.useDraggable=u,exports.useLayout=d,exports.useRawAnimatable=l,exports.useRawAnimate=a,exports.useScope=_,exports.useSvg=f,exports.useSvgDrawable=p,exports.useText=m,exports.useTimeline=s,exports.useTimer=o,exports.useWaapi=h,exports.vAnimate=y,exports.vDraggable=x,exports.vSvgDrawable=w,exports.vTextSplit=A,exports.vWaapi=E;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue"),t=require("animejs"),n=require("@vueuse/core");function r(e){if(Array.isArray(e)){let t=e.map(e=>(0,n.unrefElement)(e)).filter(e=>e!=null);return t.length>0?t:void 0}return(0,n.unrefElement)(e)}function i(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([e,t])=>{c(e,t)},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});(0,n.tryOnUnmounted)(()=>{s(),g()});function c(n,r){if(_(),!n){console.warn(`Target element is null or undefined`),o.value=void 0;return}o.value=(0,e.markRaw)((0,t.animate)(n,r))}function l(){return o.value?.play()}function u(){return o.value?.reverse()}function d(){return o.value?.pause()}function f(){return o.value?.restart()}function p(){return o.value?.alternate()}function m(){return o.value?.resume()}function h(){return o.value?.complete()}function g(){return o.value?.cancel()}function _(){return o.value?.revert()}function v(e){return o.value?.reset(e)}function y(e,t,n){return o.value?.seek(e,t,n)}function b(e){return o.value?.stretch(e)}function x(){return o.value?.refresh()}return{animation:(0,e.shallowReadonly)(o),play:l,reverse:u,pause:d,restart:f,alternate:p,resume:m,complete:h,cancel:g,revert:_,reset:v,seek:y,stretch:b,refresh:x}}function a(n,i={}){let a=r(n);return a||console.warn(`Target is undefined`),(0,t.animate)(a,(0,e.unref)(i))}function o(r={}){let i=(0,e.shallowRef)(),a;function o(n){n!==a&&(a=n,g(),i.value=(0,e.markRaw)((0,t.createTimer)(n)))}(0,n.tryOnMounted)(()=>{o((0,e.unref)(r))});let{stop:s}=(0,e.watch)(()=>(0,e.unref)(r),e=>{n.isClient&&o(e)},{deep:1});(0,n.tryOnUnmounted)(()=>{s(),g()});function c(){return i.value?.play()}function l(){return i.value?.reverse()}function u(){return i.value?.pause()}function d(){return i.value?.restart()}function f(){return i.value?.alternate()}function p(){return i.value?.resume()}function m(){return i.value?.complete()}function h(e){return i.value?.reset(e)}function g(){return i.value?.cancel()}function _(){return i.value?.revert()}function v(e,t,n){return i.value?.seek(e,t,n)}function y(e){return i.value?.stretch(e)}return{timer:(0,e.shallowReadonly)(i),play:c,reverse:l,pause:u,restart:d,alternate:f,resume:p,complete:m,reset:h,cancel:g,revert:_,seek:v,stretch:y}}function s(i={}){let a=!1,o,s=[],c=(0,e.shallowRef)();function l(){for(let t of s)t.type===`add`?c.value?.add(r(t.targets),(0,e.toValue)(t.params),t.position):t.type===`set`?c.value?.set(r(t.targets),(0,e.toValue)(t.params),t.position):c.value?.call(t.callback,t.position)}function u(n){n!==o&&(o=n,O(),c.value=(0,e.markRaw)((0,t.createTimeline)(n)),l())}let{stop:d}=(0,e.watch)(()=>(0,e.unref)(i),e=>{n.isClient&&u(e)},{flush:`post`,deep:1});(0,n.tryOnMounted)(()=>{u((0,e.unref)(i)),a=!0}),(0,n.tryOnUnmounted)(()=>{d(),D()});function f(t,n,i){return s.push({type:`add`,targets:t,params:n,position:i}),a?{...c.value?.add(r(t),(0,e.toValue)(n),i),add:f,set:p,remove:m}:{...c.value,add:f,set:p,remove:m}}function p(t,n,i){return s.push({type:`set`,targets:t,params:n,position:i}),a?{...c.value?.set(r(t),(0,e.toValue)(n),i),add:f,set:p,remove:m}:{...c.value,add:f,set:p,remove:m}}function m(e,t){return a?{...c.value?.remove(r(e),t),add:f,set:p,remove:m}:(console.warn(`Cannot remove from timeline before mount`),{...c.value,add:f,set:p,remove:m})}function h(e,t){return c.value?.sync(e,t)}function g(e,t){return c.value?.label(e,t)}function _(e,t){return s.push({type:`call`,callback:e,position:t}),c.value?.call(e,t)}function v(e){return c.value?.init(e)}function y(){return c.value?.play()}function b(){return c.value?.reverse()}function x(){return c.value?.pause()}function S(){return c.value?.restart()}function C(){return c.value?.alternate()}function w(){return c.value?.resume()}function T(){return c.value?.complete()}function E(e){return c.value?.reset(e)}function D(){return c.value?.cancel()}function O(){return c.value?.revert()}function k(e,t,n){return c.value?.seek(e,t,n)}function A(e){return c.value?.stretch(e)}function j(){return c.value?.refresh()}return{timeline:(0,e.shallowReadonly)(c),add:f,set:p,sync:h,label:g,remove:m,call:_,init:v,play:y,reverse:b,pause:x,restart:S,alternate:C,resume:w,complete:T,reset:E,cancel:D,revert:O,seek:k,stretch:A,refresh:j}}function c(i,a={}){let o=(0,e.shallowRef)(),s=(0,e.computed)(()=>({el:r(i),opt:(0,e.unref)(a)})),{stop:c}=(0,e.watch)(s,({el:n,opt:r})=>{if(l(),!n){console.warn(`Targets element is null or undefined`),o.value=void 0;return}o.value=(0,e.markRaw)((0,t.createAnimatable)(n,r))},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});(0,n.tryOnUnmounted)(()=>{c(),l()});function l(){return o.value?.revert()}return{animatable:(0,e.shallowReadonly)(o),revert:l}}function l(n,i={}){let a=r(n);return a||console.warn(`Targets element is null or undefined`),(0,t.createAnimatable)(a,(0,e.unref)(i))}function u(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([n,r])=>{if(g(),!n){console.warn(`Targets element is null or undefined`),o.value=void 0;return}o.value=(0,e.markRaw)((0,t.createDraggable)(n,r))},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});(0,n.tryOnUnmounted)(()=>{g(),s()});function c(){return o.value?.disable()}function l(){return o.value?.enable()}function u(e,t){return o.value?.setX(e,t)}function d(e,t){return o.value?.setY(e,t)}function f(e,t,n){return o.value?.animateInView(e,t,n)}function p(e,t,n){return o.value?.scrollInView(e,t,n)}function m(){return o.value?.stop()}function h(){return o.value?.reset()}function g(){return o.value?.revert()}function _(){return o.value?.refresh()}return{draggable:(0,e.shallowReadonly)(o),disable:c,enable:l,setX:u,setY:d,animateInView:f,scrollInView:p,stop:m,reset:h,revert:g,refresh:_}}function d(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([n,r])=>{if(d(),!n){console.warn(`Target element is null or undefined`),o.value=void 0;return}o.value=(0,e.markRaw)((0,t.createLayout)(n,r))},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});(0,n.tryOnUnmounted)(()=>{d(),s()});function c(){return o.value?.record()}function l(e){return o.value?.animate(e)}function u(e,t){return o.value?.update(e,t)}function d(){return o.value?.revert()}return{layout:(0,e.shallowReadonly)(o),record:c,animate:l,update:u,revert:d}}function f(i,a,o={}){let s,c=(0,e.computed)(()=>{if(s?.revert(),s=void 0,!n.isClient)return;let c=r(i),l=r(a);if(c&&l)return s=(0,e.markRaw)((0,t.onScroll)({...(0,e.unref)(o),container:c,target:l})),s}),l=(0,e.computed)(()=>c.value??!1),u=(0,e.computed)(()=>({autoplay:l.value}));(0,n.tryOnUnmounted)(()=>s?.revert());function d(){return c.value?.refresh()}function f(){return c.value?.revert()}function p(){c.value?.debug()}function m(){return c.value?.removeDebug()}function h(e){return c.value?.link(e)}return{observer:c,autoplay:l,autoplayComputed:u,refresh:d,revert:f,debug:p,removeDebug:m,link:h}}function p(){function n(n,r){return(i,a,o,s)=>{let c=(0,e.unref)(n);return c?t.svg.morphTo(c,(0,e.unref)(r))(i,a,o,s):``}}function r(n,r){let i=(0,e.unref)(n)??``;return t.svg.createMotionPath(i,(0,e.unref)(r))}return{morphTo:n,createMotionPath:r}}function m(i,a=0,o=0){let s=(0,e.shallowRef)(),{stop:c}=(0,e.watch)(()=>r(i),n=>{if(s.value=void 0,!n){console.warn(`[useSvgDrawable] Target element is null or undefined`);return}s.value=(0,e.markRaw)(t.svg.createDrawable(n,(0,e.unref)(a),(0,e.unref)(o))[0])},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});return(0,n.tryOnUnmounted)(()=>{c(),s.value=void 0}),{drawable:(0,e.shallowReadonly)(s)}}function h(i,a){let o=(0,e.shallowRef)(),s=(0,e.computed)(()=>o.value?.lines??[]),c=(0,e.computed)(()=>o.value?.words??[]),l=(0,e.computed)(()=>o.value?.chars??[]),{stop:u}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([n,r])=>{d(),o.value=void 0,n&&(o.value=(0,e.markRaw)((0,t.splitText)(n,r)))},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});(0,n.tryOnUnmounted)(()=>{u(),o.value=void 0,d()});function d(){o.value?.revert()}function f(){o.value?.refresh()}return{splitter:(0,e.shallowReadonly)(o),lines:s,words:c,chars:l,revert:d,refresh:f}}function g(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([n,r])=>{o.value=(0,e.markRaw)(t.waapi.animate(n,r))},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});(0,n.tryOnUnmounted)(()=>{s()});function c(){return o.value?.resume()}function l(){return o.value?.pause()}function u(){return o.value?.alternate()}function d(){return o.value?.play()}function f(){return o.value?.reverse()}function p(t,n){return o.value?.seek((0,e.unref)(t),(0,e.unref)(n))}function m(){return o.value?.restart()}function h(){return o.value?.commitStyles()}function g(){return o.value?.complete()}function v(){return o.value?.cancel()}function y(){return o.value?.revert()}return{animation:(0,e.shallowReadonly)(o),resume:c,pause:l,alternate:u,play:d,reverse:f,seek:p,restart:m,commitStyles:h,complete:g,cancel:v,revert:y,convertEase:_}}function _(n,r=100){return t.waapi.convertEase((0,e.unref)(n),(0,e.unref)(r))}function v(r){let i=(0,e.shallowRef)(void 0),a=[],o=[],s=[],c=!1,l;(0,n.tryOnMounted)(()=>{c=!0,i.value=(0,e.markRaw)((0,t.createScope)((0,e.unref)(r)));for(let e of a)i.value.add(e);for(let[e,t]of o)i.value.add(e,t);for(let e of s)i.value.addOnce(e);a.length=0,o.length=0,s.length=0,(0,e.isRef)(r)&&(l=(0,e.watch)(r,n=>{i.value?.revert(),i.value=(0,e.markRaw)((0,t.createScope)(n))},{flush:`post`}))}),(0,n.tryOnUnmounted)(()=>{i.value?.revert(),l?.()});function u(e){return c?i.value?.add(e):void a.push(e)}function d(e,t){return c?i.value?.add(e,t):void o.push([e,t])}function f(e){return c?i.value?.addOnce(e):void s.push(e)}function p(e){return i.value?.keepTime(e)}function m(){return i.value?.revert()}function h(){return i.value?.refresh()}return{scope:(0,e.shallowReadonly)(i),add:u,registerMethod:d,addOnce:f,keepTime:p,revert:m,refresh:h}}function y(e){return e.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}function b(e){let t={},n={};for(let[r,i]of Object.entries(e??{})){let e=x(i);if(e===void 0)continue;let a=D[r]??r;if(E.includes(a)){let t=T(e,w(a));t!==void 0&&(n[a]=t)}else r.startsWith(`--`)?e!==``&&(t[r]=String(e)):O.has(r)?C(e)&&(t[y(r)]=String(e)):typeof e==`string`&&A.test(e)&&(t[y(r)]=e)}let r=E.filter(e=>e in n).map(e=>`${e}(${n[e]})`).join(` `);return r&&(t.transform=r),t}function x(e){if(Array.isArray(e))return e.length===2?S(e[0]):void 0;if(typeof e==`object`&&e&&`from`in e)return S(e.from)}function S(e){return typeof e==`number`||typeof e==`string`?e:void 0}function C(e){return typeof e==`number`?Number.isFinite(e):k.test(e)}function w(e){return e.startsWith(`scale`)?``:e.startsWith(`rotate`)||e.startsWith(`skew`)?`deg`:`px`}function T(e,t){return C(e)?`${e}${t}`:typeof e==`string`&&A.test(e)?e:void 0}var E=[`perspective`,`translateX`,`translateY`,`translateZ`,`rotate`,`rotateX`,`rotateY`,`rotateZ`,`scale`,`scaleX`,`scaleY`,`scaleZ`,`skew`,`skewX`,`skewY`],D={x:`translateX`,y:`translateY`,z:`translateZ`},O=new Set([`opacity`,`zIndex`,`order`,`flexGrow`,`flexShrink`,`fontWeight`]),k=/^-?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?$/i,A=/^-?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?([a-z]+|%)$/i,j=`data-anime-ssr`,M=`data-anime-ssr-attrs`;function N({style:e={},attrs:t={}}){let n={},r=Object.keys(e),i=Object.keys(t);return r.length&&(n.style=e,n[j]=r.join(`,`)),i.length&&(Object.assign(n,t),n[M]=i.join(`,`)),n}function P(e,t){let n=e.getAttribute(j);if(n!==null){let r=F(t?.style);for(let t of n.split(`,`)){let n=r.getPropertyValue(t);n?e.style.setProperty(t,n,r.getPropertyPriority(t)):e.style.removeProperty(t)}e.removeAttribute(j)}let r=e.getAttribute(M);if(r!==null){for(let n of r.split(`,`)){let r=t?.[n];r==null?e.removeAttribute(n):e.setAttribute(n,String(r))}e.removeAttribute(M)}}function F(t){let n=document.createElement(`div`).style,r=(0,e.normalizeStyle)(t);if(typeof r==`string`)n.cssText=r;else if(r)for(let[e,t]of Object.entries(r))t!=null&&n.setProperty(e.startsWith(`--`)?e:y(e),String(t));return n}var I=new WeakMap,L={getSSRProps(e){return N({style:b(e.value)})},created(e,t,n){P(e,n.props)},mounted(e,n){n.value&&I.set(e,(0,t.animate)(e,n.value))},updated(e,n){if(n.value===n.oldValue)return;let r=I.get(e);r?.cancel(),r?.revert(),n.value&&I.set(e,(0,t.animate)(e,n.value))},unmounted(e){let t=I.get(e);t?.cancel(),t?.revert(),I.delete(e)}},R=new WeakMap,z={mounted(e,n){R.set(e,(0,t.createDraggable)(e,n.value??{}))},updated(e,n){n.value!==n.oldValue&&(R.get(e)?.revert(),R.set(e,(0,t.createDraggable)(e,n.value??{})))},unmounted(e){R.get(e)?.revert(),R.delete(e)}};function B(e){let[t,n]=H(V(e?.draw)),r=t*-U,i=n*U+r,a=U+(t===0&&n===1||t===1&&n===0?0:10)-i,o=b(e);return t===n&&(o[`stroke-linecap`]=`butt`),{attrs:{pathLength:`${U}`,"stroke-dasharray":`${i} ${a}`,"stroke-dashoffset":`${r}`},style:o}}function V(e){return Array.isArray(e)?e.length>=2&&typeof e[0]==`string`?e[0]:W:typeof e==`object`&&e&&`from`in e&&typeof e.from==`string`?e.from:W}function H(e){let t=e.trim().split(/\s+/),n=+t[0],r=+t[1];return Number.isFinite(n)&&Number.isFinite(r)?[n,r]:[0,0]}var U=1e3,W=`0 0`,G=new WeakMap;function K(e,n){let r=t.svg.createDrawable(e)[0];return{drawable:r,animation:n?(0,t.animate)(r,n):void 0}}var q={getSSRProps(e){return N(B(e.value))},created(e,t,n){P(e,n.props)},mounted(e,t){G.set(e,K(e,t.value))},updated(e,t){if(t.value===t.oldValue)return;let n=G.get(e);n?.animation?.cancel(),n?.animation?.revert(),G.set(e,K(e,t.value))},unmounted(e){let t=G.get(e);t?.animation?.cancel(),t?.animation?.revert(),G.delete(e)}},J=new WeakMap;function Y(e,n){let r=e.style.cssText;return{animation:t.waapi.animate(e,n),originalStyle:r}}var X={getSSRProps(e){return N({style:b(e.value)})},created(e,t,n){P(e,n.props)},mounted(e,t){t.value&&J.set(e,Y(e,t.value))},updated(e,t){if(t.value===t.oldValue)return;let n=J.get(e);n&&(n.animation.cancel(),e.style.cssText=n.originalStyle,J.delete(e)),t.value&&J.set(e,Y(e,t.value))},unmounted(e){let t=J.get(e);t&&(t.animation.cancel(),e.style.cssText=t.originalStyle,J.delete(e))}},Z=new WeakMap;function Q(e,n,r){let{animation:i,ssrHidden:a,...o}=n??{},s=(0,t.splitText)(e,o),c={splitter:s,animation:void 0};if(i){if(o.lines)(document.fonts?.ready??Promise.resolve()).then(()=>{Z.get(e)===c&&(c.animation=(0,t.animate)(s.lines,i),P(e,r))});else{let n=o.chars?s.chars:s.words;c.animation=(0,t.animate)(n,i),P(e,r)}}else P(e,r);return c}function $(e){e.animation?.cancel(),e.splitter.revert()}var ee={getSSRProps(e){return e.value?.ssrHidden?N({style:{visibility:`hidden`}}):{}},created(){},mounted(e,t,n){Z.set(e,Q(e,t.value,n.props))},updated(e,t,n){if(t.value===t.oldValue)return;let r=Z.get(e);r&&$(r),Z.set(e,Q(e,t.value,n.props))},unmounted(e){let t=Z.get(e);t&&$(t),Z.delete(e)}};exports.useAnimatable=c,exports.useAnimate=i,exports.useDraggable=u,exports.useLayout=d,exports.useRawAnimatable=l,exports.useRawAnimate=a,exports.useScope=v,exports.useScroll=f,exports.useSvg=p,exports.useSvgDrawable=m,exports.useText=h,exports.useTimeline=s,exports.useTimer=o,exports.useWaapi=g,exports.vAnimate=L,exports.vDraggable=z,exports.vSvgDrawable=q,exports.vTextSplit=ee,exports.vWaapi=X;
 //# sourceMappingURL=index.cjs.map