svg-scroll-draw 0.5.0 → 0.6.0

package/dist/nuxt/index.d.ts

@@ -0,0 +1,166 @@
+import * as vue from 'vue';
+import { App } from 'vue';
+
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+interface TriggerConfig {
+    start?: string;
+    end?: string;
+}
+interface ScrollDrawOptions {
+    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];
+    /** 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 structures. */
+    morphTo?: string;
+    onProgress?: (alpha: number) => void;
+    onStart?: () => void;
+    onComplete?: () => void;
+}
+
+/** Composable — attach to any container ref. */
+declare function useScrollDraw(options?: ScrollDrawOptions): vue.Ref<HTMLElement | null, HTMLElement | null>;
+/** Component — wraps children in a <div> and initialises the engine. */
+declare const ScrollDraw: vue.DefineComponent<vue.ExtractPropTypes<{
+    selector: {
+        type: StringConstructor;
+    };
+    speed: {
+        type: NumberConstructor;
+    };
+    fade: {
+        type: BooleanConstructor;
+    };
+    stagger: {
+        type: NumberConstructor;
+    };
+    easing: {
+        type: (StringConstructor | FunctionConstructor)[];
+    };
+    direction: {
+        type: () => "forward" | "reverse";
+    };
+    trigger: {
+        type: ObjectConstructor;
+    };
+    onProgress: {
+        type: FunctionConstructor;
+    };
+    onStart: {
+        type: FunctionConstructor;
+    };
+    onComplete: {
+        type: FunctionConstructor;
+    };
+    once: {
+        type: BooleanConstructor;
+    };
+    debug: {
+        type: BooleanConstructor;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    selector: {
+        type: StringConstructor;
+    };
+    speed: {
+        type: NumberConstructor;
+    };
+    fade: {
+        type: BooleanConstructor;
+    };
+    stagger: {
+        type: NumberConstructor;
+    };
+    easing: {
+        type: (StringConstructor | FunctionConstructor)[];
+    };
+    direction: {
+        type: () => "forward" | "reverse";
+    };
+    trigger: {
+        type: ObjectConstructor;
+    };
+    onProgress: {
+        type: FunctionConstructor;
+    };
+    onStart: {
+        type: FunctionConstructor;
+    };
+    onComplete: {
+        type: FunctionConstructor;
+    };
+    once: {
+        type: BooleanConstructor;
+    };
+    debug: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{}>, {
+    fade: boolean;
+    once: boolean;
+    debug: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Nuxt 3 integration for svg-scroll-draw.
+ *
+ * Re-exports the Vue composable and component for direct use, plus a
+ * plugin factory for global auto-registration.
+ *
+ * ## Option A — Import per component (recommended)
+ * ```ts
+ * import { useScrollDraw, ScrollDraw } from 'svg-scroll-draw/nuxt';
+ * ```
+ *
+ * ## Option B — Global auto-registration via Nuxt plugin
+ * Create `plugins/svg-scroll-draw.ts` in your Nuxt project:
+ * ```ts
+ * import { createScrollDrawPlugin } from 'svg-scroll-draw/nuxt';
+ * export default defineNuxtPlugin((nuxtApp) => {
+ *   nuxtApp.vueApp.use(createScrollDrawPlugin());
+ * });
+ * ```
+ *
+ * Then use <ScrollDraw> globally with no imports.
+ */
+
+/**
+ * Vue plugin that globally registers the <ScrollDraw> component.
+ * Pass to nuxtApp.vueApp.use() inside a Nuxt plugin.
+ */
+declare function createScrollDrawPlugin(): {
+    install(app: App): void;
+};
+
+export { ScrollDraw, type ScrollDrawOptions, createScrollDrawPlugin, useScrollDraw };

package/dist/nuxt/index.mjs

@@ -0,0 +1,3 @@
+import {defineComponent,ref,onMounted,onUnmounted,h}from'vue';var re={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)};function ne(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[o="top",n="bottom"]=r.split(/\s+/).filter(Boolean);return {element:o,viewport:n}}function be(e,r,o,n){switch(n){case "top":return e+o;case "center":return e+o+r/2;case "bottom":return e+o+r;default:return e+o}}function he(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function oe(e){let r=e.tagName.toLowerCase();if(r==="rect"){let o=parseFloat(e.getAttribute("width")??"0"),n=parseFloat(e.getAttribute("height")??"0");return 2*(o+n)}if(r==="circle"){let o=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*o}return e.getTotalLength()}function Ne(e,r,o){return Math.min(o,Math.max(r,e))}function H(e,r,o,n){return o===r?0:Ne((e-r)/(o-r)*n,0,1)}function ve(e,r,o,n,i){let c=be(e.top,e.height,r,n.element)-he(n.viewport,o),u=be(e.top,e.height,r,i.element)-he(i.viewport,o);return {tStart:c,tEnd:u}}function we(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let o=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(o)return [parseInt(o[1],16),parseInt(o[2],16),parseInt(o[3],16)];let n=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return n?[parseInt(n[1]),parseInt(n[2]),parseInt(n[3])]:null}function se(e,r,o){let n=we(e),i=we(r);return !n||!i?e:`rgb(${Math.round(n[0]+(i[0]-n[0])*o)},${Math.round(n[1]+(i[1]-n[1])*o)},${Math.round(n[2]+(i[2]-n[2])*o)})`}function xe(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function Re(e){let r=e.getAttribute("stroke"),o=e.getAttribute("fill");!r||r==="none"?xe("Element has no stroke \u2014 path will not be visible.",e):o&&o!=="none"&&o!=="transparent"&&xe("Element has a fill \u2014 it may obscure the stroke animation.",e);}function We(e,r,o){let n=document.createElement("div");n.setAttribute("data-svg-scroll-draw-debug",""),n.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function i(){let c=o==="x"?window.scrollX:window.scrollY,u=e-c,S=r-c,N=o==="x";n.innerHTML=`
+      <div style="position:absolute;${N?`left:${u}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${u}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${N?`left:${S}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${S}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(n),window.addEventListener("scroll",i,{passive:true}),i(),n}function Se(e,r,o){let n=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),i=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,c=>{let u=parseFloat(c),S=n[i++]??u;return String(+(u+(S-u)*o).toFixed(4))})}function ie(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let o=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:n="path, polyline, line, polygon, rect, circle",speed:i=1,fade:c=false,easing:u="linear",trigger:S={},stagger:N=0,direction:E="forward",once:le=false,debug:ke=false,axis:h="y",scrollContainer:X,autoReverse:ce=false,delay:ue=0,strokeColor:T,strokeWidth:C,waypoints:_,velocityScale:j=false,threshold:$e=0,rootMargin:Te="0px",repeat:fe=0,repeatDelay:Ce=0,morphTo:A,onProgress:Me,onStart:Fe,onComplete:me}=r,de=typeof u=="function"?u:re[u]??re.linear,Le=ne(S.start??"top bottom"),Ie=ne(S.end??"bottom top"),m=typeof X=="string"?document.querySelector(X):X??null,v=Array.isArray(T)?T[0]:null,g=Array.isArray(T)?T[1]:typeof T=="string"?T:null,y=Array.isArray(C)?C[0]:null,b=Array.isArray(C)?C[1]:typeof C=="number"?C:null,O=Array.from(e.querySelectorAll(n)),w=[],x=[],M=0,F=0,P=false,R=false,D=0,W=false,L=-1,V=-1,k=false,U=0,J=0,K,Q=null,z=new Set,G=-1,pe=performance.now();function Y(){return m?h==="x"?m.scrollLeft:m.scrollTop:h==="x"?window.scrollX:window.scrollY}function Oe(){return m?h==="x"?m.clientWidth:m.clientHeight:h==="x"?window.innerWidth:window.innerHeight}function ge(){let t=e.getBoundingClientRect(),s,a,d;if(m){let I=m.getBoundingClientRect();s=h==="x"?t.left-I.left+m.scrollLeft:t.top-I.top+m.scrollTop,a=h==="x"?t.width:t.height,d=Y();}else s=h==="x"?t.left:t.top,a=h==="x"?t.width:t.height,d=Y();let q=ve({top:s,height:a},d,Oe(),Le,Ie);M=q.tStart,F=q.tEnd,ke&&process.env.NODE_ENV!=="production"&&(Q?.remove(),Q=We(M,F,h));}function Pe(t,s){O.forEach((a,d)=>{a.style.strokeDashoffset=s==="reverse"?`${w[d]*t}`:`${w[d]*(1-t)}`,c&&(a.style.opacity=s==="reverse"?`${1-t}`:`${t}`),v&&g?a.style.stroke=se(v,g,t):g&&(a.style.stroke=g),y!==null&&b!==null?a.style.strokeWidth=`${y+(b-y)*t}`:b!==null&&(a.style.strokeWidth=`${b}`),A&&a.tagName.toLowerCase()==="path"&&x[d]&&a.setAttribute("d",Se(x[d],A,t));});}function ye(){O.forEach((t,s)=>{t.style.strokeDasharray=`${w[s]}`,t.style.strokeDashoffset=E==="reverse"?"0":`${w[s]}`,c?t.style.opacity=E==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),y!==null&&(t.style.strokeWidth=`${y}`),A&&t.tagName.toLowerCase()==="path"&&x[s]&&t.setAttribute("d",x[s]);});}if(O.forEach(t=>{Re(t);let s=oe(t);w.push(s),t.tagName.toLowerCase()==="path"?x.push(t.getAttribute("d")??""):x.push(""),o?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=E==="reverse"?`${s}`:"0",c&&(t.style.opacity="1"),g&&(t.style.stroke=g),b!==null&&(t.style.strokeWidth=`${b}`),A&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",A)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=E==="reverse"?"0":`${s}`,c?t.style.opacity=E==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),y!==null&&(t.style.strokeWidth=`${y}`));}),o)return me?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};ge();function Z(){if(!W||k)return;let t=performance.now(),s=Y(),a=i;if(j!==false){let l=t-pe,p=l>0?Math.abs(s-(G<0?s:G))/l:0;a=i*Math.max(.2,1+p*(typeof j=="number"?j:1)*.04);}G=s,pe=t;let d=ce?V===-1||s>=V?"forward":"reverse":E;V=s;let q=F-M,I=true;if(O.forEach((l,p)=>{let $=p*N*q,f=de(H(s,M+$,F+$,a));le&&!ce&&(L=Math.max(L,f),f=L),U=f,l.style.strokeDashoffset=d==="reverse"?`${w[p]*f}`:`${w[p]*(1-f)}`,c&&(l.style.opacity=d==="reverse"?`${1-f}`:`${f}`),v&&g?l.style.stroke=se(v,g,f):g&&(l.style.stroke=g),y!==null&&b!==null?l.style.strokeWidth=`${y+(b-y)*f}`:b!==null&&(l.style.strokeWidth=`${b}`),A&&l.tagName.toLowerCase()==="path"&&x[p]&&l.setAttribute("d",Se(x[p],A,f)),p===0&&Me?.(f),f<1&&(I=false);}),_){let l=de(H(s,M,F,a));for(let p in _){let $=parseFloat(p);l>=$&&!z.has($)&&(z.add($),_[p]?.());}}!R&&H(s,M,F,a)>0&&(R=true,Fe?.()),I&&!P?(P=true,me?.(),J<(fe==="infinite"?1/0:fe??0)&&(J++,K=setTimeout(()=>{L=-1,R=false,P=false,z.clear(),ye();},Ce))):!I&&!le&&(P=false),D=requestAnimationFrame(Z);}let ee=new IntersectionObserver(t=>{t.forEach(s=>{W=s.isIntersecting,W&&!k?D=requestAnimationFrame(Z):cancelAnimationFrame(D);});},{root:m??null,threshold:$e,rootMargin:Te}),te;function B(){clearTimeout(te),te=setTimeout(()=>{O.forEach((t,s)=>{w[s]=oe(t),t.style.strokeDasharray=`${w[s]}`;}),ge();},150);}return window.addEventListener("resize",B),window.addEventListener("orientationchange",B),ue>0?setTimeout(()=>ee.observe(e),ue):ee.observe(e),{destroy(){cancelAnimationFrame(D),clearTimeout(K),ee.disconnect(),window.removeEventListener("resize",B),window.removeEventListener("orientationchange",B),clearTimeout(te),Q?.remove();},replay(){L=-1,V=-1,G=-1,R=false,P=false,J=0,k=false,z.clear(),clearTimeout(K),ye();},pause(){k=true,cancelAnimationFrame(D);},resume(){k&&(k=false,W&&(D=requestAnimationFrame(Z)));},seek(t){let s=Math.min(1,Math.max(0,t));U=s,L=s,k=true,cancelAnimationFrame(D),Pe(s,E);},getProgress(){return U}}}function Ge(e={}){let r=ref(null);return onMounted(()=>{if(!r.value)return;let o=ie(r.value,e);onUnmounted(()=>o.destroy());}),r}var ae=defineComponent({name:"ScrollDraw",props:{selector:{type:String},speed:{type:Number},fade:{type:Boolean},stagger:{type:Number},easing:{type:[String,Function]},direction:{type:String},trigger:{type:Object},onProgress:{type:Function},onStart:{type:Function},onComplete:{type:Function},once:{type:Boolean},debug:{type:Boolean}},setup(e,{slots:r}){let o=ref(null);return onMounted(()=>{if(!o.value)return;let n={};e.selector!=null&&(n.selector=e.selector),e.speed!=null&&(n.speed=e.speed),e.fade!=null&&(n.fade=e.fade),e.stagger!=null&&(n.stagger=e.stagger),e.easing!=null&&(n.easing=e.easing),e.direction!=null&&(n.direction=e.direction),e.trigger!=null&&(n.trigger=e.trigger),e.once!=null&&(n.once=e.once),e.debug!=null&&(n.debug=e.debug),e.onProgress!=null&&(n.onProgress=e.onProgress),e.onStart!=null&&(n.onStart=e.onStart),e.onComplete!=null&&(n.onComplete=e.onComplete);let i=ie(o.value,n);onUnmounted(()=>i.destroy());}),()=>h("div",{ref:o},r.default?.())}});function Je(){return {install(e){e.component("ScrollDraw",ae);}}}export{ae as ScrollDraw,Je as createScrollDrawPlugin,Ge as useScrollDraw};

package/dist/react/index.cjs

@@ -1,3 +1,3 @@
-'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');var X={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)};function _(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[n="top",o="bottom"]=t.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function te(e,t,n,o){switch(o){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function re(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 J(e){let t=e.tagName.toLowerCase();if(t==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(t==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function ye(e,t,n){return Math.min(n,Math.max(t,e))}function N(e,t,n,o){return n===t?0:ye((e-t)/(n-t)*o,0,1)}function oe(e,t,n,o,i){let l=te(e.top,e.height,t,o.element)-re(o.viewport,n),d=te(e.top,e.height,t,i.element)-re(i.viewport,n);return {tStart:l,tEnd:d}}function ne(e){let t=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(t)return [parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function se(e,t,n){let o=ne(e),i=ne(t);return !o||!i?e:`rgb(${Math.round(o[0]+(i[0]-o[0])*n)},${Math.round(o[1]+(i[1]-o[1])*n)},${Math.round(o[2]+(i[2]-o[2])*n)})`}function ie(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function ge(e){let t=e.getAttribute("stroke"),n=e.getAttribute("fill");!t||t==="none"?ie("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&ie("Element has a fill \u2014 it may obscure the stroke animation.",e);}function be(e,t,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function i(){let l=n==="x"?window.scrollX:window.scrollY,d=e-l,A=t-l,T=n==="x";o.innerHTML=`
-      <div style="position:absolute;${T?`left:${d}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${d}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
-      <div style="position:absolute;${T?`left:${A}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${A}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",i,{passive:true}),i(),o}function le(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{}};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:i=1,fade:l=false,easing:d="linear",trigger:A={},stagger:T=0,direction:b="forward",once:K=false,debug:ae=false,axis:p="y",scrollContainer:P,autoReverse:Q=false,delay:U=0,strokeColor:h,strokeWidth:w,waypoints:z,onProgress:ce,onStart:ue,onComplete:Y}=t,Z=typeof d=="function"?d:X[d]??X.linear,fe=_(A.start??"top bottom"),pe=_(A.end??"bottom top"),a=typeof P=="string"?document.querySelector(P):P??null,v=Array.isArray(h)?h[0]:null,x=Array.isArray(h)?h[1]:typeof h=="string"?h:null,m=Array.isArray(w)?w[0]:null,E=Array.isArray(w)?w[1]:typeof w=="number"?w:null,I=Array.from(e.querySelectorAll(o)),y=[],$=0,k=0,L=false,O=false,M=0,W=false,C=-1,F=-1,G=null,V=new Set;function q(){return a?p==="x"?a.scrollLeft:a.scrollTop:p==="x"?window.scrollX:window.scrollY}function de(){return a?p==="x"?a.clientWidth:a.clientHeight:p==="x"?window.innerWidth:window.innerHeight}function j(){let r=e.getBoundingClientRect(),s,D,g;if(a){let u=a.getBoundingClientRect();s=p==="x"?r.left-u.left+a.scrollLeft:r.top-u.top+a.scrollTop,D=p==="x"?r.width:r.height,g=q();}else s=p==="x"?r.left:r.top,D=p==="x"?r.width:r.height,g=q();let c=oe({top:s,height:D},g,de(),fe,pe);$=c.tStart,k=c.tEnd,ae&&process.env.NODE_ENV!=="production"&&(G?.remove(),G=be($,k,p));}function me(){I.forEach((r,s)=>{r.style.strokeDasharray=`${y[s]}`,r.style.strokeDashoffset=b==="reverse"?"0":`${y[s]}`,l?r.style.opacity=b==="reverse"?"1":"0":r.style.opacity="",v&&(r.style.stroke=v),m!==null&&(r.style.strokeWidth=`${m}`);});}if(I.forEach(r=>{ge(r);let s=J(r);y.push(s),n?(r.style.strokeDasharray=`${s}`,r.style.strokeDashoffset=b==="reverse"?`${s}`:"0",l&&(r.style.opacity="1"),x&&(r.style.stroke=x),E!==null&&(r.style.strokeWidth=`${E}`)):(r.style.strokeDasharray=`${s}`,r.style.strokeDashoffset=b==="reverse"?"0":`${s}`,l?r.style.opacity=b==="reverse"?"1":"0":r.style.opacity="",v&&(r.style.stroke=v),m!==null&&(r.style.strokeWidth=`${m}`));}),n)return Y?.(),{destroy:()=>{},replay:()=>{}};j();function ee(){if(!W)return;let r=q(),s=Q?F===-1||r>=F?"forward":"reverse":b;F=r;let D=k-$,g=true;if(I.forEach((c,u)=>{let S=u*T*D,f=Z(N(r,$+S,k+S,i));K&&!Q&&(C=Math.max(C,f),f=C),c.style.strokeDashoffset=s==="reverse"?`${y[u]*f}`:`${y[u]*(1-f)}`,l&&(c.style.opacity=s==="reverse"?`${1-f}`:`${f}`),v&&x?c.style.stroke=se(v,x,f):x&&(c.style.stroke=x),m!==null&&E!==null?c.style.strokeWidth=`${m+(E-m)*f}`:E!==null&&(c.style.strokeWidth=`${E}`),u===0&&ce?.(f),f<1&&(g=false);}),z){let c=Z(N(r,$,k,i));for(let u in z){let S=parseFloat(u);c>=S&&!V.has(S)&&(V.add(S),z[u]?.());}}!O&&N(r,$,k,i)>0&&(O=true,ue?.()),g&&!L?(L=true,Y?.()):!g&&!K&&(L=false),M=requestAnimationFrame(ee);}let B=new IntersectionObserver(r=>{r.forEach(s=>{W=s.isIntersecting,W?M=requestAnimationFrame(ee):cancelAnimationFrame(M);});},{root:a??null}),H;function R(){clearTimeout(H),H=setTimeout(()=>{I.forEach((r,s)=>{y[s]=J(r),r.style.strokeDasharray=`${y[s]}`;}),j();},150);}return window.addEventListener("resize",R),window.addEventListener("orientationchange",R),U>0?setTimeout(()=>B.observe(e),U):B.observe(e),{destroy(){cancelAnimationFrame(M),B.disconnect(),window.removeEventListener("resize",R),window.removeEventListener("orientationchange",R),clearTimeout(H),G?.remove();},replay(){C=-1,F=-1,O=false,L=false,V.clear(),me();}}}function De({children:e,className:t,style:n,...o}){let i=react.useRef(null);return react.useEffect(()=>{if(!i.current)return;let l=le(i.current,o);return ()=>l.destroy()},[]),jsxRuntime.jsx("div",{ref:i,className:t,style:n,children:e})}exports.ScrollDraw=De;
+'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');var re={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)};function ne(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function ge(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function ye(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function oe(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function Ce(e,r,n){return Math.min(n,Math.max(r,e))}function H(e,r,n,o){return n===r?0:Ce((e-r)/(n-r)*o,0,1)}function be(e,r,n,o,i){let l=ge(e.top,e.height,r,o.element)-ye(o.viewport,n),u=ge(e.top,e.height,r,i.element)-ye(i.viewport,n);return {tStart:l,tEnd:u}}function he(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function se(e,r,n){let o=he(e),i=he(r);return !o||!i?e:`rgb(${Math.round(o[0]+(i[0]-o[0])*n)},${Math.round(o[1]+(i[1]-o[1])*n)},${Math.round(o[2]+(i[2]-o[2])*n)})`}function we(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function Fe(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?we("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&we("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ne(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function i(){let l=n==="x"?window.scrollX:window.scrollY,u=e-l,E=r-l,P=n==="x";o.innerHTML=`
+      <div style="position:absolute;${P?`left:${u}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${u}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${P?`left:${E}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${E}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",i,{passive:true}),i(),o}function ve(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),i=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,l=>{let u=parseFloat(l),E=o[i++]??u;return String(+(u+(E-u)*n).toFixed(4))})}function xe(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:i=1,fade:l=false,easing:u="linear",trigger:E={},stagger:P=0,direction:k="forward",once:ie=false,debug:Ee=false,axis:b="y",scrollContainer:X,autoReverse:ae=false,delay:le=0,strokeColor:D,strokeWidth:L,waypoints:_,velocityScale:J=false,threshold:ke=0,rootMargin:$e="0px",repeat:ce=0,repeatDelay:Ae=0,morphTo:$,onProgress:Se,onStart:Te,onComplete:ue}=r,fe=typeof u=="function"?u:re[u]??re.linear,De=ne(E.start??"top bottom"),Le=ne(E.end??"bottom top"),p=typeof X=="string"?document.querySelector(X):X??null,v=Array.isArray(D)?D[0]:null,g=Array.isArray(D)?D[1]:typeof D=="string"?D:null,y=Array.isArray(L)?L[0]:null,h=Array.isArray(L)?L[1]:typeof L=="number"?L:null,N=Array.from(e.querySelectorAll(o)),w=[],x=[],M=0,I=0,R=false,W=false,A=0,V=false,C=-1,z=-1,S=false,K=0,Q=0,U,Y=null,O=new Set,G=-1,pe=performance.now();function Z(){return p?b==="x"?p.scrollLeft:p.scrollTop:b==="x"?window.scrollX:window.scrollY}function Me(){return p?b==="x"?p.clientWidth:p.clientHeight:b==="x"?window.innerWidth:window.innerHeight}function me(){let t=e.getBoundingClientRect(),s,a,m;if(p){let F=p.getBoundingClientRect();s=b==="x"?t.left-F.left+p.scrollLeft:t.top-F.top+p.scrollTop,a=b==="x"?t.width:t.height,m=Z();}else s=b==="x"?t.left:t.top,a=b==="x"?t.width:t.height,m=Z();let B=be({top:s,height:a},m,Me(),De,Le);M=B.tStart,I=B.tEnd,Ee&&process.env.NODE_ENV!=="production"&&(Y?.remove(),Y=Ne(M,I,b));}function Ie(t,s){N.forEach((a,m)=>{a.style.strokeDashoffset=s==="reverse"?`${w[m]*t}`:`${w[m]*(1-t)}`,l&&(a.style.opacity=s==="reverse"?`${1-t}`:`${t}`),v&&g?a.style.stroke=se(v,g,t):g&&(a.style.stroke=g),y!==null&&h!==null?a.style.strokeWidth=`${y+(h-y)*t}`:h!==null&&(a.style.strokeWidth=`${h}`),$&&a.tagName.toLowerCase()==="path"&&x[m]&&a.setAttribute("d",ve(x[m],$,t));});}function de(){N.forEach((t,s)=>{t.style.strokeDasharray=`${w[s]}`,t.style.strokeDashoffset=k==="reverse"?"0":`${w[s]}`,l?t.style.opacity=k==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),y!==null&&(t.style.strokeWidth=`${y}`),$&&t.tagName.toLowerCase()==="path"&&x[s]&&t.setAttribute("d",x[s]);});}if(N.forEach(t=>{Fe(t);let s=oe(t);w.push(s),t.tagName.toLowerCase()==="path"?x.push(t.getAttribute("d")??""):x.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=k==="reverse"?`${s}`:"0",l&&(t.style.opacity="1"),g&&(t.style.stroke=g),h!==null&&(t.style.strokeWidth=`${h}`),$&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",$)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=k==="reverse"?"0":`${s}`,l?t.style.opacity=k==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),y!==null&&(t.style.strokeWidth=`${y}`));}),n)return ue?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};me();function j(){if(!V||S)return;let t=performance.now(),s=Z(),a=i;if(J!==false){let c=t-pe,d=c>0?Math.abs(s-(G<0?s:G))/c:0;a=i*Math.max(.2,1+d*(typeof J=="number"?J:1)*.04);}G=s,pe=t;let m=ae?z===-1||s>=z?"forward":"reverse":k;z=s;let B=I-M,F=true;if(N.forEach((c,d)=>{let T=d*P*B,f=fe(H(s,M+T,I+T,a));ie&&!ae&&(C=Math.max(C,f),f=C),K=f,c.style.strokeDashoffset=m==="reverse"?`${w[d]*f}`:`${w[d]*(1-f)}`,l&&(c.style.opacity=m==="reverse"?`${1-f}`:`${f}`),v&&g?c.style.stroke=se(v,g,f):g&&(c.style.stroke=g),y!==null&&h!==null?c.style.strokeWidth=`${y+(h-y)*f}`:h!==null&&(c.style.strokeWidth=`${h}`),$&&c.tagName.toLowerCase()==="path"&&x[d]&&c.setAttribute("d",ve(x[d],$,f)),d===0&&Se?.(f),f<1&&(F=false);}),_){let c=fe(H(s,M,I,a));for(let d in _){let T=parseFloat(d);c>=T&&!O.has(T)&&(O.add(T),_[d]?.());}}!W&&H(s,M,I,a)>0&&(W=true,Te?.()),F&&!R?(R=true,ue?.(),Q<(ce==="infinite"?1/0:ce??0)&&(Q++,U=setTimeout(()=>{C=-1,W=false,R=false,O.clear(),de();},Ae))):!F&&!ie&&(R=false),A=requestAnimationFrame(j);}let ee=new IntersectionObserver(t=>{t.forEach(s=>{V=s.isIntersecting,V&&!S?A=requestAnimationFrame(j):cancelAnimationFrame(A);});},{root:p??null,threshold:ke,rootMargin:$e}),te;function q(){clearTimeout(te),te=setTimeout(()=>{N.forEach((t,s)=>{w[s]=oe(t),t.style.strokeDasharray=`${w[s]}`;}),me();},150);}return window.addEventListener("resize",q),window.addEventListener("orientationchange",q),le>0?setTimeout(()=>ee.observe(e),le):ee.observe(e),{destroy(){cancelAnimationFrame(A),clearTimeout(U),ee.disconnect(),window.removeEventListener("resize",q),window.removeEventListener("orientationchange",q),clearTimeout(te),Y?.remove();},replay(){C=-1,z=-1,G=-1,W=false,R=false,Q=0,S=false,O.clear(),clearTimeout(U),de();},pause(){S=true,cancelAnimationFrame(A);},resume(){S&&(S=false,V&&(A=requestAnimationFrame(j)));},seek(t){let s=Math.min(1,Math.max(0,t));K=s,C=s,S=true,cancelAnimationFrame(A),Ie(s,k);},getProgress(){return K}}}function He({children:e,className:r,style:n,...o}){let i=react.useRef(null);return react.useEffect(()=>{if(!i.current)return;let l=xe(i.current,o);return ()=>l.destroy()},[]),jsxRuntime.jsx("div",{ref:i,className:r,style:n,children:e})}exports.ScrollDraw=He;

package/dist/react/index.d.mts

@@ -22,7 +22,7 @@ interface ScrollDrawOptions {
     scrollContainer?: string | Element;
     /** Automatically reverse the animation when the user scrolls back up. */
     autoReverse?: boolean;
-    /** Delay in milliseconds before the engine starts observing (useful for page-load sequences). */
+    /** 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];
@@ -30,6 +30,18 @@ interface ScrollDrawOptions {
     strokeWidth?: number | [number, number];
     /** 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 structures. */
+    morphTo?: string;
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;

package/dist/react/index.d.ts

@@ -22,7 +22,7 @@ interface ScrollDrawOptions {
     scrollContainer?: string | Element;
     /** Automatically reverse the animation when the user scrolls back up. */
     autoReverse?: boolean;
-    /** Delay in milliseconds before the engine starts observing (useful for page-load sequences). */
+    /** 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];
@@ -30,6 +30,18 @@ interface ScrollDrawOptions {
     strokeWidth?: number | [number, number];
     /** 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 structures. */
+    morphTo?: string;
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;

package/dist/react/index.mjs

@@ -1,3 +1,3 @@
-import {useRef,useEffect}from'react';import {jsx}from'react/jsx-runtime';var X={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)};function _(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[n="top",o="bottom"]=t.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function te(e,t,n,o){switch(o){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function re(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 J(e){let t=e.tagName.toLowerCase();if(t==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(t==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function ye(e,t,n){return Math.min(n,Math.max(t,e))}function N(e,t,n,o){return n===t?0:ye((e-t)/(n-t)*o,0,1)}function oe(e,t,n,o,i){let l=te(e.top,e.height,t,o.element)-re(o.viewport,n),d=te(e.top,e.height,t,i.element)-re(i.viewport,n);return {tStart:l,tEnd:d}}function ne(e){let t=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(t)return [parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function se(e,t,n){let o=ne(e),i=ne(t);return !o||!i?e:`rgb(${Math.round(o[0]+(i[0]-o[0])*n)},${Math.round(o[1]+(i[1]-o[1])*n)},${Math.round(o[2]+(i[2]-o[2])*n)})`}function ie(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function ge(e){let t=e.getAttribute("stroke"),n=e.getAttribute("fill");!t||t==="none"?ie("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&ie("Element has a fill \u2014 it may obscure the stroke animation.",e);}function be(e,t,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function i(){let l=n==="x"?window.scrollX:window.scrollY,d=e-l,A=t-l,T=n==="x";o.innerHTML=`
-      <div style="position:absolute;${T?`left:${d}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${d}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
-      <div style="position:absolute;${T?`left:${A}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${A}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",i,{passive:true}),i(),o}function le(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{}};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:i=1,fade:l=false,easing:d="linear",trigger:A={},stagger:T=0,direction:b="forward",once:K=false,debug:ae=false,axis:p="y",scrollContainer:P,autoReverse:Q=false,delay:U=0,strokeColor:h,strokeWidth:w,waypoints:z,onProgress:ce,onStart:ue,onComplete:Y}=t,Z=typeof d=="function"?d:X[d]??X.linear,fe=_(A.start??"top bottom"),pe=_(A.end??"bottom top"),a=typeof P=="string"?document.querySelector(P):P??null,v=Array.isArray(h)?h[0]:null,x=Array.isArray(h)?h[1]:typeof h=="string"?h:null,m=Array.isArray(w)?w[0]:null,E=Array.isArray(w)?w[1]:typeof w=="number"?w:null,I=Array.from(e.querySelectorAll(o)),y=[],$=0,k=0,L=false,O=false,M=0,W=false,C=-1,F=-1,G=null,V=new Set;function q(){return a?p==="x"?a.scrollLeft:a.scrollTop:p==="x"?window.scrollX:window.scrollY}function de(){return a?p==="x"?a.clientWidth:a.clientHeight:p==="x"?window.innerWidth:window.innerHeight}function j(){let r=e.getBoundingClientRect(),s,D,g;if(a){let u=a.getBoundingClientRect();s=p==="x"?r.left-u.left+a.scrollLeft:r.top-u.top+a.scrollTop,D=p==="x"?r.width:r.height,g=q();}else s=p==="x"?r.left:r.top,D=p==="x"?r.width:r.height,g=q();let c=oe({top:s,height:D},g,de(),fe,pe);$=c.tStart,k=c.tEnd,ae&&process.env.NODE_ENV!=="production"&&(G?.remove(),G=be($,k,p));}function me(){I.forEach((r,s)=>{r.style.strokeDasharray=`${y[s]}`,r.style.strokeDashoffset=b==="reverse"?"0":`${y[s]}`,l?r.style.opacity=b==="reverse"?"1":"0":r.style.opacity="",v&&(r.style.stroke=v),m!==null&&(r.style.strokeWidth=`${m}`);});}if(I.forEach(r=>{ge(r);let s=J(r);y.push(s),n?(r.style.strokeDasharray=`${s}`,r.style.strokeDashoffset=b==="reverse"?`${s}`:"0",l&&(r.style.opacity="1"),x&&(r.style.stroke=x),E!==null&&(r.style.strokeWidth=`${E}`)):(r.style.strokeDasharray=`${s}`,r.style.strokeDashoffset=b==="reverse"?"0":`${s}`,l?r.style.opacity=b==="reverse"?"1":"0":r.style.opacity="",v&&(r.style.stroke=v),m!==null&&(r.style.strokeWidth=`${m}`));}),n)return Y?.(),{destroy:()=>{},replay:()=>{}};j();function ee(){if(!W)return;let r=q(),s=Q?F===-1||r>=F?"forward":"reverse":b;F=r;let D=k-$,g=true;if(I.forEach((c,u)=>{let S=u*T*D,f=Z(N(r,$+S,k+S,i));K&&!Q&&(C=Math.max(C,f),f=C),c.style.strokeDashoffset=s==="reverse"?`${y[u]*f}`:`${y[u]*(1-f)}`,l&&(c.style.opacity=s==="reverse"?`${1-f}`:`${f}`),v&&x?c.style.stroke=se(v,x,f):x&&(c.style.stroke=x),m!==null&&E!==null?c.style.strokeWidth=`${m+(E-m)*f}`:E!==null&&(c.style.strokeWidth=`${E}`),u===0&&ce?.(f),f<1&&(g=false);}),z){let c=Z(N(r,$,k,i));for(let u in z){let S=parseFloat(u);c>=S&&!V.has(S)&&(V.add(S),z[u]?.());}}!O&&N(r,$,k,i)>0&&(O=true,ue?.()),g&&!L?(L=true,Y?.()):!g&&!K&&(L=false),M=requestAnimationFrame(ee);}let B=new IntersectionObserver(r=>{r.forEach(s=>{W=s.isIntersecting,W?M=requestAnimationFrame(ee):cancelAnimationFrame(M);});},{root:a??null}),H;function R(){clearTimeout(H),H=setTimeout(()=>{I.forEach((r,s)=>{y[s]=J(r),r.style.strokeDasharray=`${y[s]}`;}),j();},150);}return window.addEventListener("resize",R),window.addEventListener("orientationchange",R),U>0?setTimeout(()=>B.observe(e),U):B.observe(e),{destroy(){cancelAnimationFrame(M),B.disconnect(),window.removeEventListener("resize",R),window.removeEventListener("orientationchange",R),clearTimeout(H),G?.remove();},replay(){C=-1,F=-1,O=false,L=false,V.clear(),me();}}}function De({children:e,className:t,style:n,...o}){let i=useRef(null);return useEffect(()=>{if(!i.current)return;let l=le(i.current,o);return ()=>l.destroy()},[]),jsx("div",{ref:i,className:t,style:n,children:e})}export{De as ScrollDraw};
+import {useRef,useEffect}from'react';import {jsx}from'react/jsx-runtime';var re={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)};function ne(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function ge(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function ye(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function oe(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function Ce(e,r,n){return Math.min(n,Math.max(r,e))}function H(e,r,n,o){return n===r?0:Ce((e-r)/(n-r)*o,0,1)}function be(e,r,n,o,i){let l=ge(e.top,e.height,r,o.element)-ye(o.viewport,n),u=ge(e.top,e.height,r,i.element)-ye(i.viewport,n);return {tStart:l,tEnd:u}}function he(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function se(e,r,n){let o=he(e),i=he(r);return !o||!i?e:`rgb(${Math.round(o[0]+(i[0]-o[0])*n)},${Math.round(o[1]+(i[1]-o[1])*n)},${Math.round(o[2]+(i[2]-o[2])*n)})`}function we(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function Fe(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?we("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&we("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ne(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function i(){let l=n==="x"?window.scrollX:window.scrollY,u=e-l,E=r-l,P=n==="x";o.innerHTML=`
+      <div style="position:absolute;${P?`left:${u}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${u}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${P?`left:${E}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${E}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",i,{passive:true}),i(),o}function ve(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),i=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,l=>{let u=parseFloat(l),E=o[i++]??u;return String(+(u+(E-u)*n).toFixed(4))})}function xe(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:i=1,fade:l=false,easing:u="linear",trigger:E={},stagger:P=0,direction:k="forward",once:ie=false,debug:Ee=false,axis:b="y",scrollContainer:X,autoReverse:ae=false,delay:le=0,strokeColor:D,strokeWidth:L,waypoints:_,velocityScale:J=false,threshold:ke=0,rootMargin:$e="0px",repeat:ce=0,repeatDelay:Ae=0,morphTo:$,onProgress:Se,onStart:Te,onComplete:ue}=r,fe=typeof u=="function"?u:re[u]??re.linear,De=ne(E.start??"top bottom"),Le=ne(E.end??"bottom top"),p=typeof X=="string"?document.querySelector(X):X??null,v=Array.isArray(D)?D[0]:null,g=Array.isArray(D)?D[1]:typeof D=="string"?D:null,y=Array.isArray(L)?L[0]:null,h=Array.isArray(L)?L[1]:typeof L=="number"?L:null,N=Array.from(e.querySelectorAll(o)),w=[],x=[],M=0,I=0,R=false,W=false,A=0,V=false,C=-1,z=-1,S=false,K=0,Q=0,U,Y=null,O=new Set,G=-1,pe=performance.now();function Z(){return p?b==="x"?p.scrollLeft:p.scrollTop:b==="x"?window.scrollX:window.scrollY}function Me(){return p?b==="x"?p.clientWidth:p.clientHeight:b==="x"?window.innerWidth:window.innerHeight}function me(){let t=e.getBoundingClientRect(),s,a,m;if(p){let F=p.getBoundingClientRect();s=b==="x"?t.left-F.left+p.scrollLeft:t.top-F.top+p.scrollTop,a=b==="x"?t.width:t.height,m=Z();}else s=b==="x"?t.left:t.top,a=b==="x"?t.width:t.height,m=Z();let B=be({top:s,height:a},m,Me(),De,Le);M=B.tStart,I=B.tEnd,Ee&&process.env.NODE_ENV!=="production"&&(Y?.remove(),Y=Ne(M,I,b));}function Ie(t,s){N.forEach((a,m)=>{a.style.strokeDashoffset=s==="reverse"?`${w[m]*t}`:`${w[m]*(1-t)}`,l&&(a.style.opacity=s==="reverse"?`${1-t}`:`${t}`),v&&g?a.style.stroke=se(v,g,t):g&&(a.style.stroke=g),y!==null&&h!==null?a.style.strokeWidth=`${y+(h-y)*t}`:h!==null&&(a.style.strokeWidth=`${h}`),$&&a.tagName.toLowerCase()==="path"&&x[m]&&a.setAttribute("d",ve(x[m],$,t));});}function de(){N.forEach((t,s)=>{t.style.strokeDasharray=`${w[s]}`,t.style.strokeDashoffset=k==="reverse"?"0":`${w[s]}`,l?t.style.opacity=k==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),y!==null&&(t.style.strokeWidth=`${y}`),$&&t.tagName.toLowerCase()==="path"&&x[s]&&t.setAttribute("d",x[s]);});}if(N.forEach(t=>{Fe(t);let s=oe(t);w.push(s),t.tagName.toLowerCase()==="path"?x.push(t.getAttribute("d")??""):x.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=k==="reverse"?`${s}`:"0",l&&(t.style.opacity="1"),g&&(t.style.stroke=g),h!==null&&(t.style.strokeWidth=`${h}`),$&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",$)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=k==="reverse"?"0":`${s}`,l?t.style.opacity=k==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),y!==null&&(t.style.strokeWidth=`${y}`));}),n)return ue?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};me();function j(){if(!V||S)return;let t=performance.now(),s=Z(),a=i;if(J!==false){let c=t-pe,d=c>0?Math.abs(s-(G<0?s:G))/c:0;a=i*Math.max(.2,1+d*(typeof J=="number"?J:1)*.04);}G=s,pe=t;let m=ae?z===-1||s>=z?"forward":"reverse":k;z=s;let B=I-M,F=true;if(N.forEach((c,d)=>{let T=d*P*B,f=fe(H(s,M+T,I+T,a));ie&&!ae&&(C=Math.max(C,f),f=C),K=f,c.style.strokeDashoffset=m==="reverse"?`${w[d]*f}`:`${w[d]*(1-f)}`,l&&(c.style.opacity=m==="reverse"?`${1-f}`:`${f}`),v&&g?c.style.stroke=se(v,g,f):g&&(c.style.stroke=g),y!==null&&h!==null?c.style.strokeWidth=`${y+(h-y)*f}`:h!==null&&(c.style.strokeWidth=`${h}`),$&&c.tagName.toLowerCase()==="path"&&x[d]&&c.setAttribute("d",ve(x[d],$,f)),d===0&&Se?.(f),f<1&&(F=false);}),_){let c=fe(H(s,M,I,a));for(let d in _){let T=parseFloat(d);c>=T&&!O.has(T)&&(O.add(T),_[d]?.());}}!W&&H(s,M,I,a)>0&&(W=true,Te?.()),F&&!R?(R=true,ue?.(),Q<(ce==="infinite"?1/0:ce??0)&&(Q++,U=setTimeout(()=>{C=-1,W=false,R=false,O.clear(),de();},Ae))):!F&&!ie&&(R=false),A=requestAnimationFrame(j);}let ee=new IntersectionObserver(t=>{t.forEach(s=>{V=s.isIntersecting,V&&!S?A=requestAnimationFrame(j):cancelAnimationFrame(A);});},{root:p??null,threshold:ke,rootMargin:$e}),te;function q(){clearTimeout(te),te=setTimeout(()=>{N.forEach((t,s)=>{w[s]=oe(t),t.style.strokeDasharray=`${w[s]}`;}),me();},150);}return window.addEventListener("resize",q),window.addEventListener("orientationchange",q),le>0?setTimeout(()=>ee.observe(e),le):ee.observe(e),{destroy(){cancelAnimationFrame(A),clearTimeout(U),ee.disconnect(),window.removeEventListener("resize",q),window.removeEventListener("orientationchange",q),clearTimeout(te),Y?.remove();},replay(){C=-1,z=-1,G=-1,W=false,R=false,Q=0,S=false,O.clear(),clearTimeout(U),de();},pause(){S=true,cancelAnimationFrame(A);},resume(){S&&(S=false,V&&(A=requestAnimationFrame(j)));},seek(t){let s=Math.min(1,Math.max(0,t));K=s,C=s,S=true,cancelAnimationFrame(A),Ie(s,k);},getProgress(){return K}}}function He({children:e,className:r,style:n,...o}){let i=useRef(null);return useEffect(()=>{if(!i.current)return;let l=xe(i.current,o);return ()=>l.destroy()},[]),jsx("div",{ref:i,className:r,style:n,children:e})}export{He as ScrollDraw};

package/dist/solid/index.cjs

@@ -1,3 +1,3 @@
-'use strict';var solidJs=require('solid-js');var X={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)};function _(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[r="top",o="bottom"]=t.split(/\s+/).filter(Boolean);return {element:r,viewport:o}}function re(e,t,r,o){switch(o){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function ne(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 j(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function be(e,t,r){return Math.min(r,Math.max(t,e))}function z(e,t,r,o){return r===t?0:be((e-t)/(r-t)*o,0,1)}function se(e,t,r,o,i){let f=re(e.top,e.height,t,o.element)-ne(o.viewport,r),d=re(e.top,e.height,t,i.element)-ne(i.viewport,r);return {tStart:f,tEnd:d}}function oe(e){let t=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(t)return [parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[3],16)];let r=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r)return [parseInt(r[1],16),parseInt(r[2],16),parseInt(r[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function ie(e,t,r){let o=oe(e),i=oe(t);return !o||!i?e:`rgb(${Math.round(o[0]+(i[0]-o[0])*r)},${Math.round(o[1]+(i[1]-o[1])*r)},${Math.round(o[2]+(i[2]-o[2])*r)})`}function le(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function he(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?le("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&le("Element has a fill \u2014 it may obscure the stroke animation.",e);}function we(e,t,r){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function i(){let f=r==="x"?window.scrollX:window.scrollY,d=e-f,A=t-f,T=r==="x";o.innerHTML=`
-      <div style="position:absolute;${T?`left:${d}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${d}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
-      <div style="position:absolute;${T?`left:${A}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${A}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",i,{passive:true}),i(),o}function J(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{}};let r=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:i=1,fade:f=false,easing:d="linear",trigger:A={},stagger:T=0,direction:b="forward",once:K=false,debug:ue=false,axis:p="y",scrollContainer:W,autoReverse:Q=false,delay:U=0,strokeColor:h,strokeWidth:w,waypoints:G,onProgress:fe,onStart:pe,onComplete:Y}=t,Z=typeof d=="function"?d:X[d]??X.linear,de=_(A.start??"top bottom"),me=_(A.end??"bottom top"),l=typeof W=="string"?document.querySelector(W):W??null,v=Array.isArray(h)?h[0]:null,x=Array.isArray(h)?h[1]:typeof h=="string"?h:null,m=Array.isArray(w)?w[0]:null,E=Array.isArray(w)?w[1]:typeof w=="number"?w:null,I=Array.from(e.querySelectorAll(o)),g=[],S=0,$=0,M=false,V=false,L=0,N=false,C=-1,F=-1,P=null,R=new Set;function H(){return l?p==="x"?l.scrollLeft:l.scrollTop:p==="x"?window.scrollX:window.scrollY}function ge(){return l?p==="x"?l.clientWidth:l.clientHeight:p==="x"?window.innerWidth:window.innerHeight}function ee(){let n=e.getBoundingClientRect(),s,D,y;if(l){let c=l.getBoundingClientRect();s=p==="x"?n.left-c.left+l.scrollLeft:n.top-c.top+l.scrollTop,D=p==="x"?n.width:n.height,y=H();}else s=p==="x"?n.left:n.top,D=p==="x"?n.width:n.height,y=H();let a=se({top:s,height:D},y,ge(),de,me);S=a.tStart,$=a.tEnd,ue&&process.env.NODE_ENV!=="production"&&(P?.remove(),P=we(S,$,p));}function ye(){I.forEach((n,s)=>{n.style.strokeDasharray=`${g[s]}`,n.style.strokeDashoffset=b==="reverse"?"0":`${g[s]}`,f?n.style.opacity=b==="reverse"?"1":"0":n.style.opacity="",v&&(n.style.stroke=v),m!==null&&(n.style.strokeWidth=`${m}`);});}if(I.forEach(n=>{he(n);let s=j(n);g.push(s),r?(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=b==="reverse"?`${s}`:"0",f&&(n.style.opacity="1"),x&&(n.style.stroke=x),E!==null&&(n.style.strokeWidth=`${E}`)):(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=b==="reverse"?"0":`${s}`,f?n.style.opacity=b==="reverse"?"1":"0":n.style.opacity="",v&&(n.style.stroke=v),m!==null&&(n.style.strokeWidth=`${m}`));}),r)return Y?.(),{destroy:()=>{},replay:()=>{}};ee();function te(){if(!N)return;let n=H(),s=Q?F===-1||n>=F?"forward":"reverse":b;F=n;let D=$-S,y=true;if(I.forEach((a,c)=>{let k=c*T*D,u=Z(z(n,S+k,$+k,i));K&&!Q&&(C=Math.max(C,u),u=C),a.style.strokeDashoffset=s==="reverse"?`${g[c]*u}`:`${g[c]*(1-u)}`,f&&(a.style.opacity=s==="reverse"?`${1-u}`:`${u}`),v&&x?a.style.stroke=ie(v,x,u):x&&(a.style.stroke=x),m!==null&&E!==null?a.style.strokeWidth=`${m+(E-m)*u}`:E!==null&&(a.style.strokeWidth=`${E}`),c===0&&fe?.(u),u<1&&(y=false);}),G){let a=Z(z(n,S,$,i));for(let c in G){let k=parseFloat(c);a>=k&&!R.has(k)&&(R.add(k),G[c]?.());}}!V&&z(n,S,$,i)>0&&(V=true,pe?.()),y&&!M?(M=true,Y?.()):!y&&!K&&(M=false),L=requestAnimationFrame(te);}let q=new IntersectionObserver(n=>{n.forEach(s=>{N=s.isIntersecting,N?L=requestAnimationFrame(te):cancelAnimationFrame(L);});},{root:l??null}),B;function O(){clearTimeout(B),B=setTimeout(()=>{I.forEach((n,s)=>{g[s]=j(n),n.style.strokeDasharray=`${g[s]}`;}),ee();},150);}return window.addEventListener("resize",O),window.addEventListener("orientationchange",O),U>0?setTimeout(()=>q.observe(e),U):q.observe(e),{destroy(){cancelAnimationFrame(L),q.disconnect(),window.removeEventListener("resize",O),window.removeEventListener("orientationchange",O),clearTimeout(B),P?.remove();},replay(){C=-1,F=-1,V=false,M=false,R.clear(),ye();}}}function ke(e={}){let t,r;return solidJs.onMount(()=>{t&&(r=J(t,e));}),solidJs.onCleanup(()=>{r?.destroy();}),o=>{t=o;}}function Ae(e={}){let t,r;return solidJs.onMount(()=>{t&&(r=J(t,e));}),solidJs.onCleanup(()=>{r?.destroy(),r=void 0;}),{ref:o=>{t=o;},getInstance:()=>r}}exports.createScrollDraw=Ae;exports.useScrollDraw=ke;
+'use strict';var solidJs=require('solid-js');var re={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)};function ne(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function ye(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function he(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function oe(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function Ne(e,r,n){return Math.min(n,Math.max(r,e))}function B(e,r,n,o){return n===r?0:Ne((e-r)/(n-r)*o,0,1)}function we(e,r,n,o,a){let c=ye(e.top,e.height,r,o.element)-he(o.viewport,n),u=ye(e.top,e.height,r,a.element)-he(a.viewport,n);return {tStart:c,tEnd:u}}function be(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function se(e,r,n){let o=be(e),a=be(r);return !o||!a?e:`rgb(${Math.round(o[0]+(a[0]-o[0])*n)},${Math.round(o[1]+(a[1]-o[1])*n)},${Math.round(o[2]+(a[2]-o[2])*n)})`}function ve(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function Oe(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?ve("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&ve("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Pe(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function a(){let c=n==="x"?window.scrollX:window.scrollY,u=e-c,E=r-c,P=n==="x";o.innerHTML=`
+      <div style="position:absolute;${P?`left:${u}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${u}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${P?`left:${E}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${E}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",a,{passive:true}),a(),o}function xe(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,c=>{let u=parseFloat(c),E=o[a++]??u;return String(+(u+(E-u)*n).toFixed(4))})}function ie(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:a=1,fade:c=false,easing:u="linear",trigger:E={},stagger:P=0,direction:k="forward",once:ae=false,debug:$e=false,axis:b="y",scrollContainer:X,autoReverse:le=false,delay:ce=0,strokeColor:D,strokeWidth:M,waypoints:_,velocityScale:j=false,threshold:Ae=0,rootMargin:Se="0px",repeat:ue=0,repeatDelay:Te=0,morphTo:$,onProgress:De,onStart:Me,onComplete:fe}=r,pe=typeof u=="function"?u:re[u]??re.linear,Ie=ne(E.start??"top bottom"),Le=ne(E.end??"bottom top"),p=typeof X=="string"?document.querySelector(X):X??null,v=Array.isArray(D)?D[0]:null,g=Array.isArray(D)?D[1]:typeof D=="string"?D:null,y=Array.isArray(M)?M[0]:null,h=Array.isArray(M)?M[1]:typeof M=="number"?M:null,N=Array.from(e.querySelectorAll(o)),w=[],x=[],I=0,L=0,O=false,W=false,A=0,R=false,C=-1,V=-1,S=false,J=0,K=0,Q,U=null,z=new Set,G=-1,me=performance.now();function Y(){return p?b==="x"?p.scrollLeft:p.scrollTop:b==="x"?window.scrollX:window.scrollY}function Ce(){return p?b==="x"?p.clientWidth:p.clientHeight:b==="x"?window.innerWidth:window.innerHeight}function de(){let t=e.getBoundingClientRect(),s,i,m;if(p){let F=p.getBoundingClientRect();s=b==="x"?t.left-F.left+p.scrollLeft:t.top-F.top+p.scrollTop,i=b==="x"?t.width:t.height,m=Y();}else s=b==="x"?t.left:t.top,i=b==="x"?t.width:t.height,m=Y();let H=we({top:s,height:i},m,Ce(),Ie,Le);I=H.tStart,L=H.tEnd,$e&&process.env.NODE_ENV!=="production"&&(U?.remove(),U=Pe(I,L,b));}function Fe(t,s){N.forEach((i,m)=>{i.style.strokeDashoffset=s==="reverse"?`${w[m]*t}`:`${w[m]*(1-t)}`,c&&(i.style.opacity=s==="reverse"?`${1-t}`:`${t}`),v&&g?i.style.stroke=se(v,g,t):g&&(i.style.stroke=g),y!==null&&h!==null?i.style.strokeWidth=`${y+(h-y)*t}`:h!==null&&(i.style.strokeWidth=`${h}`),$&&i.tagName.toLowerCase()==="path"&&x[m]&&i.setAttribute("d",xe(x[m],$,t));});}function ge(){N.forEach((t,s)=>{t.style.strokeDasharray=`${w[s]}`,t.style.strokeDashoffset=k==="reverse"?"0":`${w[s]}`,c?t.style.opacity=k==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),y!==null&&(t.style.strokeWidth=`${y}`),$&&t.tagName.toLowerCase()==="path"&&x[s]&&t.setAttribute("d",x[s]);});}if(N.forEach(t=>{Oe(t);let s=oe(t);w.push(s),t.tagName.toLowerCase()==="path"?x.push(t.getAttribute("d")??""):x.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=k==="reverse"?`${s}`:"0",c&&(t.style.opacity="1"),g&&(t.style.stroke=g),h!==null&&(t.style.strokeWidth=`${h}`),$&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",$)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=k==="reverse"?"0":`${s}`,c?t.style.opacity=k==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),y!==null&&(t.style.strokeWidth=`${y}`));}),n)return fe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};de();function Z(){if(!R||S)return;let t=performance.now(),s=Y(),i=a;if(j!==false){let l=t-me,d=l>0?Math.abs(s-(G<0?s:G))/l:0;i=a*Math.max(.2,1+d*(typeof j=="number"?j:1)*.04);}G=s,me=t;let m=le?V===-1||s>=V?"forward":"reverse":k;V=s;let H=L-I,F=true;if(N.forEach((l,d)=>{let T=d*P*H,f=pe(B(s,I+T,L+T,i));ae&&!le&&(C=Math.max(C,f),f=C),J=f,l.style.strokeDashoffset=m==="reverse"?`${w[d]*f}`:`${w[d]*(1-f)}`,c&&(l.style.opacity=m==="reverse"?`${1-f}`:`${f}`),v&&g?l.style.stroke=se(v,g,f):g&&(l.style.stroke=g),y!==null&&h!==null?l.style.strokeWidth=`${y+(h-y)*f}`:h!==null&&(l.style.strokeWidth=`${h}`),$&&l.tagName.toLowerCase()==="path"&&x[d]&&l.setAttribute("d",xe(x[d],$,f)),d===0&&De?.(f),f<1&&(F=false);}),_){let l=pe(B(s,I,L,i));for(let d in _){let T=parseFloat(d);l>=T&&!z.has(T)&&(z.add(T),_[d]?.());}}!W&&B(s,I,L,i)>0&&(W=true,Me?.()),F&&!O?(O=true,fe?.(),K<(ue==="infinite"?1/0:ue??0)&&(K++,Q=setTimeout(()=>{C=-1,W=false,O=false,z.clear(),ge();},Te))):!F&&!ae&&(O=false),A=requestAnimationFrame(Z);}let ee=new IntersectionObserver(t=>{t.forEach(s=>{R=s.isIntersecting,R&&!S?A=requestAnimationFrame(Z):cancelAnimationFrame(A);});},{root:p??null,threshold:Ae,rootMargin:Se}),te;function q(){clearTimeout(te),te=setTimeout(()=>{N.forEach((t,s)=>{w[s]=oe(t),t.style.strokeDasharray=`${w[s]}`;}),de();},150);}return window.addEventListener("resize",q),window.addEventListener("orientationchange",q),ce>0?setTimeout(()=>ee.observe(e),ce):ee.observe(e),{destroy(){cancelAnimationFrame(A),clearTimeout(Q),ee.disconnect(),window.removeEventListener("resize",q),window.removeEventListener("orientationchange",q),clearTimeout(te),U?.remove();},replay(){C=-1,V=-1,G=-1,W=false,O=false,K=0,S=false,z.clear(),clearTimeout(Q),ge();},pause(){S=true,cancelAnimationFrame(A);},resume(){S&&(S=false,R&&(A=requestAnimationFrame(Z)));},seek(t){let s=Math.min(1,Math.max(0,t));J=s,C=s,S=true,cancelAnimationFrame(A),Fe(s,k);},getProgress(){return J}}}function qe(e={}){let r,n;return solidJs.onMount(()=>{r&&(n=ie(r,e));}),solidJs.onCleanup(()=>{n?.destroy();}),o=>{r=o;}}function He(e={}){let r,n;return solidJs.onMount(()=>{r&&(n=ie(r,e));}),solidJs.onCleanup(()=>{n?.destroy(),n=void 0;}),{ref:o=>{r=o;},getInstance:()=>n}}exports.createScrollDraw=He;exports.useScrollDraw=qe;

package/dist/solid/index.d.mts

@@ -19,7 +19,7 @@ interface ScrollDrawOptions {
     scrollContainer?: string | Element;
     /** Automatically reverse the animation when the user scrolls back up. */
     autoReverse?: boolean;
-    /** Delay in milliseconds before the engine starts observing (useful for page-load sequences). */
+    /** 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];
@@ -27,6 +27,18 @@ interface ScrollDrawOptions {
     strokeWidth?: number | [number, number];
     /** 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 structures. */
+    morphTo?: string;
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
@@ -35,6 +47,14 @@ 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;
 }
 
 /**

package/dist/solid/index.d.ts

@@ -19,7 +19,7 @@ interface ScrollDrawOptions {
     scrollContainer?: string | Element;
     /** Automatically reverse the animation when the user scrolls back up. */
     autoReverse?: boolean;
-    /** Delay in milliseconds before the engine starts observing (useful for page-load sequences). */
+    /** 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];
@@ -27,6 +27,18 @@ interface ScrollDrawOptions {
     strokeWidth?: number | [number, number];
     /** 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 structures. */
+    morphTo?: string;
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
@@ -35,6 +47,14 @@ 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;
 }
 
 /**

package/dist/solid/index.mjs

@@ -1,3 +1,3 @@
-import {onMount,onCleanup}from'solid-js';var X={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)};function _(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[r="top",o="bottom"]=t.split(/\s+/).filter(Boolean);return {element:r,viewport:o}}function re(e,t,r,o){switch(o){case "top":return e+r;case "center":return e+r+t/2;case "bottom":return e+r+t;default:return e+r}}function ne(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 j(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function be(e,t,r){return Math.min(r,Math.max(t,e))}function z(e,t,r,o){return r===t?0:be((e-t)/(r-t)*o,0,1)}function se(e,t,r,o,i){let f=re(e.top,e.height,t,o.element)-ne(o.viewport,r),d=re(e.top,e.height,t,i.element)-ne(i.viewport,r);return {tStart:f,tEnd:d}}function oe(e){let t=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(t)return [parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[3],16)];let r=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r)return [parseInt(r[1],16),parseInt(r[2],16),parseInt(r[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function ie(e,t,r){let o=oe(e),i=oe(t);return !o||!i?e:`rgb(${Math.round(o[0]+(i[0]-o[0])*r)},${Math.round(o[1]+(i[1]-o[1])*r)},${Math.round(o[2]+(i[2]-o[2])*r)})`}function le(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function he(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?le("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&le("Element has a fill \u2014 it may obscure the stroke animation.",e);}function we(e,t,r){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function i(){let f=r==="x"?window.scrollX:window.scrollY,d=e-f,A=t-f,T=r==="x";o.innerHTML=`
-      <div style="position:absolute;${T?`left:${d}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${d}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
-      <div style="position:absolute;${T?`left:${A}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${A}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",i,{passive:true}),i(),o}function J(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{}};let r=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:i=1,fade:f=false,easing:d="linear",trigger:A={},stagger:T=0,direction:b="forward",once:K=false,debug:ue=false,axis:p="y",scrollContainer:W,autoReverse:Q=false,delay:U=0,strokeColor:h,strokeWidth:w,waypoints:G,onProgress:fe,onStart:pe,onComplete:Y}=t,Z=typeof d=="function"?d:X[d]??X.linear,de=_(A.start??"top bottom"),me=_(A.end??"bottom top"),l=typeof W=="string"?document.querySelector(W):W??null,v=Array.isArray(h)?h[0]:null,x=Array.isArray(h)?h[1]:typeof h=="string"?h:null,m=Array.isArray(w)?w[0]:null,E=Array.isArray(w)?w[1]:typeof w=="number"?w:null,I=Array.from(e.querySelectorAll(o)),g=[],S=0,$=0,M=false,V=false,L=0,N=false,C=-1,F=-1,P=null,R=new Set;function H(){return l?p==="x"?l.scrollLeft:l.scrollTop:p==="x"?window.scrollX:window.scrollY}function ge(){return l?p==="x"?l.clientWidth:l.clientHeight:p==="x"?window.innerWidth:window.innerHeight}function ee(){let n=e.getBoundingClientRect(),s,D,y;if(l){let c=l.getBoundingClientRect();s=p==="x"?n.left-c.left+l.scrollLeft:n.top-c.top+l.scrollTop,D=p==="x"?n.width:n.height,y=H();}else s=p==="x"?n.left:n.top,D=p==="x"?n.width:n.height,y=H();let a=se({top:s,height:D},y,ge(),de,me);S=a.tStart,$=a.tEnd,ue&&process.env.NODE_ENV!=="production"&&(P?.remove(),P=we(S,$,p));}function ye(){I.forEach((n,s)=>{n.style.strokeDasharray=`${g[s]}`,n.style.strokeDashoffset=b==="reverse"?"0":`${g[s]}`,f?n.style.opacity=b==="reverse"?"1":"0":n.style.opacity="",v&&(n.style.stroke=v),m!==null&&(n.style.strokeWidth=`${m}`);});}if(I.forEach(n=>{he(n);let s=j(n);g.push(s),r?(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=b==="reverse"?`${s}`:"0",f&&(n.style.opacity="1"),x&&(n.style.stroke=x),E!==null&&(n.style.strokeWidth=`${E}`)):(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=b==="reverse"?"0":`${s}`,f?n.style.opacity=b==="reverse"?"1":"0":n.style.opacity="",v&&(n.style.stroke=v),m!==null&&(n.style.strokeWidth=`${m}`));}),r)return Y?.(),{destroy:()=>{},replay:()=>{}};ee();function te(){if(!N)return;let n=H(),s=Q?F===-1||n>=F?"forward":"reverse":b;F=n;let D=$-S,y=true;if(I.forEach((a,c)=>{let k=c*T*D,u=Z(z(n,S+k,$+k,i));K&&!Q&&(C=Math.max(C,u),u=C),a.style.strokeDashoffset=s==="reverse"?`${g[c]*u}`:`${g[c]*(1-u)}`,f&&(a.style.opacity=s==="reverse"?`${1-u}`:`${u}`),v&&x?a.style.stroke=ie(v,x,u):x&&(a.style.stroke=x),m!==null&&E!==null?a.style.strokeWidth=`${m+(E-m)*u}`:E!==null&&(a.style.strokeWidth=`${E}`),c===0&&fe?.(u),u<1&&(y=false);}),G){let a=Z(z(n,S,$,i));for(let c in G){let k=parseFloat(c);a>=k&&!R.has(k)&&(R.add(k),G[c]?.());}}!V&&z(n,S,$,i)>0&&(V=true,pe?.()),y&&!M?(M=true,Y?.()):!y&&!K&&(M=false),L=requestAnimationFrame(te);}let q=new IntersectionObserver(n=>{n.forEach(s=>{N=s.isIntersecting,N?L=requestAnimationFrame(te):cancelAnimationFrame(L);});},{root:l??null}),B;function O(){clearTimeout(B),B=setTimeout(()=>{I.forEach((n,s)=>{g[s]=j(n),n.style.strokeDasharray=`${g[s]}`;}),ee();},150);}return window.addEventListener("resize",O),window.addEventListener("orientationchange",O),U>0?setTimeout(()=>q.observe(e),U):q.observe(e),{destroy(){cancelAnimationFrame(L),q.disconnect(),window.removeEventListener("resize",O),window.removeEventListener("orientationchange",O),clearTimeout(B),P?.remove();},replay(){C=-1,F=-1,V=false,M=false,R.clear(),ye();}}}function ke(e={}){let t,r;return onMount(()=>{t&&(r=J(t,e));}),onCleanup(()=>{r?.destroy();}),o=>{t=o;}}function Ae(e={}){let t,r;return onMount(()=>{t&&(r=J(t,e));}),onCleanup(()=>{r?.destroy(),r=void 0;}),{ref:o=>{t=o;},getInstance:()=>r}}export{Ae as createScrollDraw,ke as useScrollDraw};
+import {onMount,onCleanup}from'solid-js';var re={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)};function ne(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function ye(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function he(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function oe(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function Ne(e,r,n){return Math.min(n,Math.max(r,e))}function B(e,r,n,o){return n===r?0:Ne((e-r)/(n-r)*o,0,1)}function we(e,r,n,o,a){let c=ye(e.top,e.height,r,o.element)-he(o.viewport,n),u=ye(e.top,e.height,r,a.element)-he(a.viewport,n);return {tStart:c,tEnd:u}}function be(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function se(e,r,n){let o=be(e),a=be(r);return !o||!a?e:`rgb(${Math.round(o[0]+(a[0]-o[0])*n)},${Math.round(o[1]+(a[1]-o[1])*n)},${Math.round(o[2]+(a[2]-o[2])*n)})`}function ve(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function Oe(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?ve("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&ve("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Pe(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function a(){let c=n==="x"?window.scrollX:window.scrollY,u=e-c,E=r-c,P=n==="x";o.innerHTML=`
+      <div style="position:absolute;${P?`left:${u}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${u}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${P?`left:${E}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${E}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(o),window.addEventListener("scroll",a,{passive:true}),a(),o}function xe(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,c=>{let u=parseFloat(c),E=o[a++]??u;return String(+(u+(E-u)*n).toFixed(4))})}function ie(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:a=1,fade:c=false,easing:u="linear",trigger:E={},stagger:P=0,direction:k="forward",once:ae=false,debug:$e=false,axis:b="y",scrollContainer:X,autoReverse:le=false,delay:ce=0,strokeColor:D,strokeWidth:M,waypoints:_,velocityScale:j=false,threshold:Ae=0,rootMargin:Se="0px",repeat:ue=0,repeatDelay:Te=0,morphTo:$,onProgress:De,onStart:Me,onComplete:fe}=r,pe=typeof u=="function"?u:re[u]??re.linear,Ie=ne(E.start??"top bottom"),Le=ne(E.end??"bottom top"),p=typeof X=="string"?document.querySelector(X):X??null,v=Array.isArray(D)?D[0]:null,g=Array.isArray(D)?D[1]:typeof D=="string"?D:null,y=Array.isArray(M)?M[0]:null,h=Array.isArray(M)?M[1]:typeof M=="number"?M:null,N=Array.from(e.querySelectorAll(o)),w=[],x=[],I=0,L=0,O=false,W=false,A=0,R=false,C=-1,V=-1,S=false,J=0,K=0,Q,U=null,z=new Set,G=-1,me=performance.now();function Y(){return p?b==="x"?p.scrollLeft:p.scrollTop:b==="x"?window.scrollX:window.scrollY}function Ce(){return p?b==="x"?p.clientWidth:p.clientHeight:b==="x"?window.innerWidth:window.innerHeight}function de(){let t=e.getBoundingClientRect(),s,i,m;if(p){let F=p.getBoundingClientRect();s=b==="x"?t.left-F.left+p.scrollLeft:t.top-F.top+p.scrollTop,i=b==="x"?t.width:t.height,m=Y();}else s=b==="x"?t.left:t.top,i=b==="x"?t.width:t.height,m=Y();let H=we({top:s,height:i},m,Ce(),Ie,Le);I=H.tStart,L=H.tEnd,$e&&process.env.NODE_ENV!=="production"&&(U?.remove(),U=Pe(I,L,b));}function Fe(t,s){N.forEach((i,m)=>{i.style.strokeDashoffset=s==="reverse"?`${w[m]*t}`:`${w[m]*(1-t)}`,c&&(i.style.opacity=s==="reverse"?`${1-t}`:`${t}`),v&&g?i.style.stroke=se(v,g,t):g&&(i.style.stroke=g),y!==null&&h!==null?i.style.strokeWidth=`${y+(h-y)*t}`:h!==null&&(i.style.strokeWidth=`${h}`),$&&i.tagName.toLowerCase()==="path"&&x[m]&&i.setAttribute("d",xe(x[m],$,t));});}function ge(){N.forEach((t,s)=>{t.style.strokeDasharray=`${w[s]}`,t.style.strokeDashoffset=k==="reverse"?"0":`${w[s]}`,c?t.style.opacity=k==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),y!==null&&(t.style.strokeWidth=`${y}`),$&&t.tagName.toLowerCase()==="path"&&x[s]&&t.setAttribute("d",x[s]);});}if(N.forEach(t=>{Oe(t);let s=oe(t);w.push(s),t.tagName.toLowerCase()==="path"?x.push(t.getAttribute("d")??""):x.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=k==="reverse"?`${s}`:"0",c&&(t.style.opacity="1"),g&&(t.style.stroke=g),h!==null&&(t.style.strokeWidth=`${h}`),$&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",$)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=k==="reverse"?"0":`${s}`,c?t.style.opacity=k==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),y!==null&&(t.style.strokeWidth=`${y}`));}),n)return fe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};de();function Z(){if(!R||S)return;let t=performance.now(),s=Y(),i=a;if(j!==false){let l=t-me,d=l>0?Math.abs(s-(G<0?s:G))/l:0;i=a*Math.max(.2,1+d*(typeof j=="number"?j:1)*.04);}G=s,me=t;let m=le?V===-1||s>=V?"forward":"reverse":k;V=s;let H=L-I,F=true;if(N.forEach((l,d)=>{let T=d*P*H,f=pe(B(s,I+T,L+T,i));ae&&!le&&(C=Math.max(C,f),f=C),J=f,l.style.strokeDashoffset=m==="reverse"?`${w[d]*f}`:`${w[d]*(1-f)}`,c&&(l.style.opacity=m==="reverse"?`${1-f}`:`${f}`),v&&g?l.style.stroke=se(v,g,f):g&&(l.style.stroke=g),y!==null&&h!==null?l.style.strokeWidth=`${y+(h-y)*f}`:h!==null&&(l.style.strokeWidth=`${h}`),$&&l.tagName.toLowerCase()==="path"&&x[d]&&l.setAttribute("d",xe(x[d],$,f)),d===0&&De?.(f),f<1&&(F=false);}),_){let l=pe(B(s,I,L,i));for(let d in _){let T=parseFloat(d);l>=T&&!z.has(T)&&(z.add(T),_[d]?.());}}!W&&B(s,I,L,i)>0&&(W=true,Me?.()),F&&!O?(O=true,fe?.(),K<(ue==="infinite"?1/0:ue??0)&&(K++,Q=setTimeout(()=>{C=-1,W=false,O=false,z.clear(),ge();},Te))):!F&&!ae&&(O=false),A=requestAnimationFrame(Z);}let ee=new IntersectionObserver(t=>{t.forEach(s=>{R=s.isIntersecting,R&&!S?A=requestAnimationFrame(Z):cancelAnimationFrame(A);});},{root:p??null,threshold:Ae,rootMargin:Se}),te;function q(){clearTimeout(te),te=setTimeout(()=>{N.forEach((t,s)=>{w[s]=oe(t),t.style.strokeDasharray=`${w[s]}`;}),de();},150);}return window.addEventListener("resize",q),window.addEventListener("orientationchange",q),ce>0?setTimeout(()=>ee.observe(e),ce):ee.observe(e),{destroy(){cancelAnimationFrame(A),clearTimeout(Q),ee.disconnect(),window.removeEventListener("resize",q),window.removeEventListener("orientationchange",q),clearTimeout(te),U?.remove();},replay(){C=-1,V=-1,G=-1,W=false,O=false,K=0,S=false,z.clear(),clearTimeout(Q),ge();},pause(){S=true,cancelAnimationFrame(A);},resume(){S&&(S=false,R&&(A=requestAnimationFrame(Z)));},seek(t){let s=Math.min(1,Math.max(0,t));J=s,C=s,S=true,cancelAnimationFrame(A),Fe(s,k);},getProgress(){return J}}}function qe(e={}){let r,n;return onMount(()=>{r&&(n=ie(r,e));}),onCleanup(()=>{n?.destroy();}),o=>{r=o;}}function He(e={}){let r,n;return onMount(()=>{r&&(n=ie(r,e));}),onCleanup(()=>{n?.destroy(),n=void 0;}),{ref:o=>{r=o;},getInstance:()=>n}}export{He as createScrollDraw,qe as useScrollDraw};