svg-scroll-draw 2.15.2 → 2.16.0

package/dist/timeline/index.d.ts

@@ -1,32 +1,4 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
-interface ScrollDrawInstance {
-    destroy: () => void;
-    /** Reset and replay the animation from the beginning. */
-    replay: () => void;
-    /** Pause the animation at the current progress. */
-    pause: () => void;
-    /** Resume a paused animation. */
-    resume: () => void;
-    /** Jump to a specific progress value (0–1) and pause. */
-    seek: (progress: number) => void;
-    /** Returns current draw progress (0–1). */
-    getProgress: () => number;
-    /**
-     * Re-measure after a layout change: path lengths, and the scroll trigger window.
-     *
-     * The engine already re-measures on `resize`, on `orientationchange`, and via a
-     * `ResizeObserver` on the document element — but none of those fire for a layout
-     * change that leaves the document height alone, such as a tab switching, a
-     * sibling collapsing, or a font swapping inside a fixed-height box. Call this
-     * after one of those.
-     *
-     * Optional on this shared type because several instances here are fan-outs over
-     * other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
-     * `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
-     * use `instance.refresh?.()` if you hold an instance of unknown origin.
-     */
-    refresh?: () => void;
-}
+import { E as EasingName, S as ScrollDrawInstance } from '../types-DHU1zNEw.js';
 
 interface TimelineTrack {
     /** CSS selector for paths within the container to animate on this track. */

package/dist/timeline/index.mjs

@@ -1,23 +1,23 @@
-function Le({bounces:e=3,decay:n=.5}={}){let r=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,n)),s=Math.sqrt(o),m=0,E=[];for(let c=0;c<r;c++){let p=Math.pow(s,c);E.push(p),m+=p;}let f=[0],w=0;for(let c=0;c<r;c++)w+=E[c]/m,f.push(w);return c=>{if(c<=0)return 0;if(c>=1)return 1;for(let p=0;p<r;p++)if(c<=f[p+1]){let g=(c-f[p])/(f[p+1]-f[p]);if(p===0)return g*(2-g);let T=1-Math.pow(o,p);return T+(1-T)*(2*g-1)*(2*g-1)}return 1}}function Ie({amplitude:e=1,period:n=.4}={}){let r=Math.max(1,e),o=Math.max(.1,n),s=r<=1?o/4:o/(2*Math.PI)*Math.asin(1/r);return m=>m<=0?0:m>=1?1:r*Math.pow(2,-10*m)*Math.sin((m-s)*(2*Math.PI)/o)+1}var H={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:Le(),elastic:Ie()};function X(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[r="top",o="bottom"]=n.split(/\s+/).filter(Boolean);return {element:r,viewport:o}}function re(e,n,r,o){switch(o){case "top":return e+r;case "center":return e+r+n/2;case "bottom":return e+r+n;default:return e+r}}function oe(e,n){if(/^\d+(\.\d+)?%$/.test(e))return n*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return n/2;case "bottom":return n;default:return n}}function K(e){let n=e.tagName.toLowerCase();if(n==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(n==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function Re(e,n,r){return Math.min(r,Math.max(n,e))}function ie(e,n,r,o){return r===n?0:Re((e-n)/(r-n)*o,0,1)}function se(e,n,r,o,s){let m=re(e.top,e.height,n,o.element)-oe(o.viewport,r),E=re(e.top,e.height,n,s.element)-oe(s.viewport,r);return {tStart:m,tEnd:E}}function ae(){return typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia("(prefers-reduced-motion: reduce)").matches}function ue(e){if(typeof window>"u"||typeof window.matchMedia!="function")return ()=>{};let n=window.matchMedia("(prefers-reduced-motion: reduce)"),r=s=>e(!!s.matches);if(typeof n.addEventListener=="function")return n.addEventListener("change",r),()=>n.removeEventListener("change",r);let o=n;return o.addListener?.(r),()=>o.removeListener?.(r)}var Se=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function ce(e,...n){Se&&console.warn(`[svg-scroll-draw] ${e}`,...n);}var le=Symbol.for("svg-scroll-draw.registry");function de(){let e=globalThis;return e[le]||(e[le]=new Map)}function pe(e,n){de().set(e,n);}function me(e){de().delete(e);}var fe=["#ff90e8","#ffc900","#5865F2","#22c55e","#f59e0b","#ef4444","#aaa","#60a5fa"];function Ve(e,n){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let o=typeof e=="string"?document.querySelector(e):e;if(!o)return ce("timeline: Container not found:",e),r;let s=o,{trigger:m={},speed:E=1,once:f=false,axis:w="y",tracks:c,onComplete:p,repeat:g,repeatDelay:T=0,loop:P=false,loopDuration:ge=1500,debug:be=false,label:he,respectReducedMotion:U=true}=n,ye=X(m.start??"top bottom"),we=X(m.end??"bottom top"),D=g==="infinite"?1/0:g??0,l,V=P===true?1/0:typeof P=="number"?P:0,b=false,G=0,L=V,z=U&&ae(),xe=ue(t=>{z=U&&t,z&&(b=false,clearTimeout(l),l=void 0);}),O=()=>V>0&&!z,Q=new Map,q=c.map(t=>{let a=typeof t.easing=="function"?t.easing:H[t.easing??"linear"]??H.linear,d=Array.from(s.querySelectorAll(t.selector)),u=d.map(i=>K(i));return d.forEach((i,h)=>{Q.has(i)||Q.set(i,i.getAttribute("style")??""),i.style.strokeDasharray=`${u[h]}`,i.style.strokeDashoffset=`${u[h]}`,t.fade&&(i.style.opacity="0");}),{...t,elements:d,lengths:u,easeFn:a}});function ve(){for(let[t,a]of Q)a?t.setAttribute("style",a):t.removeAttribute("style");}let N=0,W=0,_=false,x=false,v=0,R=false,S=-1,M=0,y=null;be&&(y=document.createElement("div"),Object.assign(y.style,{position:"fixed",bottom:"16px",left:"16px",zIndex:"9999",background:"rgba(0,0,0,0.88)",backdropFilter:"blur(8px)",border:"1px solid rgba(255,255,255,0.1)",borderRadius:"10px",padding:"10px 14px",fontFamily:"monospace",fontSize:"11px",color:"#fff",minWidth:"240px",pointerEvents:"none",lineHeight:"1.4"}),document.body.appendChild(y));function Me(t){if(!y)return;let a=he??(typeof e=="string"?e:"timeline"),d=c.map(({selector:u,from:i,to:h},j)=>{let I=fe[j%fe.length],C=h>i?Math.min(1,Math.max(0,(t-i)/(h-i))):0,F=Math.round(C*100);return `<div style="margin:4px 0">
+import {a as a$2}from'../chunk-5PJEKEEP.mjs';import {a as a$1}from'../chunk-AJ22VSHC.mjs';import {a as a$3}from'../chunk-YZV4Z3EQ.mjs';import {a,c,b as b$2}from'../chunk-PEFR3ZB7.mjs';import {d}from'../chunk-DM6EDKWH.mjs';import'../chunk-4DOJSIEQ.mjs';import {a as a$4,b as b$1}from'../chunk-BCV4RAIX.mjs';import {b}from'../chunk-LFSU6LR3.mjs';var ae=["#ff90e8","#ffc900","#5865F2","#22c55e","#f59e0b","#ef4444","#aaa","#60a5fa"];function Ie(u,le){let V={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return V;let W=typeof u=="string"?document.querySelector(u):u;if(!W)return b("timeline: Container not found:",u),V;let l=W,{trigger:_={},speed:ce=1,once:$=false,axis:h="y",tracks:B,onComplete:pe,repeat:w,repeatDelay:I=0,loop:k=false,loopDuration:de=1500,debug:fe=false,label:ue,respectReducedMotion:U=true}=le,me=a(_.start??"top bottom"),ge=a(_.end??"bottom top"),x=w==="infinite"?1/0:w??0,r,A=k===true?1/0:typeof k=="number"?k:0,s=false,L=0,m=A,R=U&&a$1(),ye=a$2(e=>{R=U&&e,R&&(s=false,clearTimeout(r),r=void 0);}),F=()=>A>0&&!R,z=new Map,C=B.map(e=>{let n=typeof e.easing=="function"?e.easing:d[e.easing??"linear"]??d.linear,i=Array.from(l.querySelectorAll(e.selector)),o=i.map(t=>a$3(t));return i.forEach((t,a)=>{z.has(t)||z.set(t,t.getAttribute("style")??""),t.style.strokeDasharray=`${o[a]}`,t.style.strokeDashoffset=`${o[a]}`,e.fade&&(t.style.opacity="0");}),{...e,elements:i,lengths:o,easeFn:n}});function be(){for(let[e,n]of z)n?e.setAttribute("style",n):e.removeAttribute("style");}let P=0,H=0,v=false,p=false,d$1=0,y=false,b$3=-1,f=0,c$1=null;fe&&(c$1=document.createElement("div"),Object.assign(c$1.style,{position:"fixed",bottom:"16px",left:"16px",zIndex:"9999",background:"rgba(0,0,0,0.88)",backdropFilter:"blur(8px)",border:"1px solid rgba(255,255,255,0.1)",borderRadius:"10px",padding:"10px 14px",fontFamily:"monospace",fontSize:"11px",color:"#fff",minWidth:"240px",pointerEvents:"none",lineHeight:"1.4"}),document.body.appendChild(c$1));function he(e){if(!c$1)return;let n=ue??(typeof u=="string"?u:"timeline"),i=B.map(({selector:o,from:t,to:a},q)=>{let g=ae[q%ae.length],D=a>t?Math.min(1,Math.max(0,(e-t)/(a-t))):0,S=Math.round(D*100);return `<div style="margin:4px 0">
         <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:2px">
-          <span style="color:${I};max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${u}</span>
-          <span style="color:#666;margin-left:8px">${F}%</span>
+          <span style="color:${g};max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${o}</span>
+          <span style="color:#666;margin-left:8px">${S}%</span>
         </div>
         <div style="height:3px;background:#2a2a2a;border-radius:2px;position:relative;overflow:hidden">
-          <div style="position:absolute;left:${i*100}%;width:${(h-i)*100}%;height:100%;background:${I}33;border-radius:2px"></div>
-          <div style="position:absolute;left:${i*100}%;width:${(h-i)*C*100}%;height:100%;background:${I};border-radius:2px;transition:width 0.05s linear"></div>
+          <div style="position:absolute;left:${t*100}%;width:${(a-t)*100}%;height:100%;background:${g}33;border-radius:2px"></div>
+          <div style="position:absolute;left:${t*100}%;width:${(a-t)*D*100}%;height:100%;background:${g};border-radius:2px;transition:width 0.05s linear"></div>
         </div>
-      </div>`}).join("");y.innerHTML=`
+      </div>`}).join("");c$1.innerHTML=`
       <div style="color:#555;margin-bottom:8px;font-size:10px;text-transform:uppercase;letter-spacing:0.12em;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:6px">
-        scrollDrawTimeline \xB7 ${a}
+        scrollDrawTimeline \xB7 ${n}
       </div>
-      ${d}
+      ${i}
       <div style="margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.06)">
         <div style="display:flex;justify-content:space-between;margin-bottom:2px">
           <span style="color:#555">scroll</span>
-          <span style="color:#666">${Math.round(t*100)}%</span>
+          <span style="color:#666">${Math.round(e*100)}%</span>
         </div>
         <div style="height:2px;background:#2a2a2a;border-radius:1px;overflow:hidden">
-          <div style="height:100%;background:#fff;border-radius:1px;width:${t*100}%;transition:width 0.05s linear"></div>
+          <div style="height:100%;background:#fff;border-radius:1px;width:${e*100}%;transition:width 0.05s linear"></div>
         </div>
-      </div>`;}function Y(){return w==="x"?window.scrollX:window.scrollY}function Ee(){return w==="x"?window.innerWidth:window.innerHeight}function J(){let t=s.getBoundingClientRect(),a=Y(),d=w==="x"?t.left:t.top,u=w==="x"?t.width:t.height,i=se({top:d,height:u},a,Ee(),ye,we);N=i.tStart,W=i.tEnd;}function Z(t){s.style.setProperty("--scroll-draw-progress",String(t)),q.forEach(({elements:a,lengths:d,from:u,to:i,easeFn:h,fade:j})=>{let I=i-u,C=I>0?Math.min(1,Math.max(0,(t-u)/I)):0,F=h(C);a.forEach((ne,Te)=>{ne.style.strokeDashoffset=`${d[Te]*(1-F)}`,j&&(ne.style.opacity=String(F));});}),Me(t);}function $(){S=-1,M=0,R=false,q.forEach(({elements:t,lengths:a,fade:d})=>{t.forEach((u,i)=>{u.style.strokeDashoffset=`${a[i]}`,d&&(u.style.opacity="0");});}),s.style.setProperty("--scroll-draw-progress","0");}function B(){if(!_||x)return;let t;b?t=Math.min(1,(performance.now()-G)/ge):(t=ie(Y(),N,W,E),(f||O())&&(S=Math.max(S,t),t=S)),M=t,Z(t),t>=1&&!R?(R=true,p?.(),O()&&!b&&!l?l=setTimeout(()=>{l=void 0,L!==1/0&&L--,$(),b=true,G=performance.now();},T):D>0&&f&&!b&&!l&&(l=setTimeout(()=>{l=void 0,D!==1/0&&D--,$();},T))):!b&&t<1&&!f&&(R=false),b&&t>=1&&!l&&(R=false,L>0&&O()?l=setTimeout(()=>{l=void 0,L!==1/0&&L--,$(),G=performance.now();},T):b=false),v=requestAnimationFrame(B);}J();let ee=new IntersectionObserver(t=>{t.forEach(a=>{_=a.isIntersecting,_&&!x?v=requestAnimationFrame(B):cancelAnimationFrame(v);});},{threshold:0});ee.observe(s);function te(){q.forEach(({elements:t,lengths:a})=>{t.forEach((d,u)=>{a[u]=K(d),d.style.strokeDasharray=`${a[u]}`;});}),J();}let A;function k(){clearTimeout(A),A=setTimeout(te,150);}return window.addEventListener("resize",k),window.addEventListener("orientationchange",k),pe(s,{type:"draw",getProgress:()=>M,getTrigger:()=>({tStart:N,tEnd:W})}),{destroy(){cancelAnimationFrame(v),clearTimeout(A),clearTimeout(l),ee.disconnect(),me(s),window.removeEventListener("resize",k),window.removeEventListener("orientationchange",k),xe(),y&&(y.remove(),y=null),ve(),s.style.removeProperty("--scroll-draw-progress");},refresh(){clearTimeout(A),te();},replay(){D=g==="infinite"?1/0:g??0,L=V,b=false,clearTimeout(l),l=void 0,$(),x=false;},pause(){x=true,cancelAnimationFrame(v);},resume(){x&&(x=false,_&&(v=requestAnimationFrame(B)));},seek(t){M=Math.min(1,Math.max(0,t)),S=M,x=true,cancelAnimationFrame(v),Z(M);},getProgress(){return M}}}export{Ve as scrollDrawTimeline};
+      </div>`;}function X(){return h==="x"?window.scrollX:window.scrollY}function we(){return h==="x"?window.innerWidth:window.innerHeight}function Y(){let e=l.getBoundingClientRect(),n=X(),i=h==="x"?e.left:e.top,o=h==="x"?e.width:e.height,t=c({top:i,height:o},n,we(),me,ge);P=t.tStart,H=t.tEnd;}function J(e){l.style.setProperty("--scroll-draw-progress",String(e)),C.forEach(({elements:n,lengths:i,from:o,to:t,easeFn:a,fade:q})=>{let g=t-o,D=g>0?Math.min(1,Math.max(0,(e-o)/g)):0,S=a(D);n.forEach((Z,xe)=>{Z.style.strokeDashoffset=`${i[xe]*(1-S)}`,q&&(Z.style.opacity=String(S));});}),he(e);}function T(){b$3=-1,f=0,y=false,C.forEach(({elements:e,lengths:n,fade:i})=>{e.forEach((o,t)=>{o.style.strokeDashoffset=`${n[t]}`,i&&(o.style.opacity="0");});}),l.style.setProperty("--scroll-draw-progress","0");}function O(){if(!v||p)return;let e;s?e=Math.min(1,(performance.now()-L)/de):(e=b$2(X(),P,H,ce),($||F())&&(b$3=Math.max(b$3,e),e=b$3)),f=e,J(e),e>=1&&!y?(y=true,pe?.(),F()&&!s&&!r?r=setTimeout(()=>{r=void 0,m!==1/0&&m--,T(),s=true,L=performance.now();},I):x>0&&$&&!s&&!r&&(r=setTimeout(()=>{r=void 0,x!==1/0&&x--,T();},I))):!s&&e<1&&!$&&(y=false),s&&e>=1&&!r&&(y=false,m>0&&F()?r=setTimeout(()=>{r=void 0,m!==1/0&&m--,T(),L=performance.now();},I):s=false),d$1=requestAnimationFrame(O);}Y();let K=new IntersectionObserver(e=>{e.forEach(n=>{v=n.isIntersecting,v&&!p?d$1=requestAnimationFrame(O):cancelAnimationFrame(d$1);});},{threshold:0});K.observe(l);function Q(){C.forEach(({elements:e,lengths:n})=>{e.forEach((i,o)=>{n[o]=a$3(i),i.style.strokeDasharray=`${n[o]}`;});}),Y();}let E;function M(){clearTimeout(E),E=setTimeout(Q,150);}return window.addEventListener("resize",M),window.addEventListener("orientationchange",M),a$4(l,{type:"draw",getProgress:()=>f,getTrigger:()=>({tStart:P,tEnd:H})}),{destroy(){cancelAnimationFrame(d$1),clearTimeout(E),clearTimeout(r),K.disconnect(),b$1(l),window.removeEventListener("resize",M),window.removeEventListener("orientationchange",M),ye(),c$1&&(c$1.remove(),c$1=null),be(),l.style.removeProperty("--scroll-draw-progress");},refresh(){clearTimeout(E),Q();},replay(){x=w==="infinite"?1/0:w??0,m=A,s=false,clearTimeout(r),r=void 0,T(),p=false;},pause(){p=true,cancelAnimationFrame(d$1);},resume(){p&&(p=false,v&&(d$1=requestAnimationFrame(O)));},seek(e){f=Math.min(1,Math.max(0,e)),b$3=f,p=true,cancelAnimationFrame(d$1),J(f);},getProgress(){return f}}}export{Ie as scrollDrawTimeline};

package/dist/types-DHU1zNEw.d.mts

@@ -0,0 +1,147 @@
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
+type PresetName = 'sketch' | 'reveal' | 'typewriter' | 'cinematic' | 'spring';
+interface TriggerConfig {
+    start?: string;
+    end?: string;
+}
+interface ScrollDrawOptions {
+    /**
+     * Apply a named preset as the base configuration. User-supplied options
+     * always override the preset. Available presets:
+     * - `'sketch'`     — staggered ease-in draw, pencil feel
+     * - `'reveal'`     — fade + ease-out, draws once on viewport entry
+     * - `'typewriter'` — fast linear draw with stagger
+     * - `'cinematic'`  — slow ease-in-out with fade, dramatic entrance
+     * - `'spring'`     — spring easing, bouncy organic feel
+     */
+    preset?: PresetName;
+    selector?: string;
+    speed?: number;
+    fade?: boolean;
+    easing?: EasingName | ((t: number) => number);
+    trigger?: TriggerConfig;
+    stagger?: number;
+    direction?: 'forward' | 'reverse';
+    once?: boolean;
+    debug?: boolean;
+    /** Scroll axis to track. 'y' (default) for vertical, 'x' for horizontal. */
+    axis?: 'x' | 'y';
+    /** CSS selector or Element for a custom scroll container (default: window). */
+    scrollContainer?: string | Element;
+    /** Automatically reverse the animation when the user scrolls back up. */
+    autoReverse?: boolean;
+    /** Delay in milliseconds before the engine starts observing. */
+    delay?: number;
+    /** Animate stroke color. Single string = static override. Tuple = interpolate from → to. */
+    strokeColor?: string | [string, string];
+    /** Animate stroke width. Single number = static override. Tuple = interpolate from → to. */
+    strokeWidth?: number | [number, number];
+    /** Animate fill opacity. Single number = static override. Tuple [from, to] = interpolate as the path draws. Use [0, 1] to flood fill in sync with the stroke draw. */
+    fillOpacity?: number | [number, number];
+    /**
+     * Reveal the container using CSS clip-path instead of stroke-dashoffset.
+     * Works on any content — SVG, images, text, divs.
+     *
+     * Pass a direction string to control which edge the reveal starts from,
+     * or `true` as shorthand for `'left'`.
+     *
+     * Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`
+     */
+    clip?: boolean | 'left' | 'right' | 'top' | 'bottom' | 'center';
+    /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
+    waypoints?: Record<number, () => void>;
+    /** Scale animation speed by scroll velocity — faster scrolling = faster draw. Pass a number to control sensitivity (default 1). */
+    velocityScale?: boolean | number;
+    /** IntersectionObserver threshold (0–1). Default 0. */
+    threshold?: number;
+    /** IntersectionObserver rootMargin. Default "0px". */
+    rootMargin?: string;
+    /** Repeat the animation N times after completion. Use 'infinite' to loop forever. */
+    repeat?: number | 'infinite';
+    /** Milliseconds to wait between repeats. Default 0. */
+    repeatDelay?: number;
+    /**
+     * Target path `d` attribute to morph toward as the animation progresses.
+     * Paths must have compatible command structures (same number of numeric tokens).
+     *
+     * Only applies to `<path>` elements — silently no-ops on `<rect>`, `<circle>`,
+     * `<line>`, and other SVG shape elements.
+     */
+    morphTo?: string;
+    onProgress?: (alpha: number) => void;
+    onStart?: () => void;
+    onComplete?: () => void;
+    /** Fires when scroll position enters the trigger zone (scrolling forward). */
+    onEnter?: () => void;
+    /** Fires when scroll position exits the trigger zone at the end (scrolling forward). */
+    onLeave?: () => void;
+    /** Fires when scroll position re-enters the trigger zone from the end (scrolling back). */
+    onEnterBack?: () => void;
+    /** Fires when scroll position exits the trigger zone at the start (scrolling back). */
+    onLeaveBack?: () => void;
+    /**
+     * Trigger the animation when the element enters the viewport instead of
+     * tying it to scroll position. The draw runs over `duration` milliseconds,
+     * replaying each time the element re-enters the viewport (use `once: true`
+     * to play only the first time).
+     *
+     * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
+     * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
+     * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
+     *
+     * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
+     * also works — `seek(0.5)` pauses at 50% of the duration.
+     */
+    autoplay?: boolean;
+    /**
+     * Duration of the autoplay animation in milliseconds. Only used when
+     * `autoplay: true`. Default `1000`.
+     */
+    duration?: number;
+    /**
+     * Use the browser's native CSS scroll-driven animation
+     * (`animation-timeline: view()`) when the configuration is simple enough and
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
+     *
+     * Falls back to the JS engine automatically when unsupported or when the
+     * config uses a feature native CSS can't express (callbacks, stagger, morph,
+     * velocity scaling, custom triggers, `once`, custom easing functions, etc.).
+     *
+     * - `undefined` / `true` (default): use native when eligible.
+     * - `false`: always use the JS engine.
+     */
+    native?: boolean;
+}
+interface ScrollDrawInstance {
+    destroy: () => void;
+    /** Reset and replay the animation from the beginning. */
+    replay: () => void;
+    /** Pause the animation at the current progress. */
+    pause: () => void;
+    /** Resume a paused animation. */
+    resume: () => void;
+    /** Jump to a specific progress value (0–1) and pause. */
+    seek: (progress: number) => void;
+    /** Returns current draw progress (0–1). */
+    getProgress: () => number;
+    /**
+     * Re-measure after a layout change: path lengths, and the scroll trigger window.
+     *
+     * The engine already re-measures on `resize`, on `orientationchange`, and via a
+     * `ResizeObserver` on the document element — but none of those fire for a layout
+     * change that leaves the document height alone, such as a tab switching, a
+     * sibling collapsing, or a font swapping inside a fixed-height box. Call this
+     * after one of those.
+     *
+     * Optional on this shared type because several instances here are fan-outs over
+     * other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
+     * `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
+     * use `instance.refresh?.()` if you hold an instance of unknown origin.
+     */
+    refresh?: () => void;
+}
+
+export type { EasingName as E, PresetName as P, ScrollDrawInstance as S, TriggerConfig as T, ScrollDrawOptions as a };

package/dist/types-DHU1zNEw.d.ts

@@ -0,0 +1,147 @@
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
+type PresetName = 'sketch' | 'reveal' | 'typewriter' | 'cinematic' | 'spring';
+interface TriggerConfig {
+    start?: string;
+    end?: string;
+}
+interface ScrollDrawOptions {
+    /**
+     * Apply a named preset as the base configuration. User-supplied options
+     * always override the preset. Available presets:
+     * - `'sketch'`     — staggered ease-in draw, pencil feel
+     * - `'reveal'`     — fade + ease-out, draws once on viewport entry
+     * - `'typewriter'` — fast linear draw with stagger
+     * - `'cinematic'`  — slow ease-in-out with fade, dramatic entrance
+     * - `'spring'`     — spring easing, bouncy organic feel
+     */
+    preset?: PresetName;
+    selector?: string;
+    speed?: number;
+    fade?: boolean;
+    easing?: EasingName | ((t: number) => number);
+    trigger?: TriggerConfig;
+    stagger?: number;
+    direction?: 'forward' | 'reverse';
+    once?: boolean;
+    debug?: boolean;
+    /** Scroll axis to track. 'y' (default) for vertical, 'x' for horizontal. */
+    axis?: 'x' | 'y';
+    /** CSS selector or Element for a custom scroll container (default: window). */
+    scrollContainer?: string | Element;
+    /** Automatically reverse the animation when the user scrolls back up. */
+    autoReverse?: boolean;
+    /** Delay in milliseconds before the engine starts observing. */
+    delay?: number;
+    /** Animate stroke color. Single string = static override. Tuple = interpolate from → to. */
+    strokeColor?: string | [string, string];
+    /** Animate stroke width. Single number = static override. Tuple = interpolate from → to. */
+    strokeWidth?: number | [number, number];
+    /** Animate fill opacity. Single number = static override. Tuple [from, to] = interpolate as the path draws. Use [0, 1] to flood fill in sync with the stroke draw. */
+    fillOpacity?: number | [number, number];
+    /**
+     * Reveal the container using CSS clip-path instead of stroke-dashoffset.
+     * Works on any content — SVG, images, text, divs.
+     *
+     * Pass a direction string to control which edge the reveal starts from,
+     * or `true` as shorthand for `'left'`.
+     *
+     * Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`
+     */
+    clip?: boolean | 'left' | 'right' | 'top' | 'bottom' | 'center';
+    /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
+    waypoints?: Record<number, () => void>;
+    /** Scale animation speed by scroll velocity — faster scrolling = faster draw. Pass a number to control sensitivity (default 1). */
+    velocityScale?: boolean | number;
+    /** IntersectionObserver threshold (0–1). Default 0. */
+    threshold?: number;
+    /** IntersectionObserver rootMargin. Default "0px". */
+    rootMargin?: string;
+    /** Repeat the animation N times after completion. Use 'infinite' to loop forever. */
+    repeat?: number | 'infinite';
+    /** Milliseconds to wait between repeats. Default 0. */
+    repeatDelay?: number;
+    /**
+     * Target path `d` attribute to morph toward as the animation progresses.
+     * Paths must have compatible command structures (same number of numeric tokens).
+     *
+     * Only applies to `<path>` elements — silently no-ops on `<rect>`, `<circle>`,
+     * `<line>`, and other SVG shape elements.
+     */
+    morphTo?: string;
+    onProgress?: (alpha: number) => void;
+    onStart?: () => void;
+    onComplete?: () => void;
+    /** Fires when scroll position enters the trigger zone (scrolling forward). */
+    onEnter?: () => void;
+    /** Fires when scroll position exits the trigger zone at the end (scrolling forward). */
+    onLeave?: () => void;
+    /** Fires when scroll position re-enters the trigger zone from the end (scrolling back). */
+    onEnterBack?: () => void;
+    /** Fires when scroll position exits the trigger zone at the start (scrolling back). */
+    onLeaveBack?: () => void;
+    /**
+     * Trigger the animation when the element enters the viewport instead of
+     * tying it to scroll position. The draw runs over `duration` milliseconds,
+     * replaying each time the element re-enters the viewport (use `once: true`
+     * to play only the first time).
+     *
+     * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
+     * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
+     * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
+     *
+     * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
+     * also works — `seek(0.5)` pauses at 50% of the duration.
+     */
+    autoplay?: boolean;
+    /**
+     * Duration of the autoplay animation in milliseconds. Only used when
+     * `autoplay: true`. Default `1000`.
+     */
+    duration?: number;
+    /**
+     * Use the browser's native CSS scroll-driven animation
+     * (`animation-timeline: view()`) when the configuration is simple enough and
+     * the browser supports it. The browser drives the draw from the scroll
+     * position — zero per-frame JavaScript, zero scroll/resize listeners. (It
+     * still repaints on the main thread: browsers don't composite
+     * `stroke-dashoffset`.)
+     *
+     * Falls back to the JS engine automatically when unsupported or when the
+     * config uses a feature native CSS can't express (callbacks, stagger, morph,
+     * velocity scaling, custom triggers, `once`, custom easing functions, etc.).
+     *
+     * - `undefined` / `true` (default): use native when eligible.
+     * - `false`: always use the JS engine.
+     */
+    native?: boolean;
+}
+interface ScrollDrawInstance {
+    destroy: () => void;
+    /** Reset and replay the animation from the beginning. */
+    replay: () => void;
+    /** Pause the animation at the current progress. */
+    pause: () => void;
+    /** Resume a paused animation. */
+    resume: () => void;
+    /** Jump to a specific progress value (0–1) and pause. */
+    seek: (progress: number) => void;
+    /** Returns current draw progress (0–1). */
+    getProgress: () => number;
+    /**
+     * Re-measure after a layout change: path lengths, and the scroll trigger window.
+     *
+     * The engine already re-measures on `resize`, on `orientationchange`, and via a
+     * `ResizeObserver` on the document element — but none of those fire for a layout
+     * change that leaves the document height alone, such as a tab switching, a
+     * sibling collapsing, or a font swapping inside a fixed-height box. Call this
+     * after one of those.
+     *
+     * Optional on this shared type because several instances here are fan-outs over
+     * other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
+     * `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
+     * use `instance.refresh?.()` if you hold an instance of unknown origin.
+     */
+    refresh?: () => void;
+}
+
+export type { EasingName as E, PresetName as P, ScrollDrawInstance as S, TriggerConfig as T, ScrollDrawOptions as a };

package/dist/video/index.cjs

@@ -1 +1 @@
-'use strict';function H({bounces:e=3,decay:t=.5}={}){let n=Math.max(1,Math.round(e)),r=Math.max(.01,Math.min(.99,t)),c=Math.sqrt(r),s=0,p=[];for(let i=0;i<n;i++){let a=Math.pow(c,i);p.push(a),s+=a;}let u=[0],v=0;for(let i=0;i<n;i++)v+=p[i]/s,u.push(v);return i=>{if(i<=0)return 0;if(i>=1)return 1;for(let a=0;a<n;a++)if(i<=u[a+1]){let f=(i-u[a])/(u[a+1]-u[a]);if(a===0)return f*(2-f);let b=1-Math.pow(r,a);return b+(1-b)*(2*f-1)*(2*f-1)}return 1}}function ee({amplitude:e=1,period:t=.4}={}){let n=Math.max(1,e),r=Math.max(.1,t),c=n<=1?r/4:r/(2*Math.PI)*Math.asin(1/n);return s=>s<=0?0:s>=1?1:n*Math.pow(2,-10*s)*Math.sin((s-c)*(2*Math.PI)/r)+1}var C={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:H(),elastic:ee()};function N(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[n="top",r="bottom"]=t.split(/\s+/).filter(Boolean);return {element:n,viewport:r}}function z(e,t,n,r){switch(r){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function G(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function te(e,t,n){return Math.min(n,Math.max(t,e))}function q(e,t,n,r){return n===t?0:te((e-t)/(n-t)*r,0,1)}function B(e,t,n,r,c){let s=z(e.top,e.height,t,r.element)-G(r.viewport,n),p=z(e.top,e.height,t,c.element)-G(c.viewport,n);return {tStart:s,tEnd:p}}var W=Symbol.for("svg-scroll-draw.registry");function k(){let e=globalThis;return e[W]||(e[W]=new Map)}function X(e,t){k().set(e,t);}function K(e){k().delete(e);}var re=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function Y(e,...t){re&&console.warn(`[svg-scroll-draw] ${e}`,...t);}var j={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function ce(e,t={}){if(typeof window>"u")return j;let n=typeof e=="string"?document.querySelector(e):e;if(!n||n.tagName.toLowerCase()!=="video")return Y("scrollVideo: <video> element not found:",e),j;let r=n,{trigger:c={},easing:s="linear",once:p=false,axis:u="y",preload:v="auto",onReady:i,onComplete:a,onProgress:f}=t,b=window.matchMedia("(prefers-reduced-motion: reduce)").matches,J=typeof s=="function"?s:C[s]??C.linear,Q=N(c.start??"top top"),U=N(c.end??"bottom top");r.pause(),r.hasAttribute("preload")||(r.preload=v);let F=t.from??0,I=t.to,R=0,A=0,l=0,h=false,d=false,w=-1,y=0,M=false,g=false,D=()=>u==="x"?window.scrollX:window.scrollY,Z=()=>u==="x"?window.innerWidth:window.innerHeight;function L(){let o=r.getBoundingClientRect(),m=u==="x"?o.left:o.top,x=u==="x"?o.width:o.height,$=B({top:m,height:x},D(),Z(),Q,U);R=$.tStart,A=$.tEnd;}let E=NaN;function _(o){if(!g)return;let m=I??r.duration??0,x=F+(m-F)*o;x!==E&&(E=x,r.currentTime=x),r.style.setProperty("--scroll-draw-progress",String(o)),f?.(o);}function S(){if(!h||d||!g||b)return;let o=J(q(D(),R,A,1));p&&(w=Math.max(w,o),o=w),y=o,_(o),o>=1&&!M?(M=true,a?.()):o<1&&!p&&(M=false),l=requestAnimationFrame(S);}function V(){if(g=true,I===void 0&&(I=r.duration),b){_(1),i?.();return}L(),i?.(),h&&!d&&(l=requestAnimationFrame(S));}r.readyState>=1?V():r.addEventListener("loadedmetadata",V,{once:true}),g||L();let O=new IntersectionObserver(o=>{o.forEach(m=>{h=m.isIntersecting,h&&!d&&g?l=requestAnimationFrame(S):cancelAnimationFrame(l);});}),P;function T(){clearTimeout(P),P=setTimeout(L,150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),O.observe(r),X(r,{type:"video",getProgress:()=>y,getTrigger:()=>({tStart:R,tEnd:A})}),{destroy(){cancelAnimationFrame(l),O.disconnect(),r.removeEventListener("loadedmetadata",V),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),clearTimeout(P),K(r);},replay(){w=-1,M=false,y=0,d=false,E=NaN,_(0);},pause(){d=true,cancelAnimationFrame(l);},resume(){d&&(d=false,h&&g&&(l=requestAnimationFrame(S)));},seek(o){let m=Math.min(1,Math.max(0,o));y=m,w=m,d=true,cancelAnimationFrame(l),E=NaN,_(m);},getProgress(){return y}}}exports.scrollVideo=ce;
+'use strict';function ee({bounces:e=3,decay:t=.5}={}){let n=Math.max(1,Math.round(e)),r=Math.max(.01,Math.min(.99,t)),m=Math.sqrt(r),s=0,p=[];for(let i=0;i<n;i++){let a=Math.pow(m,i);p.push(a),s+=a;}let u=[0],E=0;for(let i=0;i<n;i++)E+=p[i]/s,u.push(E);return i=>{if(i<=0)return 0;if(i>=1)return 1;for(let a=0;a<n;a++)if(i<=u[a+1]){let f=(i-u[a])/(u[a+1]-u[a]);if(a===0)return f*(2-f);let b=1-Math.pow(r,a);return b+(1-b)*(2*f-1)*(2*f-1)}return 1}}function te({amplitude:e=1,period:t=.4}={}){let n=Math.max(1,e),r=Math.max(.1,t),m=n<=1?r/4:r/(2*Math.PI)*Math.asin(1/n);return s=>s<=0?0:s>=1?1:n*Math.pow(2,-10*s)*Math.sin((s-m)*(2*Math.PI)/r)+1}var N={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:ee(),elastic:te()};function z(e,t,n){return Math.min(n,Math.max(t,e))}function D(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[n="top",r="bottom"]=t.split(/\s+/).filter(Boolean);return {element:n,viewport:r}}function W(e,t,n,r){switch(r){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function G(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function k(e,t,n,r){return n===t?0:z((e-t)/(n-t)*r,0,1)}function B(e,t,n,r,m){let s=W(e.top,e.height,t,r.element)-G(r.viewport,n),p=W(e.top,e.height,t,m.element)-G(m.viewport,n);return {tStart:s,tEnd:p}}var $=Symbol.for("svg-scroll-draw.registry");function K(){let e=globalThis;return e[$]||(e[$]=new Map)}function X(e,t){K().set(e,t);}function j(e){K().delete(e);}var re=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function J(e,...t){re&&console.warn(`[svg-scroll-draw] ${e}`,...t);}var Q={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function pe(e,t={}){if(typeof window>"u")return Q;let n=typeof e=="string"?document.querySelector(e):e;if(!n||n.tagName.toLowerCase()!=="video")return J("scrollVideo: <video> element not found:",e),Q;let r=n,{trigger:m={},easing:s="linear",once:p=false,axis:u="y",preload:E="auto",onReady:i,onComplete:a,onProgress:f}=t,b=window.matchMedia("(prefers-reduced-motion: reduce)").matches,U=typeof s=="function"?s:N[s]??N.linear,Y=D(m.start??"top top"),Z=D(m.end??"bottom top");r.pause(),r.hasAttribute("preload")||(r.preload=E);let F=t.from??0,R=t.to,A=0,L=0,l=0,w=false,d=false,h=-1,y=0,x=false,g=false,C=()=>u==="x"?window.scrollX:window.scrollY,H=()=>u==="x"?window.innerWidth:window.innerHeight;function I(){let o=r.getBoundingClientRect(),c=u==="x"?o.left:o.top,v=u==="x"?o.width:o.height,q=B({top:c,height:v},C(),H(),Y,Z);A=q.tStart,L=q.tEnd;}let M=NaN;function _(o){if(!g)return;let c=R??r.duration??0,v=F+(c-F)*o;v!==M&&(M=v,r.currentTime=v),r.style.setProperty("--scroll-draw-progress",String(o)),f?.(o);}function S(){if(!w||d||!g||b)return;let o=U(k(C(),A,L,1));p&&(h=Math.max(h,o),o=h),y=o,_(o),o>=1&&!x?(x=true,a?.()):o<1&&!p&&(x=false),l=requestAnimationFrame(S);}function P(){if(g=true,R===void 0&&(R=r.duration),b){_(1),i?.();return}I(),i?.(),w&&!d&&(l=requestAnimationFrame(S));}r.readyState>=1?P():r.addEventListener("loadedmetadata",P,{once:true}),g||I();let O=new IntersectionObserver(o=>{o.forEach(c=>{w=c.isIntersecting,w&&!d&&g?l=requestAnimationFrame(S):cancelAnimationFrame(l);});}),V;function T(){clearTimeout(V),V=setTimeout(I,150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),O.observe(r),X(r,{type:"video",getProgress:()=>y,getTrigger:()=>({tStart:A,tEnd:L})}),{destroy(){cancelAnimationFrame(l),O.disconnect(),r.removeEventListener("loadedmetadata",P),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),clearTimeout(V),j(r);},replay(){h=-1,x=false,y=0,d=false,M=NaN,_(0);},pause(){d=true,cancelAnimationFrame(l);},resume(){d&&(d=false,w&&g&&(l=requestAnimationFrame(S)));},seek(o){let c=Math.min(1,Math.max(0,o));y=c,h=c,d=true,cancelAnimationFrame(l),M=NaN,_(c);},getProgress(){return y}}}exports.scrollVideo=pe;

package/dist/video/index.d.mts

@@ -1,36 +1,4 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
-interface TriggerConfig {
-    start?: string;
-    end?: string;
-}
-interface ScrollDrawInstance {
-    destroy: () => void;
-    /** Reset and replay the animation from the beginning. */
-    replay: () => void;
-    /** Pause the animation at the current progress. */
-    pause: () => void;
-    /** Resume a paused animation. */
-    resume: () => void;
-    /** Jump to a specific progress value (0–1) and pause. */
-    seek: (progress: number) => void;
-    /** Returns current draw progress (0–1). */
-    getProgress: () => number;
-    /**
-     * Re-measure after a layout change: path lengths, and the scroll trigger window.
-     *
-     * The engine already re-measures on `resize`, on `orientationchange`, and via a
-     * `ResizeObserver` on the document element — but none of those fire for a layout
-     * change that leaves the document height alone, such as a tab switching, a
-     * sibling collapsing, or a font swapping inside a fixed-height box. Call this
-     * after one of those.
-     *
-     * Optional on this shared type because several instances here are fan-outs over
-     * other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
-     * `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
-     * use `instance.refresh?.()` if you hold an instance of unknown origin.
-     */
-    refresh?: () => void;
-}
+import { T as TriggerConfig, E as EasingName, S as ScrollDrawInstance } from '../types-DHU1zNEw.mjs';
 
 interface ScrollVideoOptions {
     trigger?: TriggerConfig;

package/dist/video/index.d.ts

@@ -1,36 +1,4 @@
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
-interface TriggerConfig {
-    start?: string;
-    end?: string;
-}
-interface ScrollDrawInstance {
-    destroy: () => void;
-    /** Reset and replay the animation from the beginning. */
-    replay: () => void;
-    /** Pause the animation at the current progress. */
-    pause: () => void;
-    /** Resume a paused animation. */
-    resume: () => void;
-    /** Jump to a specific progress value (0–1) and pause. */
-    seek: (progress: number) => void;
-    /** Returns current draw progress (0–1). */
-    getProgress: () => number;
-    /**
-     * Re-measure after a layout change: path lengths, and the scroll trigger window.
-     *
-     * The engine already re-measures on `resize`, on `orientationchange`, and via a
-     * `ResizeObserver` on the document element — but none of those fire for a layout
-     * change that leaves the document height alone, such as a tab switching, a
-     * sibling collapsing, or a font swapping inside a fixed-height box. Call this
-     * after one of those.
-     *
-     * Optional on this shared type because several instances here are fan-outs over
-     * other instances or SSR no-op stubs. `scrollDraw`, `scrollPin`,
-     * `scrollHorizontal`, `scrollDrawTimeline` and the group APIs all provide it;
-     * use `instance.refresh?.()` if you hold an instance of unknown origin.
-     */
-    refresh?: () => void;
-}
+import { T as TriggerConfig, E as EasingName, S as ScrollDrawInstance } from '../types-DHU1zNEw.js';
 
 interface ScrollVideoOptions {
     trigger?: TriggerConfig;

package/dist/video/index.mjs

@@ -1 +1 @@
-function H({bounces:e=3,decay:t=.5}={}){let n=Math.max(1,Math.round(e)),r=Math.max(.01,Math.min(.99,t)),c=Math.sqrt(r),s=0,p=[];for(let i=0;i<n;i++){let a=Math.pow(c,i);p.push(a),s+=a;}let u=[0],v=0;for(let i=0;i<n;i++)v+=p[i]/s,u.push(v);return i=>{if(i<=0)return 0;if(i>=1)return 1;for(let a=0;a<n;a++)if(i<=u[a+1]){let f=(i-u[a])/(u[a+1]-u[a]);if(a===0)return f*(2-f);let b=1-Math.pow(r,a);return b+(1-b)*(2*f-1)*(2*f-1)}return 1}}function ee({amplitude:e=1,period:t=.4}={}){let n=Math.max(1,e),r=Math.max(.1,t),c=n<=1?r/4:r/(2*Math.PI)*Math.asin(1/n);return s=>s<=0?0:s>=1?1:n*Math.pow(2,-10*s)*Math.sin((s-c)*(2*Math.PI)/r)+1}var C={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:H(),elastic:ee()};function N(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[n="top",r="bottom"]=t.split(/\s+/).filter(Boolean);return {element:n,viewport:r}}function z(e,t,n,r){switch(r){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function G(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function te(e,t,n){return Math.min(n,Math.max(t,e))}function q(e,t,n,r){return n===t?0:te((e-t)/(n-t)*r,0,1)}function B(e,t,n,r,c){let s=z(e.top,e.height,t,r.element)-G(r.viewport,n),p=z(e.top,e.height,t,c.element)-G(c.viewport,n);return {tStart:s,tEnd:p}}var W=Symbol.for("svg-scroll-draw.registry");function k(){let e=globalThis;return e[W]||(e[W]=new Map)}function X(e,t){k().set(e,t);}function K(e){k().delete(e);}var re=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function Y(e,...t){re&&console.warn(`[svg-scroll-draw] ${e}`,...t);}var j={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function ce(e,t={}){if(typeof window>"u")return j;let n=typeof e=="string"?document.querySelector(e):e;if(!n||n.tagName.toLowerCase()!=="video")return Y("scrollVideo: <video> element not found:",e),j;let r=n,{trigger:c={},easing:s="linear",once:p=false,axis:u="y",preload:v="auto",onReady:i,onComplete:a,onProgress:f}=t,b=window.matchMedia("(prefers-reduced-motion: reduce)").matches,J=typeof s=="function"?s:C[s]??C.linear,Q=N(c.start??"top top"),U=N(c.end??"bottom top");r.pause(),r.hasAttribute("preload")||(r.preload=v);let F=t.from??0,I=t.to,R=0,A=0,l=0,h=false,d=false,w=-1,y=0,M=false,g=false,D=()=>u==="x"?window.scrollX:window.scrollY,Z=()=>u==="x"?window.innerWidth:window.innerHeight;function L(){let o=r.getBoundingClientRect(),m=u==="x"?o.left:o.top,x=u==="x"?o.width:o.height,$=B({top:m,height:x},D(),Z(),Q,U);R=$.tStart,A=$.tEnd;}let E=NaN;function _(o){if(!g)return;let m=I??r.duration??0,x=F+(m-F)*o;x!==E&&(E=x,r.currentTime=x),r.style.setProperty("--scroll-draw-progress",String(o)),f?.(o);}function S(){if(!h||d||!g||b)return;let o=J(q(D(),R,A,1));p&&(w=Math.max(w,o),o=w),y=o,_(o),o>=1&&!M?(M=true,a?.()):o<1&&!p&&(M=false),l=requestAnimationFrame(S);}function V(){if(g=true,I===void 0&&(I=r.duration),b){_(1),i?.();return}L(),i?.(),h&&!d&&(l=requestAnimationFrame(S));}r.readyState>=1?V():r.addEventListener("loadedmetadata",V,{once:true}),g||L();let O=new IntersectionObserver(o=>{o.forEach(m=>{h=m.isIntersecting,h&&!d&&g?l=requestAnimationFrame(S):cancelAnimationFrame(l);});}),P;function T(){clearTimeout(P),P=setTimeout(L,150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),O.observe(r),X(r,{type:"video",getProgress:()=>y,getTrigger:()=>({tStart:R,tEnd:A})}),{destroy(){cancelAnimationFrame(l),O.disconnect(),r.removeEventListener("loadedmetadata",V),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),clearTimeout(P),K(r);},replay(){w=-1,M=false,y=0,d=false,E=NaN,_(0);},pause(){d=true,cancelAnimationFrame(l);},resume(){d&&(d=false,h&&g&&(l=requestAnimationFrame(S)));},seek(o){let m=Math.min(1,Math.max(0,o));y=m,w=m,d=true,cancelAnimationFrame(l),E=NaN,_(m);},getProgress(){return y}}}export{ce as scrollVideo};
+export{a as scrollVideo}from'../chunk-JC5BD4RB.mjs';import'../chunk-PEFR3ZB7.mjs';import'../chunk-DM6EDKWH.mjs';import'../chunk-4DOJSIEQ.mjs';import'../chunk-BCV4RAIX.mjs';import'../chunk-LFSU6LR3.mjs';

package/dist/vivus/index.cjs

@@ -1,2 +1,2 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});function g(){return typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia("(prefers-reduced-motion: reduce)").matches}var w=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function m(r,...t){w&&console.warn(`[svg-scroll-draw] ${r}`,...t);}var E=["delayed","sync","async","nsync","oneByOne","scenario","scenario-sync"],L=["inViewport","manual","autostart"];function u(r,t){let e=parseInt(r,10);return e>=0?e:t}function V(r){if(typeof window>"u")return  false;let t=window,e=i=>typeof t[i]=="function"&&r instanceof t[i];return e("SVGSVGElement")||e("SVGGElement")||r?.constructor===t.SVGElement}var y=["cx","cy","points","r","rx","ry","x","x1","x2","y","y1","y2"],$=["line","ellipse","circle","polygon","polyline","rect"],x="http://www.w3.org/2000/svg";function v(r){let t=r.points.trim().split(" ");if(r.points.indexOf(",")===-1){let i=[];for(let s=0;s<t.length;s+=2)i.push(`${t[s]},${t[s+1]}`);t=i;}let e=`M${t[0]}`;for(let i=1;i<t.length;i++)t[i].indexOf(",")!==-1&&(e+=`L${t[i]}`);return e}function b(r,t,e,i){let s=parseFloat(e)||0,a=parseFloat(i)||0,n=parseFloat(r)||0,o=parseFloat(t)||0,l=n-s,h=n+s;return `M${l},${o}A${s},${a} 0,1,1 ${h},${o}A${s},${a} 0,1,1 ${l},${o}`}var A={line:r=>`M${r.x1||0},${r.y1||0}L${r.x2||0},${r.y2||0}`,rect(r){let t=parseFloat(r.x)||0,e=parseFloat(r.y)||0,i=parseFloat(r.width)||0,s=parseFloat(r.height)||0;if(r.rx||r.ry){let a=parseInt(r.rx,10)||-1,n=parseInt(r.ry,10)||-1;a=Math.min(Math.max(a<0?n:a,0),i/2),n=Math.min(Math.max(n<0?a:n,0),s/2);let o=`A ${a},${n},0,0,1,`;return `M ${t+a},${e} L ${t+i-a},${e} ${o}${t+i},${e+n} L ${t+i},${e+s-n} ${o}${t+i-a},${e+s} L ${t+a},${e+s} ${o}${t},${e+s-n} L ${t},${e+n} ${o}${t+a},${e}`}return `M${t} ${e} L${t+i} ${e} L${t+i} ${e+s} L${t} ${e+s} Z`},polyline:v,polygon:r=>`${v(r)}Z`,ellipse:r=>b(r.cx,r.cy,r.rx,r.ry),circle:r=>b(r.cx,r.cy,r.r,r.r)};function R(r){for(let t of Array.from(r.querySelectorAll($.join(",")))){let e={};for(let{name:a,value:n}of Array.from(t.attributes)){if(y.indexOf(a)!==-1&&n.indexOf("%")!==-1)throw new Error("Pathformer [parseAttr]: a SVG shape got values in percentage. This cannot be transformed into 'path' tags. Please use 'viewBox'.");e[a]=n;}let i=A[t.tagName.toLowerCase()](e),s=document.createElementNS(x,"path");for(let{name:a,value:n}of Array.from(t.attributes))y.indexOf(a)===-1&&s.setAttribute(a,n);s.setAttribute("d",i),t.parentNode?.replaceChild(s,t);}}var c=class c{constructor(t,e,i){this.isReady=false;this.type="delayed";this.start="inViewport";this.duration=120;this.delay=null;this.dashGap=1;this.forceRender=false;this.reverseStack=false;this.selfDestroy=false;this.ignoreInvisible=false;this.animTimingFunction=c.LINEAR;this.pathTimingFunction=c.LINEAR;this.callback=()=>{};this.map=[];this.frameLength=0;this.currentFrame=0;this.delayUnit=0;this.speed=1;this.handle=null;this.instanceCallback=null;this.mustRecalcScale=null;this.viewportListener=null;this.setElement(t,e),this.setOptions(e),this.setCallback(i),this.isReady&&this.init();}setElement(t,e){if(t===void 0)throw new Error('Vivus [constructor]: "element" parameter is required');let i=t;if(typeof i=="string"){let s=document.getElementById(i);if(!s)throw new Error('Vivus [constructor]: "element" parameter is not related to an existing ID');i=s;}if(this.parentEl=i,e&&e.file){let s=new XMLHttpRequest;s.addEventListener("load",()=>{let a=document.createElement("div");a.innerHTML=s.responseText;let n=a.querySelector("svg");if(!n)throw new Error(`Vivus [load]: Cannot find the SVG in the loaded file : ${e.file}`);this.el=n,n.setAttribute("width","100%"),n.setAttribute("height","100%"),this.parentEl.appendChild(n),this.isReady=true,this.init();}),s.open("GET",e.file),s.send();return}if(V(i)){this.el=i,this.isReady=true;return}if(i instanceof HTMLObjectElement){let s=i,a=n=>{if(this.isReady)return;let o=s.contentDocument&&s.contentDocument.querySelector("svg");if(!o&&n)throw new Error("Vivus [constructor]: object loaded does not contain any SVG");o&&(s.getAttribute("built-by-vivus")&&(this.parentEl.insertBefore(o,s),this.parentEl.removeChild(s),o.setAttribute("width","100%"),o.setAttribute("height","100%")),this.el=o,this.isReady=true,this.init());};a(),this.isReady||s.addEventListener("load",a);return}throw new Error('Vivus [constructor]: "element" parameter is not valid (or miss the "file" attribute)')}setOptions(t){if(t!==void 0&&(t===null||t.constructor!==Object))throw new Error('Vivus [constructor]: "options" parameter must be an object');let e=t||{};if(e.type&&E.indexOf(e.type)===-1)throw new Error(`Vivus [constructor]: ${e.type} is not an existing animation \`type\``);if(e.start&&L.indexOf(e.start)===-1)throw new Error(`Vivus [constructor]: ${e.start} is not an existing \`start\` option`);this.type=e.type||"delayed",this.start=e.start||"inViewport";let i=navigator.userAgent,s=i.indexOf("MSIE")!==-1||i.indexOf("Trident/")!==-1||i.indexOf("Edge/")!==-1;if(this.duration=u(e.duration,120),this.delay=u(e.delay,null),this.dashGap=u(e.dashGap,1),this.forceRender=Object.prototype.hasOwnProperty.call(e,"forceRender")?!!e.forceRender:s,this.reverseStack=!!e.reverseStack,this.selfDestroy=!!e.selfDestroy,this.onReady=e.onReady,this.map=[],this.ignoreInvisible=Object.prototype.hasOwnProperty.call(e,"ignoreInvisible")?!!e.ignoreInvisible:false,this.animTimingFunction=e.animTimingFunction||c.LINEAR,this.pathTimingFunction=e.pathTimingFunction||c.LINEAR,this.delay!==null&&this.delay>=this.duration)throw new Error("Vivus [constructor]: delay must be shorter than duration")}setCallback(t){if(t&&typeof t!="function")throw new Error('Vivus [constructor]: "callback" parameter must be a function');this.callback=t||(()=>{});}mapping(){let t=0,e=0,i=0,s=false,a=Array.from(this.el.querySelectorAll("path"));a.forEach((n,o)=>{if(this.isInvisible(n))return;let l={el:n,length:0,startAt:0,duration:0,isResizeSensitive:false},h=1;if(n.getAttribute("vector-effect")==="non-scaling-stroke"){let d=n.getBoundingClientRect(),f=n.getBBox();h=Math.max(d.width/f.width,d.height/f.height),l.isResizeSensitive=true,s=true;}if(l.length=Math.ceil(n.getTotalLength()*h),isNaN(l.length)){m("vivus: cannot retrieve a path element length",n);return}this.map.push(l),n.style.strokeDasharray=`${l.length} ${l.length+this.dashGap*2}`,n.style.strokeDashoffset=String(l.length+this.dashGap),l.length+=this.dashGap,e+=l.length,this.renderPath(o);}),s&&m("vivus: this SVG contains non-scaling-strokes. Call instance.recalc() when the SVG is resized."),e=e===0?1:e,this.delay=this.delay===null?this.duration/3:this.delay,this.delayUnit=this.delay/(a.length>1?a.length-1:1),this.reverseStack&&this.map.reverse(),this.map.forEach((n,o)=>{let l=()=>{let h={};for(let{name:d,value:f}of Array.from(n.el.attributes))h[d]=f;return h};switch(this.type){case "delayed":n.startAt=this.delayUnit*o,n.duration=this.duration-this.delay;break;case "oneByOne":n.startAt=i/e*this.duration,n.duration=n.length/e*this.duration;break;case "sync":case "async":case "nsync":n.startAt=0,n.duration=this.duration;break;case "scenario-sync":{let h=l();n.startAt=t+(u(h["data-delay"],this.delayUnit)||0),n.duration=u(h["data-duration"],this.duration),t=h["data-async"]!==void 0?n.startAt:n.startAt+n.duration,this.frameLength=Math.max(this.frameLength,n.startAt+n.duration);break}case "scenario":{let h=l();n.startAt=u(h["data-start"],this.delayUnit)||0,n.duration=u(h["data-duration"],this.duration),this.frameLength=Math.max(this.frameLength,n.startAt+n.duration);break}}i+=n.length,this.frameLength=this.frameLength||this.duration;});}recalc(){this.mustRecalcScale||(this.mustRecalcScale=requestAnimationFrame(()=>this.performLineRecalc()));}performLineRecalc(){for(let t of this.map){if(!t.isResizeSensitive)continue;let e=t.el.getBoundingClientRect(),i=t.el.getBBox(),s=Math.max(e.width/i.width,e.height/i.height);t.length=Math.ceil(t.el.getTotalLength()*s),t.el.style.strokeDasharray=`${t.length} ${t.length+this.dashGap*2}`;}this.trace(),this.mustRecalcScale=null;}draw(){if(this.currentFrame+=this.speed,this.currentFrame<=0)this.stop(),this.reset();else if(this.currentFrame>=this.frameLength)this.stop(),this.currentFrame=this.frameLength,this.trace(),this.selfDestroy&&this.destroy();else {this.trace(),this.handle=requestAnimationFrame(()=>this.draw());return}this.finished();}finished(){if(this.callback(this),this.instanceCallback){let t=this.instanceCallback;this.instanceCallback=null,t(this);}}trace(){let t=this.animTimingFunction(this.currentFrame/this.frameLength)*this.frameLength;this.map.forEach((e,i)=>{let s=this.pathTimingFunction(Math.max(0,Math.min(1,(t-e.startAt)/e.duration)));e.progress!==s&&(e.progress=s,e.el.style.strokeDashoffset=String(Math.floor(e.length*(1-s))),this.renderPath(i));});}renderPath(t){let e=this.forceRender&&this.map&&this.map[t];if(!e)return;let i=e.el.cloneNode(true);e.el.parentNode?.replaceChild(i,e.el),e.el=i;}init(){this.frameLength=0,this.currentFrame=0,this.map=[],R(this.el),this.mapping(),this.starter(),this.onReady&&this.onReady(this);}starter(){if(this.start==="manual")return;if(this.start==="autostart"){this.play();return}let t=()=>{this.isInViewport(this.parentEl,1)&&(this.play(),window.removeEventListener("scroll",t),this.viewportListener=null);};this.viewportListener=t,window.addEventListener("scroll",t),t();}getStatus(){return this.currentFrame===0?"start":this.currentFrame===this.frameLength?"end":"progress"}reset(){return this.setFrameProgress(0)}finish(){return this.setFrameProgress(1)}setFrameProgress(t){let e=Math.min(1,Math.max(0,t));return this.currentFrame=Math.round(this.frameLength*e),this.trace(),this}play(t,e){this.instanceCallback=null;let i=t;if(i&&typeof i=="function")this.instanceCallback=i,i=void 0;else if(i&&typeof i!="number")throw new Error("Vivus [play]: invalid speed");return e&&typeof e=="function"&&!this.instanceCallback&&(this.instanceCallback=e),this.speed=i||1,g()?(this.stop(),this.currentFrame=this.speed<0?0:this.frameLength,this.trace(),this.speed>0&&this.selfDestroy&&this.destroy(),this.finished(),this):(this.handle||this.draw(),this)}stop(){return this.handle&&(cancelAnimationFrame(this.handle),this.handle=null),this}destroy(){this.stop(),this.viewportListener&&(window.removeEventListener("scroll",this.viewportListener),this.viewportListener=null),this.map.forEach((t,e)=>{t.el.style.strokeDashoffset="",t.el.style.strokeDasharray="",this.renderPath(e);});}isInvisible(t){let e=t.getAttribute("data-ignore");if(e!==null)return e!=="false";if(this.ignoreInvisible){let i=t.getBoundingClientRect();return !i.width&&!i.height}return  false}isInViewport(t,e=0){let i=window.pageYOffset||document.documentElement.scrollTop,s=i+Math.max(document.documentElement.clientHeight,window.innerHeight),a=t.getBoundingClientRect(),n=i+a.top;return n+a.height*(e||0)<=s&&n+a.height>=i}};c.LINEAR=t=>t,c.EASE=t=>-Math.cos(t*Math.PI)/2+.5,c.EASE_OUT=t=>1-Math.pow(1-t,3),c.EASE_IN=t=>Math.pow(t,3),c.EASE_OUT_BOUNCE=t=>{let e=-Math.cos(t*(.5*Math.PI))+1,i=Math.pow(e,1.5),s=Math.pow(1-t,2),a=-Math.abs(Math.cos(i*(2.5*Math.PI)))+1;return 1-s+a*s};var p=c,O=p;
-exports.Vivus=p;exports.default=O;
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});function g(){return typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia("(prefers-reduced-motion: reduce)").matches}var w=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function p(r,...t){w&&console.warn(`[svg-scroll-draw] ${r}`,...t);}var E=["delayed","sync","async","nsync","oneByOne","scenario","scenario-sync"],V=["inViewport","manual","autostart"];function u(r,t){let e=parseInt(r,10);return e>=0?e:t}function $(r){if(typeof window>"u")return  false;let t=window,e=n=>typeof t[n]=="function"&&r instanceof t[n];return e("SVGSVGElement")||e("SVGGElement")||r?.constructor===t.SVGElement}var y=["cx","cy","points","r","rx","ry","x","x1","x2","y","y1","y2"],A=["line","ellipse","circle","polygon","polyline","rect"],S="http://www.w3.org/2000/svg";function v(r){let t=r.points.trim().split(" ");if(r.points.indexOf(",")===-1){let n=[];for(let s=0;s<t.length;s+=2)n.push(`${t[s]},${t[s+1]}`);t=n;}let e=`M${t[0]}`;for(let n=1;n<t.length;n++)t[n].indexOf(",")!==-1&&(e+=`L${t[n]}`);return e}function b(r,t,e,n){let s=parseFloat(e)||0,a=parseFloat(n)||0,i=parseFloat(r)||0,o=parseFloat(t)||0,l=i-s,h=i+s;return `M${l},${o}A${s},${a} 0,1,1 ${h},${o}A${s},${a} 0,1,1 ${l},${o}`}var x={line:r=>`M${r.x1||0},${r.y1||0}L${r.x2||0},${r.y2||0}`,rect(r){let t=parseFloat(r.x)||0,e=parseFloat(r.y)||0,n=parseFloat(r.width)||0,s=parseFloat(r.height)||0;if(r.rx||r.ry){let a=parseInt(r.rx,10)||-1,i=parseInt(r.ry,10)||-1;a=Math.min(Math.max(a<0?i:a,0),n/2),i=Math.min(Math.max(i<0?a:i,0),s/2);let o=`A ${a},${i},0,0,1,`;return `M ${t+a},${e} L ${t+n-a},${e} ${o}${t+n},${e+i} L ${t+n},${e+s-i} ${o}${t+n-a},${e+s} L ${t+a},${e+s} ${o}${t},${e+s-i} L ${t},${e+i} ${o}${t+a},${e}`}return `M${t} ${e} L${t+n} ${e} L${t+n} ${e+s} L${t} ${e+s} Z`},polyline:v,polygon:r=>`${v(r)}Z`,ellipse:r=>b(r.cx,r.cy,r.rx,r.ry),circle:r=>b(r.cx,r.cy,r.r,r.r)};function L(r){for(let t of Array.from(r.querySelectorAll(A.join(",")))){let e={};for(let{name:a,value:i}of Array.from(t.attributes)){if(y.indexOf(a)!==-1&&i.indexOf("%")!==-1)throw new Error("Pathformer [parseAttr]: a SVG shape got values in percentage. This cannot be transformed into 'path' tags. Please use 'viewBox'.");e[a]=i;}let n=x[t.tagName.toLowerCase()](e),s=document.createElementNS(S,"path");for(let{name:a,value:i}of Array.from(t.attributes))y.indexOf(a)===-1&&s.setAttribute(a,i);s.setAttribute("d",n),t.parentNode?.replaceChild(s,t);}}var c=class c{constructor(t,e,n){this.isReady=false;this.type="delayed";this.start="inViewport";this.duration=120;this.delay=null;this.dashGap=1;this.forceRender=false;this.reverseStack=false;this.selfDestroy=false;this.ignoreInvisible=false;this.animTimingFunction=c.LINEAR;this.pathTimingFunction=c.LINEAR;this.callback=()=>{};this.map=[];this.frameLength=0;this.currentFrame=0;this.delayUnit=0;this.speed=1;this.handle=null;this.instanceCallback=null;this.mustRecalcScale=null;this.viewportListener=null;this.setElement(t,e),this.setOptions(e),this.setCallback(n),this.isReady&&this.init();}setElement(t,e){if(t===void 0)throw new Error('Vivus [constructor]: "element" parameter is required');let n=t;if(typeof n=="string"){let s=document.getElementById(n);if(!s)throw new Error('Vivus [constructor]: "element" parameter is not related to an existing ID');n=s;}if(this.parentEl=n,e&&e.file){let s=new XMLHttpRequest;s.addEventListener("load",()=>{let a=document.createElement("div");a.innerHTML=s.responseText;let i=a.querySelector("svg");if(!i)throw new Error(`Vivus [load]: Cannot find the SVG in the loaded file : ${e.file}`);this.el=i,i.setAttribute("width","100%"),i.setAttribute("height","100%"),this.parentEl.appendChild(i),this.isReady=true,this.init();}),s.open("GET",e.file),s.send();return}if($(n)){this.el=n,this.isReady=true;return}if(n instanceof HTMLObjectElement){let s=n,a=i=>{if(this.isReady)return;let o=s.contentDocument&&s.contentDocument.querySelector("svg");if(!o&&i)throw new Error("Vivus [constructor]: object loaded does not contain any SVG");o&&(s.getAttribute("built-by-vivus")&&(this.parentEl.insertBefore(o,s),this.parentEl.removeChild(s),o.setAttribute("width","100%"),o.setAttribute("height","100%")),this.el=o,this.isReady=true,this.init());};a(),this.isReady||s.addEventListener("load",a);return}throw new Error('Vivus [constructor]: "element" parameter is not valid (or miss the "file" attribute)')}setOptions(t){if(t!==void 0&&(t===null||t.constructor!==Object))throw new Error('Vivus [constructor]: "options" parameter must be an object');let e=t||{};if(e.type&&E.indexOf(e.type)===-1)throw new Error(`Vivus [constructor]: ${e.type} is not an existing animation \`type\``);if(e.start&&V.indexOf(e.start)===-1)throw new Error(`Vivus [constructor]: ${e.start} is not an existing \`start\` option`);this.type=e.type||"delayed",this.start=e.start||"inViewport";let n=navigator.userAgent,s=n.indexOf("MSIE")!==-1||n.indexOf("Trident/")!==-1||n.indexOf("Edge/")!==-1;if(this.duration=u(e.duration,120),this.delay=u(e.delay,null),this.dashGap=u(e.dashGap,1),this.forceRender=Object.prototype.hasOwnProperty.call(e,"forceRender")?!!e.forceRender:s,this.reverseStack=!!e.reverseStack,this.selfDestroy=!!e.selfDestroy,this.onReady=e.onReady,this.map=[],this.ignoreInvisible=Object.prototype.hasOwnProperty.call(e,"ignoreInvisible")?!!e.ignoreInvisible:false,this.animTimingFunction=e.animTimingFunction||c.LINEAR,this.pathTimingFunction=e.pathTimingFunction||c.LINEAR,this.delay!==null&&this.delay>=this.duration)throw new Error("Vivus [constructor]: delay must be shorter than duration")}setCallback(t){if(t&&typeof t!="function")throw new Error('Vivus [constructor]: "callback" parameter must be a function');this.callback=t||(()=>{});}mapping(){let t=0,e=0,n=0,s=false,a=Array.from(this.el.querySelectorAll("path"));a.forEach((i,o)=>{if(this.isInvisible(i))return;let l={el:i,length:0,startAt:0,duration:0,isResizeSensitive:false},h=1;if(i.getAttribute("vector-effect")==="non-scaling-stroke"){let d=i.getBoundingClientRect(),f=i.getBBox();h=Math.max(d.width/f.width,d.height/f.height),l.isResizeSensitive=true,s=true;}if(l.length=Math.ceil(i.getTotalLength()*h),isNaN(l.length)){p("vivus: cannot retrieve a path element length",i);return}this.map.push(l),i.style.strokeDasharray=`${l.length} ${l.length+this.dashGap*2}`,i.style.strokeDashoffset=String(l.length+this.dashGap),l.length+=this.dashGap,e+=l.length,this.renderPath(o);}),s&&p("vivus: this SVG contains non-scaling-strokes. Call instance.recalc() when the SVG is resized."),e=e===0?1:e,this.delay=this.delay===null?this.duration/3:this.delay,this.delayUnit=this.delay/(a.length>1?a.length-1:1),this.reverseStack&&this.map.reverse(),this.map.forEach((i,o)=>{let l=()=>{let h={};for(let{name:d,value:f}of Array.from(i.el.attributes))h[d]=f;return h};switch(this.type){case "delayed":i.startAt=this.delayUnit*o,i.duration=this.duration-this.delay;break;case "oneByOne":i.startAt=n/e*this.duration,i.duration=i.length/e*this.duration;break;case "sync":case "async":case "nsync":i.startAt=0,i.duration=this.duration;break;case "scenario-sync":{let h=l();i.startAt=t+(u(h["data-delay"],this.delayUnit)||0),i.duration=u(h["data-duration"],this.duration),t=h["data-async"]!==void 0?i.startAt:i.startAt+i.duration,this.frameLength=Math.max(this.frameLength,i.startAt+i.duration);break}case "scenario":{let h=l();i.startAt=u(h["data-start"],this.delayUnit)||0,i.duration=u(h["data-duration"],this.duration),this.frameLength=Math.max(this.frameLength,i.startAt+i.duration);break}}n+=i.length,this.frameLength=this.frameLength||this.duration;});}recalc(){this.mustRecalcScale||(this.mustRecalcScale=requestAnimationFrame(()=>this.performLineRecalc()));}performLineRecalc(){for(let t of this.map){if(!t.isResizeSensitive)continue;let e=t.el.getBoundingClientRect(),n=t.el.getBBox(),s=Math.max(e.width/n.width,e.height/n.height);t.length=Math.ceil(t.el.getTotalLength()*s),t.el.style.strokeDasharray=`${t.length} ${t.length+this.dashGap*2}`;}this.trace(),this.mustRecalcScale=null;}draw(){if(this.currentFrame+=this.speed,this.currentFrame<=0)this.stop(),this.reset();else if(this.currentFrame>=this.frameLength)this.stop(),this.currentFrame=this.frameLength,this.trace(),this.selfDestroy&&this.destroy();else {this.trace(),this.handle=requestAnimationFrame(()=>this.draw());return}this.finished();}finished(){if(this.callback(this),this.instanceCallback){let t=this.instanceCallback;this.instanceCallback=null,t(this);}}trace(){let t=this.animTimingFunction(this.currentFrame/this.frameLength)*this.frameLength;this.map.forEach((e,n)=>{let s=this.pathTimingFunction(Math.max(0,Math.min(1,(t-e.startAt)/e.duration)));e.progress!==s&&(e.progress=s,e.el.style.strokeDashoffset=String(Math.floor(e.length*(1-s))),this.renderPath(n));});}renderPath(t){let e=this.forceRender&&this.map&&this.map[t];if(!e)return;let n=e.el.cloneNode(true);e.el.parentNode?.replaceChild(n,e.el),e.el=n;}init(){this.frameLength=0,this.currentFrame=0,this.map=[],L(this.el),this.mapping(),this.starter(),this.onReady&&this.onReady(this);}starter(){if(this.start==="manual")return;if(this.start==="autostart"){this.play();return}let t=()=>{this.isInViewport(this.parentEl,1)&&(this.play(),window.removeEventListener("scroll",t),this.viewportListener=null);};this.viewportListener=t,window.addEventListener("scroll",t),t();}getStatus(){return this.currentFrame===0?"start":this.currentFrame===this.frameLength?"end":"progress"}reset(){return this.setFrameProgress(0)}finish(){return this.setFrameProgress(1)}setFrameProgress(t){let e=Math.min(1,Math.max(0,t));return this.currentFrame=Math.round(this.frameLength*e),this.trace(),this}play(t,e){this.instanceCallback=null;let n=t;if(n&&typeof n=="function")this.instanceCallback=n,n=void 0;else if(n&&typeof n!="number")throw new Error("Vivus [play]: invalid speed");return e&&typeof e=="function"&&!this.instanceCallback&&(this.instanceCallback=e),this.speed=n||1,g()?(this.stop(),this.currentFrame=this.speed<0?0:this.frameLength,this.trace(),this.speed>0&&this.selfDestroy&&this.destroy(),this.finished(),this):(this.handle||this.draw(),this)}stop(){return this.handle&&(cancelAnimationFrame(this.handle),this.handle=null),this}destroy(){this.stop(),this.viewportListener&&(window.removeEventListener("scroll",this.viewportListener),this.viewportListener=null),this.map.forEach((t,e)=>{t.el.style.strokeDashoffset="",t.el.style.strokeDasharray="",this.renderPath(e);});}isInvisible(t){let e=t.getAttribute("data-ignore");if(e!==null)return e!=="false";if(this.ignoreInvisible){let n=t.getBoundingClientRect();return !n.width&&!n.height}return  false}isInViewport(t,e=0){let n=window.pageYOffset||document.documentElement.scrollTop,s=n+Math.max(document.documentElement.clientHeight,window.innerHeight),a=t.getBoundingClientRect(),i=n+a.top;return i+a.height*(e||0)<=s&&i+a.height>=n}};c.LINEAR=t=>t,c.EASE=t=>-Math.cos(t*Math.PI)/2+.5,c.EASE_OUT=t=>1-Math.pow(1-t,3),c.EASE_IN=t=>Math.pow(t,3),c.EASE_OUT_BOUNCE=t=>{let e=-Math.cos(t*(.5*Math.PI))+1,n=Math.pow(e,1.5),s=Math.pow(1-t,2),a=-Math.abs(Math.cos(n*(2.5*Math.PI)))+1;return 1-s+a*s};var m=c,O=m;
+exports.Vivus=m;exports.default=O;