svg-scroll-draw 0.6.0 → 0.7.0

package/dist/svelte/index.cjs

@@ -1,3 +1,3 @@
-'use strict';var ne={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 oe(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 se(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 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 ie(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 Fe(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 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 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 X(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:Ee=false,axis:b="y",scrollContainer:_,autoReverse:le=false,delay:ce=0,strokeColor:D,strokeWidth:I,waypoints:j,velocityScale:J=false,threshold:ke=0,rootMargin:$e="0px",repeat:ue=0,repeatDelay:Ae=0,morphTo:$,onProgress:Se,onStart:Te,onComplete:fe}=r,pe=typeof u=="function"?u:ne[u]??ne.linear,De=oe(E.start??"top bottom"),Ie=oe(E.end??"bottom top"),p=typeof _=="string"?document.querySelector(_):_??null,v=Array.isArray(D)?D[0]:null,g=Array.isArray(D)?D[1]:typeof D=="string"?D:null,y=Array.isArray(I)?I[0]:null,h=Array.isArray(I)?I[1]:typeof I=="number"?I:null,N=Array.from(e.querySelectorAll(o)),w=[],x=[],L=0,M=0,O=false,W=false,A=0,R=false,C=-1,V=-1,S=false,K=0,Q=0,U,Y=null,z=new Set,G=-1,me=performance.now();function Z(){return p?b==="x"?p.scrollLeft:p.scrollTop:b==="x"?window.scrollX:window.scrollY}function Le(){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=Z();}else s=b==="x"?t.left:t.top,i=b==="x"?t.width:t.height,m=Z();let B=we({top:s,height:i},m,Le(),De,Ie);L=B.tStart,M=B.tEnd,Ee&&process.env.NODE_ENV!=="production"&&(Y?.remove(),Y=Ne(L,M,b));}function Me(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=ie(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=>{Fe(t);let s=se(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 ee(){if(!R||S)return;let t=performance.now(),s=Z(),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 B=M-L,F=true;if(N.forEach((l,d)=>{let T=d*P*B,f=pe(H(s,L+T,M+T,i));ae&&!le&&(C=Math.max(C,f),f=C),K=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=ie(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&&Se?.(f),f<1&&(F=false);}),j){let l=pe(H(s,L,M,i));for(let d in j){let T=parseFloat(d);l>=T&&!z.has(T)&&(z.add(T),j[d]?.());}}!W&&H(s,L,M,i)>0&&(W=true,Te?.()),F&&!O?(O=true,fe?.(),Q<(ue==="infinite"?1/0:ue??0)&&(Q++,U=setTimeout(()=>{C=-1,W=false,O=false,z.clear(),ge();},Ae))):!F&&!ae&&(O=false),A=requestAnimationFrame(ee);}let te=new IntersectionObserver(t=>{t.forEach(s=>{R=s.isIntersecting,R&&!S?A=requestAnimationFrame(ee):cancelAnimationFrame(A);});},{root:p??null,threshold:ke,rootMargin:$e}),re;function q(){clearTimeout(re),re=setTimeout(()=>{N.forEach((t,s)=>{w[s]=se(t),t.style.strokeDasharray=`${w[s]}`;}),de();},150);}return window.addEventListener("resize",q),window.addEventListener("orientationchange",q),ce>0?setTimeout(()=>te.observe(e),ce):te.observe(e),{destroy(){cancelAnimationFrame(A),clearTimeout(U),te.disconnect(),window.removeEventListener("resize",q),window.removeEventListener("orientationchange",q),clearTimeout(re),Y?.remove();},replay(){C=-1,V=-1,G=-1,W=false,O=false,Q=0,S=false,z.clear(),clearTimeout(U),ge();},pause(){S=true,cancelAnimationFrame(A);},resume(){S&&(S=false,R&&(A=requestAnimationFrame(ee)));},seek(t){let s=Math.min(1,Math.max(0,t));K=s,C=s,S=true,cancelAnimationFrame(A),Me(s,k);},getProgress(){return K}}}function Ve(e,r={}){let n=X(e,r);return {update(o){n.destroy(),n=X(e,o);},destroy(){n.destroy();}}}function ze(e={}){let r=null;function n(o){return r=X(o,e),{destroy(){r?.destroy(),r=null;}}}return {action:n,getInstance:()=>r}}exports.createScrollDraw=ze;exports.scrollDraw=Ve;
+'use strict';var de={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 ye(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 Ae(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 Se(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 ge(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 Re(e,r,n){return Math.min(n,Math.max(r,e))}function z(e,r,n,o){return n===r?0:Re((e-r)/(n-r)*o,0,1)}function Me(e,r,n,o,a){let f=Ae(e.top,e.height,r,o.element)-Se(o.viewport,n),p=Ae(e.top,e.height,r,a.element)-Se(a.viewport,n);return {tStart:f,tEnd:p}}function ke(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 he(e,r,n){let o=ke(e),a=ke(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 De(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function We(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?De("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&De("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ve(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 f=n==="x"?window.scrollX:window.scrollY,p=e-f,L=r-f,B=n==="x";o.innerHTML=`
+      <div style="position:absolute;${B?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}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;${B?`left:${L}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${L}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 Le(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let p=parseFloat(f),L=o[a++]??p;return String(+(p+(L-p)*n).toFixed(4))})}function ne(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:f=false,easing:p="linear",trigger:L={},stagger:B=0,direction:I="forward",once:X=false,debug:Ie=false,axis:x="y",scrollContainer:se,autoReverse:oe=false,delay:be=0,strokeColor:C,strokeWidth:N,fillOpacity:H,waypoints:ie,velocityScale:le=false,threshold:Pe=0,rootMargin:Oe="0px",repeat:_=0,repeatDelay:we=0,morphTo:P,clip:ae,onProgress:ve,onStart:xe,onComplete:j}=r,R=ae===true?"left":typeof ae=="string"?ae:false,ce=typeof p=="function"?p:de[p]??de.linear,Fe=ye(L.start??"top bottom"),Ce=ye(L.end??"bottom top"),d=typeof se=="string"?document.querySelector(se):se??null,T=Array.isArray(C)?C[0]:null,y=Array.isArray(C)?C[1]:typeof C=="string"?C:null,g=Array.isArray(N)?N[0]:null,h=Array.isArray(N)?N[1]:typeof N=="number"?N:null,b=Array.isArray(H)?H[0]:null,w=Array.isArray(H)?H[1]:typeof H=="number"?H:null;function W(t){let s=t*100;switch(R){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let G=R?[]:Array.from(e.querySelectorAll(o)),E=[],A=[],S=0,k=0,$=false,O=false,M=0,J=false,v=-1,K=-1,F=false,Q=0,q=0,U,ue=null,Y=new Set,Z=-1,Ee=performance.now();function fe(){return d?x==="x"?d.scrollLeft:d.scrollTop:x==="x"?window.scrollX:window.scrollY}function Ne(){return d?x==="x"?d.clientWidth:d.clientHeight:x==="x"?window.innerWidth:window.innerHeight}function $e(){let t=e.getBoundingClientRect(),s,l,m;if(d){let V=d.getBoundingClientRect();s=x==="x"?t.left-V.left+d.scrollLeft:t.top-V.top+d.scrollTop,l=x==="x"?t.width:t.height,m=fe();}else s=x==="x"?t.left:t.top,l=x==="x"?t.width:t.height,m=fe();let re=Me({top:s,height:l},m,Ne(),Fe,Ce);S=re.tStart,k=re.tEnd,Ie&&process.env.NODE_ENV!=="production"&&(ue?.remove(),ue=Ve(S,k,x));}function He(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),R){let l=s==="reverse"?1-t:t;e.style.clipPath=W(l);return}G.forEach((l,m)=>{l.style.strokeDashoffset=s==="reverse"?`${E[m]*t}`:`${E[m]*(1-t)}`,f&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),T&&y?l.style.stroke=he(T,y,t):y&&(l.style.stroke=y),g!==null&&h!==null?l.style.strokeWidth=`${g+(h-g)*t}`:h!==null&&(l.style.strokeWidth=`${h}`),b!==null&&w!==null?l.style.fillOpacity=`${b+(w-b)*t}`:w!==null&&(l.style.fillOpacity=`${w}`),P&&l.tagName.toLowerCase()==="path"&&A[m]&&l.setAttribute("d",Le(A[m],P,t));});}function Te(){if(e.style.setProperty("--scroll-draw-progress","0"),R){e.style.clipPath=W(0);return}G.forEach((t,s)=>{t.style.strokeDasharray=`${E[s]}`,t.style.strokeDashoffset=I==="reverse"?"0":`${E[s]}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",T&&(t.style.stroke=T),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`),P&&t.tagName.toLowerCase()==="path"&&A[s]&&t.setAttribute("d",A[s]);});}if(G.forEach(t=>{We(t);let s=ge(t);E.push(s),t.tagName.toLowerCase()==="path"?A.push(t.getAttribute("d")??""):A.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=I==="reverse"?`${s}`:"0",f&&(t.style.opacity="1"),y&&(t.style.stroke=y),h!==null&&(t.style.strokeWidth=`${h}`),w!==null&&(t.style.fillOpacity=`${w}`),P&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",P)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=I==="reverse"?"0":`${s}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",T&&(t.style.stroke=T),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`));}),R){if(n)return e.style.clipPath=W(1),j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=W(0);}else if(n)return j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};$e();function ee(){if(!J||F)return;let t=performance.now(),s=fe(),l=a;if(le!==false){let i=t-Ee,u=i>0?Math.abs(s-(Z<0?s:Z))/i:0;l=a*Math.max(.2,1+u*(typeof le=="number"?le:1)*.04);}Z=s,Ee=t;let m=oe?K===-1||s>=K?"forward":"reverse":I;K=s;let re=k-S,V=true;if(R){let i=ce(z(s,S,k,l));X&&!oe&&(v=Math.max(v,i),i=v),Q=i,e.style.setProperty("--scroll-draw-progress",String(i));let u=m==="reverse"?1-i:i;e.style.clipPath=W(u),ve?.(i),!O&&z(s,S,k,l)>0&&(O=true,xe?.()),i>=1&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,O=false,$=false,e.style.clipPath=W(0);},we))):i<1&&!X&&($=false),M=requestAnimationFrame(ee);return}if(G.forEach((i,u)=>{let D=u*B*re,c=ce(z(s,S+D,k+D,l));X&&!oe&&(v=Math.max(v,c),c=v),Q=c,i.style.strokeDashoffset=m==="reverse"?`${E[u]*c}`:`${E[u]*(1-c)}`,f&&(i.style.opacity=m==="reverse"?`${1-c}`:`${c}`),T&&y?i.style.stroke=he(T,y,c):y&&(i.style.stroke=y),g!==null&&h!==null?i.style.strokeWidth=`${g+(h-g)*c}`:h!==null&&(i.style.strokeWidth=`${h}`),b!==null&&w!==null?i.style.fillOpacity=`${b+(w-b)*c}`:w!==null&&(i.style.fillOpacity=`${w}`),P&&i.tagName.toLowerCase()==="path"&&A[u]&&i.setAttribute("d",Le(A[u],P,c)),u===0&&(ve?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(V=false);}),ie){let i=ce(z(s,S,k,l));for(let u in ie){let D=parseFloat(u);i>=D&&!Y.has(D)&&(Y.add(D),ie[u]?.());}}!O&&z(s,S,k,l)>0&&(O=true,xe?.()),V&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,O=false,$=false,Y.clear(),Te();},we))):!V&&!X&&($=false),M=requestAnimationFrame(ee);}let pe=new IntersectionObserver(t=>{t.forEach(s=>{J=s.isIntersecting,J&&!F?M=requestAnimationFrame(ee):cancelAnimationFrame(M);});},{root:d??null,threshold:Pe,rootMargin:Oe}),me;function te(){clearTimeout(me),me=setTimeout(()=>{G.forEach((t,s)=>{E[s]=ge(t),t.style.strokeDasharray=`${E[s]}`;}),$e();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),be>0?setTimeout(()=>pe.observe(e),be):pe.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(U),pe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(me),ue?.remove();},replay(){v=-1,K=-1,Z=-1,O=false,$=false,q=0,F=false,Y.clear(),clearTimeout(U),Te();},pause(){F=true,cancelAnimationFrame(M);},resume(){F&&(F=false,J&&(M=requestAnimationFrame(ee)));},seek(t){let s=Math.min(1,Math.max(0,t));Q=s,v=s,F=true,cancelAnimationFrame(M),He(s,I);},getProgress(){return Q}}}function Xe(e,r={}){let n=ne(e,r);return {update(o){n.destroy(),n=ne(e,o);},destroy(){n.destroy();}}}function _e(e={}){let r=null;function n(o){return r=ne(o,e),{destroy(){r?.destroy(),r=null;}}}return {action:n,getInstance:()=>r}}exports.createScrollDraw=_e;exports.scrollDraw=Xe;

package/dist/svelte/index.d.mts

@@ -25,6 +25,14 @@ interface ScrollDrawOptions {
     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.
+     * `true` defaults to `'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). */

package/dist/svelte/index.d.ts

@@ -25,6 +25,14 @@ interface ScrollDrawOptions {
     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.
+     * `true` defaults to `'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). */

package/dist/svelte/index.mjs

@@ -1,3 +1,3 @@
-var ne={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 oe(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 se(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 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 ie(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 Fe(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 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 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 X(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:Ee=false,axis:b="y",scrollContainer:_,autoReverse:le=false,delay:ce=0,strokeColor:D,strokeWidth:I,waypoints:j,velocityScale:J=false,threshold:ke=0,rootMargin:$e="0px",repeat:ue=0,repeatDelay:Ae=0,morphTo:$,onProgress:Se,onStart:Te,onComplete:fe}=r,pe=typeof u=="function"?u:ne[u]??ne.linear,De=oe(E.start??"top bottom"),Ie=oe(E.end??"bottom top"),p=typeof _=="string"?document.querySelector(_):_??null,v=Array.isArray(D)?D[0]:null,g=Array.isArray(D)?D[1]:typeof D=="string"?D:null,y=Array.isArray(I)?I[0]:null,h=Array.isArray(I)?I[1]:typeof I=="number"?I:null,N=Array.from(e.querySelectorAll(o)),w=[],x=[],L=0,M=0,O=false,W=false,A=0,R=false,C=-1,V=-1,S=false,K=0,Q=0,U,Y=null,z=new Set,G=-1,me=performance.now();function Z(){return p?b==="x"?p.scrollLeft:p.scrollTop:b==="x"?window.scrollX:window.scrollY}function Le(){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=Z();}else s=b==="x"?t.left:t.top,i=b==="x"?t.width:t.height,m=Z();let B=we({top:s,height:i},m,Le(),De,Ie);L=B.tStart,M=B.tEnd,Ee&&process.env.NODE_ENV!=="production"&&(Y?.remove(),Y=Ne(L,M,b));}function Me(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=ie(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=>{Fe(t);let s=se(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 ee(){if(!R||S)return;let t=performance.now(),s=Z(),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 B=M-L,F=true;if(N.forEach((l,d)=>{let T=d*P*B,f=pe(H(s,L+T,M+T,i));ae&&!le&&(C=Math.max(C,f),f=C),K=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=ie(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&&Se?.(f),f<1&&(F=false);}),j){let l=pe(H(s,L,M,i));for(let d in j){let T=parseFloat(d);l>=T&&!z.has(T)&&(z.add(T),j[d]?.());}}!W&&H(s,L,M,i)>0&&(W=true,Te?.()),F&&!O?(O=true,fe?.(),Q<(ue==="infinite"?1/0:ue??0)&&(Q++,U=setTimeout(()=>{C=-1,W=false,O=false,z.clear(),ge();},Ae))):!F&&!ae&&(O=false),A=requestAnimationFrame(ee);}let te=new IntersectionObserver(t=>{t.forEach(s=>{R=s.isIntersecting,R&&!S?A=requestAnimationFrame(ee):cancelAnimationFrame(A);});},{root:p??null,threshold:ke,rootMargin:$e}),re;function q(){clearTimeout(re),re=setTimeout(()=>{N.forEach((t,s)=>{w[s]=se(t),t.style.strokeDasharray=`${w[s]}`;}),de();},150);}return window.addEventListener("resize",q),window.addEventListener("orientationchange",q),ce>0?setTimeout(()=>te.observe(e),ce):te.observe(e),{destroy(){cancelAnimationFrame(A),clearTimeout(U),te.disconnect(),window.removeEventListener("resize",q),window.removeEventListener("orientationchange",q),clearTimeout(re),Y?.remove();},replay(){C=-1,V=-1,G=-1,W=false,O=false,Q=0,S=false,z.clear(),clearTimeout(U),ge();},pause(){S=true,cancelAnimationFrame(A);},resume(){S&&(S=false,R&&(A=requestAnimationFrame(ee)));},seek(t){let s=Math.min(1,Math.max(0,t));K=s,C=s,S=true,cancelAnimationFrame(A),Me(s,k);},getProgress(){return K}}}function Ve(e,r={}){let n=X(e,r);return {update(o){n.destroy(),n=X(e,o);},destroy(){n.destroy();}}}function ze(e={}){let r=null;function n(o){return r=X(o,e),{destroy(){r?.destroy(),r=null;}}}return {action:n,getInstance:()=>r}}export{ze as createScrollDraw,Ve as scrollDraw};
+var de={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 ye(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 Ae(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 Se(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 ge(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 Re(e,r,n){return Math.min(n,Math.max(r,e))}function z(e,r,n,o){return n===r?0:Re((e-r)/(n-r)*o,0,1)}function Me(e,r,n,o,a){let f=Ae(e.top,e.height,r,o.element)-Se(o.viewport,n),p=Ae(e.top,e.height,r,a.element)-Se(a.viewport,n);return {tStart:f,tEnd:p}}function ke(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 he(e,r,n){let o=ke(e),a=ke(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 De(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function We(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?De("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&De("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ve(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 f=n==="x"?window.scrollX:window.scrollY,p=e-f,L=r-f,B=n==="x";o.innerHTML=`
+      <div style="position:absolute;${B?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}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;${B?`left:${L}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${L}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 Le(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let p=parseFloat(f),L=o[a++]??p;return String(+(p+(L-p)*n).toFixed(4))})}function ne(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:f=false,easing:p="linear",trigger:L={},stagger:B=0,direction:I="forward",once:X=false,debug:Ie=false,axis:x="y",scrollContainer:se,autoReverse:oe=false,delay:be=0,strokeColor:C,strokeWidth:N,fillOpacity:H,waypoints:ie,velocityScale:le=false,threshold:Pe=0,rootMargin:Oe="0px",repeat:_=0,repeatDelay:we=0,morphTo:P,clip:ae,onProgress:ve,onStart:xe,onComplete:j}=r,R=ae===true?"left":typeof ae=="string"?ae:false,ce=typeof p=="function"?p:de[p]??de.linear,Fe=ye(L.start??"top bottom"),Ce=ye(L.end??"bottom top"),d=typeof se=="string"?document.querySelector(se):se??null,T=Array.isArray(C)?C[0]:null,y=Array.isArray(C)?C[1]:typeof C=="string"?C:null,g=Array.isArray(N)?N[0]:null,h=Array.isArray(N)?N[1]:typeof N=="number"?N:null,b=Array.isArray(H)?H[0]:null,w=Array.isArray(H)?H[1]:typeof H=="number"?H:null;function W(t){let s=t*100;switch(R){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let G=R?[]:Array.from(e.querySelectorAll(o)),E=[],A=[],S=0,k=0,$=false,O=false,M=0,J=false,v=-1,K=-1,F=false,Q=0,q=0,U,ue=null,Y=new Set,Z=-1,Ee=performance.now();function fe(){return d?x==="x"?d.scrollLeft:d.scrollTop:x==="x"?window.scrollX:window.scrollY}function Ne(){return d?x==="x"?d.clientWidth:d.clientHeight:x==="x"?window.innerWidth:window.innerHeight}function $e(){let t=e.getBoundingClientRect(),s,l,m;if(d){let V=d.getBoundingClientRect();s=x==="x"?t.left-V.left+d.scrollLeft:t.top-V.top+d.scrollTop,l=x==="x"?t.width:t.height,m=fe();}else s=x==="x"?t.left:t.top,l=x==="x"?t.width:t.height,m=fe();let re=Me({top:s,height:l},m,Ne(),Fe,Ce);S=re.tStart,k=re.tEnd,Ie&&process.env.NODE_ENV!=="production"&&(ue?.remove(),ue=Ve(S,k,x));}function He(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),R){let l=s==="reverse"?1-t:t;e.style.clipPath=W(l);return}G.forEach((l,m)=>{l.style.strokeDashoffset=s==="reverse"?`${E[m]*t}`:`${E[m]*(1-t)}`,f&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),T&&y?l.style.stroke=he(T,y,t):y&&(l.style.stroke=y),g!==null&&h!==null?l.style.strokeWidth=`${g+(h-g)*t}`:h!==null&&(l.style.strokeWidth=`${h}`),b!==null&&w!==null?l.style.fillOpacity=`${b+(w-b)*t}`:w!==null&&(l.style.fillOpacity=`${w}`),P&&l.tagName.toLowerCase()==="path"&&A[m]&&l.setAttribute("d",Le(A[m],P,t));});}function Te(){if(e.style.setProperty("--scroll-draw-progress","0"),R){e.style.clipPath=W(0);return}G.forEach((t,s)=>{t.style.strokeDasharray=`${E[s]}`,t.style.strokeDashoffset=I==="reverse"?"0":`${E[s]}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",T&&(t.style.stroke=T),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`),P&&t.tagName.toLowerCase()==="path"&&A[s]&&t.setAttribute("d",A[s]);});}if(G.forEach(t=>{We(t);let s=ge(t);E.push(s),t.tagName.toLowerCase()==="path"?A.push(t.getAttribute("d")??""):A.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=I==="reverse"?`${s}`:"0",f&&(t.style.opacity="1"),y&&(t.style.stroke=y),h!==null&&(t.style.strokeWidth=`${h}`),w!==null&&(t.style.fillOpacity=`${w}`),P&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",P)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=I==="reverse"?"0":`${s}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",T&&(t.style.stroke=T),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`));}),R){if(n)return e.style.clipPath=W(1),j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=W(0);}else if(n)return j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};$e();function ee(){if(!J||F)return;let t=performance.now(),s=fe(),l=a;if(le!==false){let i=t-Ee,u=i>0?Math.abs(s-(Z<0?s:Z))/i:0;l=a*Math.max(.2,1+u*(typeof le=="number"?le:1)*.04);}Z=s,Ee=t;let m=oe?K===-1||s>=K?"forward":"reverse":I;K=s;let re=k-S,V=true;if(R){let i=ce(z(s,S,k,l));X&&!oe&&(v=Math.max(v,i),i=v),Q=i,e.style.setProperty("--scroll-draw-progress",String(i));let u=m==="reverse"?1-i:i;e.style.clipPath=W(u),ve?.(i),!O&&z(s,S,k,l)>0&&(O=true,xe?.()),i>=1&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,O=false,$=false,e.style.clipPath=W(0);},we))):i<1&&!X&&($=false),M=requestAnimationFrame(ee);return}if(G.forEach((i,u)=>{let D=u*B*re,c=ce(z(s,S+D,k+D,l));X&&!oe&&(v=Math.max(v,c),c=v),Q=c,i.style.strokeDashoffset=m==="reverse"?`${E[u]*c}`:`${E[u]*(1-c)}`,f&&(i.style.opacity=m==="reverse"?`${1-c}`:`${c}`),T&&y?i.style.stroke=he(T,y,c):y&&(i.style.stroke=y),g!==null&&h!==null?i.style.strokeWidth=`${g+(h-g)*c}`:h!==null&&(i.style.strokeWidth=`${h}`),b!==null&&w!==null?i.style.fillOpacity=`${b+(w-b)*c}`:w!==null&&(i.style.fillOpacity=`${w}`),P&&i.tagName.toLowerCase()==="path"&&A[u]&&i.setAttribute("d",Le(A[u],P,c)),u===0&&(ve?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(V=false);}),ie){let i=ce(z(s,S,k,l));for(let u in ie){let D=parseFloat(u);i>=D&&!Y.has(D)&&(Y.add(D),ie[u]?.());}}!O&&z(s,S,k,l)>0&&(O=true,xe?.()),V&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,O=false,$=false,Y.clear(),Te();},we))):!V&&!X&&($=false),M=requestAnimationFrame(ee);}let pe=new IntersectionObserver(t=>{t.forEach(s=>{J=s.isIntersecting,J&&!F?M=requestAnimationFrame(ee):cancelAnimationFrame(M);});},{root:d??null,threshold:Pe,rootMargin:Oe}),me;function te(){clearTimeout(me),me=setTimeout(()=>{G.forEach((t,s)=>{E[s]=ge(t),t.style.strokeDasharray=`${E[s]}`;}),$e();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),be>0?setTimeout(()=>pe.observe(e),be):pe.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(U),pe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(me),ue?.remove();},replay(){v=-1,K=-1,Z=-1,O=false,$=false,q=0,F=false,Y.clear(),clearTimeout(U),Te();},pause(){F=true,cancelAnimationFrame(M);},resume(){F&&(F=false,J&&(M=requestAnimationFrame(ee)));},seek(t){let s=Math.min(1,Math.max(0,t));Q=s,v=s,F=true,cancelAnimationFrame(M),He(s,I);},getProgress(){return Q}}}function Xe(e,r={}){let n=ne(e,r);return {update(o){n.destroy(),n=ne(e,o);},destroy(){n.destroy();}}}function _e(e={}){let r=null;function n(o){return r=ne(o,e),{destroy(){r?.destroy(),r=null;}}}return {action:n,getInstance:()=>r}}export{_e as createScrollDraw,Xe as scrollDraw};

package/dist/timeline/index.cjs

@@ -0,0 +1 @@
+'use strict';var S={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 A(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",s="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:s}}function N(e,r,n,s){switch(s){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function q(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 M(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(n+s)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function U(e,r,n){return Math.min(n,Math.max(r,e))}function R(e,r,n,s){return n===r?0:U((e-r)/(n-r)*s,0,1)}function O(e,r,n,s,c){let g=N(e.top,e.height,r,s.element)-q(s.viewport,n),x=N(e.top,e.height,r,c.element)-q(c.viewport,n);return {tStart:g,tEnd:x}}function H(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let s=typeof e=="string"?document.querySelector(e):e;if(!s)return console.warn("[svg-scroll-draw/timeline] Container not found:",e),n;let c=s,{trigger:g={},speed:x=1,once:v=false,axis:d="y",tracks:V,onComplete:B}=r,W=A(g.start??"top bottom"),X=A(g.end??"bottom top"),E=V.map(t=>{let i=typeof t.easing=="function"?t.easing:S[t.easing??"linear"]??S.linear,a=Array.from(c.querySelectorAll(t.selector)),o=a.map(u=>M(u));return a.forEach((u,y)=>{u.style.strokeDasharray=`${o[y]}`,u.style.strokeDashoffset=`${o[y]}`,t.fade&&(u.style.opacity="0");}),{...t,elements:a,lengths:o,easeFn:i}}),$=0,D=0,b=false,m=false,l=0,h=false,p=-1,f=0;function F(){return d==="x"?window.scrollX:window.scrollY}function j(){return d==="x"?window.innerWidth:window.innerHeight}function L(){let t=c.getBoundingClientRect(),i=F(),a=d==="x"?t.left:t.top,o=d==="x"?t.width:t.height,u=O({top:a,height:o},i,j(),W,X);$=u.tStart,D=u.tEnd;}function P(t){c.style.setProperty("--scroll-draw-progress",String(t)),E.forEach(({elements:i,lengths:a,from:o,to:u,easeFn:y,fade:J})=>{let z=u-o,K=z>0?Math.min(1,Math.max(0,(t-o)/z)):0,C=y(K);i.forEach((G,Q)=>{G.style.strokeDashoffset=`${a[Q]*(1-C)}`,J&&(G.style.opacity=String(C));});});}function T(){if(!b||m)return;let t=R(F(),$,D,x);v&&(p=Math.max(p,t),t=p),f=t,P(t),t>=1&&!h?(h=true,B?.()):t<1&&!v&&(h=false),l=requestAnimationFrame(T);}L();let k=new IntersectionObserver(t=>{t.forEach(i=>{b=i.isIntersecting,b&&!m?l=requestAnimationFrame(T):cancelAnimationFrame(l);});},{threshold:0});k.observe(c);let I;function w(){clearTimeout(I),I=setTimeout(()=>{E.forEach(({elements:t,lengths:i})=>{t.forEach((a,o)=>{i[o]=M(a),a.style.strokeDasharray=`${i[o]}`;});}),L();},150);}return window.addEventListener("resize",w),window.addEventListener("orientationchange",w),{destroy(){cancelAnimationFrame(l),clearTimeout(I),k.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w);},replay(){p=-1,h=false,m=false,E.forEach(({elements:t,lengths:i,fade:a})=>{t.forEach((o,u)=>{o.style.strokeDashoffset=`${i[u]}`,a&&(o.style.opacity="0");});}),c.style.setProperty("--scroll-draw-progress","0");},pause(){m=true,cancelAnimationFrame(l);},resume(){m&&(m=false,b&&(l=requestAnimationFrame(T)));},seek(t){f=Math.min(1,Math.max(0,t)),p=f,m=true,cancelAnimationFrame(l),P(f);},getProgress(){return f}}}exports.scrollDrawTimeline=H;

package/dist/timeline/index.d.mts

@@ -0,0 +1,64 @@
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+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;
+}
+
+interface TimelineTrack {
+    /** CSS selector for paths within the container to animate on this track. */
+    selector: string;
+    /** Progress value (0–1) within the overall scroll range where this track starts. */
+    from: number;
+    /** Progress value (0–1) within the overall scroll range where this track ends. */
+    to: number;
+    /** Easing for this track. Defaults to 'linear'. */
+    easing?: EasingName | ((t: number) => number);
+    /** Fade opacity in sync with this track's draw progress. */
+    fade?: boolean;
+}
+interface ScrollDrawTimelineOptions {
+    /** Scroll trigger window. Same syntax as scrollDraw(). */
+    trigger?: {
+        start?: string;
+        end?: string;
+    };
+    /** Overall speed multiplier. Default 1. */
+    speed?: number;
+    /** Lock at max progress once reached. Default false. */
+    once?: boolean;
+    /** Scroll axis. Default 'y'. */
+    axis?: 'x' | 'y';
+    /** Per-path animation tracks — each with independent start/end within the scroll range. */
+    tracks: TimelineTrack[];
+    /** Fires when all tracks have reached their full draw progress. */
+    onComplete?: () => void;
+}
+/**
+ * Animate multiple path groups with independent start/end windows within a
+ * single scroll range. Unlike `stagger` (which offsets by time), each track
+ * defines its own `from`/`to` slice of the 0–1 progress range.
+ *
+ * @example
+ * import { scrollDrawTimeline } from 'svg-scroll-draw/timeline';
+ *
+ * scrollDrawTimeline('#diagram', {
+ *   trigger: { start: 'top 80%', end: 'bottom 20%' },
+ *   tracks: [
+ *     { selector: '.outline', from: 0,   to: 0.5, easing: 'ease-out' },
+ *     { selector: '.detail',  from: 0.3, to: 0.8, easing: 'ease-in'  },
+ *     { selector: '.label',   from: 0.7, to: 1.0, easing: 'spring'   },
+ *   ],
+ * });
+ */
+declare function scrollDrawTimeline(target: string | Element, options: ScrollDrawTimelineOptions): ScrollDrawInstance;
+
+export { type ScrollDrawTimelineOptions, type TimelineTrack, scrollDrawTimeline };

package/dist/timeline/index.d.ts

@@ -0,0 +1,64 @@
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+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;
+}
+
+interface TimelineTrack {
+    /** CSS selector for paths within the container to animate on this track. */
+    selector: string;
+    /** Progress value (0–1) within the overall scroll range where this track starts. */
+    from: number;
+    /** Progress value (0–1) within the overall scroll range where this track ends. */
+    to: number;
+    /** Easing for this track. Defaults to 'linear'. */
+    easing?: EasingName | ((t: number) => number);
+    /** Fade opacity in sync with this track's draw progress. */
+    fade?: boolean;
+}
+interface ScrollDrawTimelineOptions {
+    /** Scroll trigger window. Same syntax as scrollDraw(). */
+    trigger?: {
+        start?: string;
+        end?: string;
+    };
+    /** Overall speed multiplier. Default 1. */
+    speed?: number;
+    /** Lock at max progress once reached. Default false. */
+    once?: boolean;
+    /** Scroll axis. Default 'y'. */
+    axis?: 'x' | 'y';
+    /** Per-path animation tracks — each with independent start/end within the scroll range. */
+    tracks: TimelineTrack[];
+    /** Fires when all tracks have reached their full draw progress. */
+    onComplete?: () => void;
+}
+/**
+ * Animate multiple path groups with independent start/end windows within a
+ * single scroll range. Unlike `stagger` (which offsets by time), each track
+ * defines its own `from`/`to` slice of the 0–1 progress range.
+ *
+ * @example
+ * import { scrollDrawTimeline } from 'svg-scroll-draw/timeline';
+ *
+ * scrollDrawTimeline('#diagram', {
+ *   trigger: { start: 'top 80%', end: 'bottom 20%' },
+ *   tracks: [
+ *     { selector: '.outline', from: 0,   to: 0.5, easing: 'ease-out' },
+ *     { selector: '.detail',  from: 0.3, to: 0.8, easing: 'ease-in'  },
+ *     { selector: '.label',   from: 0.7, to: 1.0, easing: 'spring'   },
+ *   ],
+ * });
+ */
+declare function scrollDrawTimeline(target: string | Element, options: ScrollDrawTimelineOptions): ScrollDrawInstance;
+
+export { type ScrollDrawTimelineOptions, type TimelineTrack, scrollDrawTimeline };

package/dist/timeline/index.mjs

@@ -0,0 +1 @@
+var S={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 A(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",s="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:s}}function N(e,r,n,s){switch(s){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function q(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 M(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(n+s)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function U(e,r,n){return Math.min(n,Math.max(r,e))}function R(e,r,n,s){return n===r?0:U((e-r)/(n-r)*s,0,1)}function O(e,r,n,s,c){let g=N(e.top,e.height,r,s.element)-q(s.viewport,n),x=N(e.top,e.height,r,c.element)-q(c.viewport,n);return {tStart:g,tEnd:x}}function H(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let s=typeof e=="string"?document.querySelector(e):e;if(!s)return console.warn("[svg-scroll-draw/timeline] Container not found:",e),n;let c=s,{trigger:g={},speed:x=1,once:v=false,axis:d="y",tracks:V,onComplete:B}=r,W=A(g.start??"top bottom"),X=A(g.end??"bottom top"),E=V.map(t=>{let i=typeof t.easing=="function"?t.easing:S[t.easing??"linear"]??S.linear,a=Array.from(c.querySelectorAll(t.selector)),o=a.map(u=>M(u));return a.forEach((u,y)=>{u.style.strokeDasharray=`${o[y]}`,u.style.strokeDashoffset=`${o[y]}`,t.fade&&(u.style.opacity="0");}),{...t,elements:a,lengths:o,easeFn:i}}),$=0,D=0,b=false,m=false,l=0,h=false,p=-1,f=0;function F(){return d==="x"?window.scrollX:window.scrollY}function j(){return d==="x"?window.innerWidth:window.innerHeight}function L(){let t=c.getBoundingClientRect(),i=F(),a=d==="x"?t.left:t.top,o=d==="x"?t.width:t.height,u=O({top:a,height:o},i,j(),W,X);$=u.tStart,D=u.tEnd;}function P(t){c.style.setProperty("--scroll-draw-progress",String(t)),E.forEach(({elements:i,lengths:a,from:o,to:u,easeFn:y,fade:J})=>{let z=u-o,K=z>0?Math.min(1,Math.max(0,(t-o)/z)):0,C=y(K);i.forEach((G,Q)=>{G.style.strokeDashoffset=`${a[Q]*(1-C)}`,J&&(G.style.opacity=String(C));});});}function T(){if(!b||m)return;let t=R(F(),$,D,x);v&&(p=Math.max(p,t),t=p),f=t,P(t),t>=1&&!h?(h=true,B?.()):t<1&&!v&&(h=false),l=requestAnimationFrame(T);}L();let k=new IntersectionObserver(t=>{t.forEach(i=>{b=i.isIntersecting,b&&!m?l=requestAnimationFrame(T):cancelAnimationFrame(l);});},{threshold:0});k.observe(c);let I;function w(){clearTimeout(I),I=setTimeout(()=>{E.forEach(({elements:t,lengths:i})=>{t.forEach((a,o)=>{i[o]=M(a),a.style.strokeDasharray=`${i[o]}`;});}),L();},150);}return window.addEventListener("resize",w),window.addEventListener("orientationchange",w),{destroy(){cancelAnimationFrame(l),clearTimeout(I),k.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w);},replay(){p=-1,h=false,m=false,E.forEach(({elements:t,lengths:i,fade:a})=>{t.forEach((o,u)=>{o.style.strokeDashoffset=`${i[u]}`,a&&(o.style.opacity="0");});}),c.style.setProperty("--scroll-draw-progress","0");},pause(){m=true,cancelAnimationFrame(l);},resume(){m&&(m=false,b&&(l=requestAnimationFrame(T)));},seek(t){f=Math.min(1,Math.max(0,t)),p=f,m=true,cancelAnimationFrame(l),P(f);},getProgress(){return f}}}export{H as scrollDrawTimeline};

package/dist/vue/index.cjs

@@ -1,3 +1,3 @@
-'use strict';var vue=require('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 ye(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 be(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 we(e,r,o,n,i){let u=ye(e.top,e.height,r,n.element)-be(n.viewport,o),c=ye(e.top,e.height,r,i.element)-be(i.viewport,o);return {tStart:u,tEnd:c}}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 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=he(e),i=he(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 ve(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function Pe(e){let r=e.getAttribute("stroke"),o=e.getAttribute("fill");!r||r==="none"?ve("Element has no stroke \u2014 path will not be visible.",e):o&&o!=="none"&&o!=="transparent"&&ve("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Re(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 u=o==="x"?window.scrollX:window.scrollY,c=e-u,S=r-u,P=o==="x";n.innerHTML=`
-      <div style="position:absolute;${P?`left:${c}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${c}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:${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 xe(e,r,o){let n=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),i=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,u=>{let c=parseFloat(u),S=n[i++]??c;return String(+(c+(S-c)*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:u=false,easing:c="linear",trigger:S={},stagger:P=0,direction:E="forward",once:ae=false,debug:$e=false,axis:h="y",scrollContainer:X,autoReverse:le=false,delay:ue=0,strokeColor:T,strokeWidth:C,waypoints:_,velocityScale:j=false,threshold:Ae=0,rootMargin:De="0px",repeat:ce=0,repeatDelay:Te=0,morphTo:k,onProgress:Ce,onStart:Me,onComplete:fe}=r,me=typeof c=="function"?c:re[c]??re.linear,Fe=ne(S.start??"top bottom"),Le=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,N=false,R=false,$=0,W=false,L=-1,V=-1,A=false,U=0,J=0,K,Q=null,z=new Set,G=-1,de=performance.now();function Y(){return m?h==="x"?m.scrollLeft:m.scrollTop:h==="x"?window.scrollX:window.scrollY}function Ie(){return m?h==="x"?m.clientWidth:m.clientHeight:h==="x"?window.innerWidth:window.innerHeight}function pe(){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=we({top:s,height:a},d,Ie(),Fe,Le);M=q.tStart,F=q.tEnd,$e&&process.env.NODE_ENV!=="production"&&(Q?.remove(),Q=Re(M,F,h));}function Oe(t,s){O.forEach((a,d)=>{a.style.strokeDashoffset=s==="reverse"?`${w[d]*t}`:`${w[d]*(1-t)}`,u&&(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}`),k&&a.tagName.toLowerCase()==="path"&&x[d]&&a.setAttribute("d",xe(x[d],k,t));});}function ge(){O.forEach((t,s)=>{t.style.strokeDasharray=`${w[s]}`,t.style.strokeDashoffset=E==="reverse"?"0":`${w[s]}`,u?t.style.opacity=E==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),y!==null&&(t.style.strokeWidth=`${y}`),k&&t.tagName.toLowerCase()==="path"&&x[s]&&t.setAttribute("d",x[s]);});}if(O.forEach(t=>{Pe(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",u&&(t.style.opacity="1"),g&&(t.style.stroke=g),b!==null&&(t.style.strokeWidth=`${b}`),k&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",k)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=E==="reverse"?"0":`${s}`,u?t.style.opacity=E==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),y!==null&&(t.style.strokeWidth=`${y}`));}),o)return fe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};pe();function Z(){if(!W||A)return;let t=performance.now(),s=Y(),a=i;if(j!==false){let l=t-de,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,de=t;let d=le?V===-1||s>=V?"forward":"reverse":E;V=s;let q=F-M,I=true;if(O.forEach((l,p)=>{let D=p*P*q,f=me(H(s,M+D,F+D,a));ae&&!le&&(L=Math.max(L,f),f=L),U=f,l.style.strokeDashoffset=d==="reverse"?`${w[p]*f}`:`${w[p]*(1-f)}`,u&&(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}`),k&&l.tagName.toLowerCase()==="path"&&x[p]&&l.setAttribute("d",xe(x[p],k,f)),p===0&&Ce?.(f),f<1&&(I=false);}),_){let l=me(H(s,M,F,a));for(let p in _){let D=parseFloat(p);l>=D&&!z.has(D)&&(z.add(D),_[p]?.());}}!R&&H(s,M,F,a)>0&&(R=true,Me?.()),I&&!N?(N=true,fe?.(),J<(ce==="infinite"?1/0:ce??0)&&(J++,K=setTimeout(()=>{L=-1,R=false,N=false,z.clear(),ge();},Te))):!I&&!ae&&(N=false),$=requestAnimationFrame(Z);}let ee=new IntersectionObserver(t=>{t.forEach(s=>{W=s.isIntersecting,W&&!A?$=requestAnimationFrame(Z):cancelAnimationFrame($);});},{root:m??null,threshold:Ae,rootMargin:De}),te;function B(){clearTimeout(te),te=setTimeout(()=>{O.forEach((t,s)=>{w[s]=oe(t),t.style.strokeDasharray=`${w[s]}`;}),pe();},150);}return window.addEventListener("resize",B),window.addEventListener("orientationchange",B),ue>0?setTimeout(()=>ee.observe(e),ue):ee.observe(e),{destroy(){cancelAnimationFrame($),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,N=false,J=0,A=false,z.clear(),clearTimeout(K),ge();},pause(){A=true,cancelAnimationFrame($);},resume(){A&&(A=false,W&&($=requestAnimationFrame(Z)));},seek(t){let s=Math.min(1,Math.max(0,t));U=s,L=s,A=true,cancelAnimationFrame($),Oe(s,E);},getProgress(){return U}}}function Xe(e={}){let r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let o=ie(r.value,e);vue.onUnmounted(()=>o.destroy());}),r}var _e=vue.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=vue.ref(null);return vue.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);vue.onUnmounted(()=>i.destroy());}),()=>vue.h("div",{ref:o},r.default?.())}});exports.ScrollDraw=_e;exports.useScrollDraw=Xe;
+'use strict';var vue=require('vue');var pe={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 de(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 Te(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 Ae(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 ge(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 ze(e,r,o){return Math.min(o,Math.max(r,e))}function z(e,r,o,n){return o===r?0:ze((e-r)/(o-r)*n,0,1)}function Me(e,r,o,n,a){let f=Te(e.top,e.height,r,n.element)-Ae(n.viewport,o),m=Te(e.top,e.height,r,a.element)-Ae(a.viewport,o);return {tStart:f,tEnd:m}}function ke(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 ye(e,r,o){let n=ke(e),a=ke(r);return !n||!a?e:`rgb(${Math.round(n[0]+(a[0]-n[0])*o)},${Math.round(n[1]+(a[1]-n[1])*o)},${Math.round(n[2]+(a[2]-n[2])*o)})`}function De(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function Ge(e){let r=e.getAttribute("stroke"),o=e.getAttribute("fill");!r||r==="none"?De("Element has no stroke \u2014 path will not be visible.",e):o&&o!=="none"&&o!=="transparent"&&De("Element has a fill \u2014 it may obscure the stroke animation.",e);}function qe(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 a(){let f=o==="x"?window.scrollX:window.scrollY,m=e-f,L=r-f,B=o==="x";n.innerHTML=`
+      <div style="position:absolute;${B?`left:${m}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${m}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;${B?`left:${L}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${L}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",a,{passive:true}),a(),n}function Le(e,r,o){let n=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let m=parseFloat(f),L=n[a++]??m;return String(+(m+(L-m)*o).toFixed(4))})}function be(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:a=1,fade:f=false,easing:m="linear",trigger:L={},stagger:B=0,direction:P="forward",once:X=false,debug:Fe=false,axis:x="y",scrollContainer:ne,autoReverse:oe=false,delay:he=0,strokeColor:I,strokeWidth:N,fillOpacity:R,waypoints:se,velocityScale:ie=false,threshold:Ie=0,rootMargin:Ne="0px",repeat:_=0,repeatDelay:we=0,morphTo:O,clip:le,onProgress:ve,onStart:xe,onComplete:j}=r,H=le===true?"left":typeof le=="string"?le:false,ae=typeof m=="function"?m:pe[m]??pe.linear,Re=de(L.start??"top bottom"),He=de(L.end??"bottom top"),d=typeof ne=="string"?document.querySelector(ne):ne??null,$=Array.isArray(I)?I[0]:null,g=Array.isArray(I)?I[1]:typeof I=="string"?I:null,y=Array.isArray(N)?N[0]:null,b=Array.isArray(N)?N[1]:typeof N=="number"?N:null,h=Array.isArray(R)?R[0]:null,w=Array.isArray(R)?R[1]:typeof R=="number"?R:null;function W(t){let s=t*100;switch(H){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let G=H?[]:Array.from(e.querySelectorAll(n)),E=[],T=[],A=0,k=0,S=false,C=false,M=0,U=false,v=-1,J=-1,F=false,K=0,q=0,Q,ue=null,Y=new Set,Z=-1,Ee=performance.now();function ce(){return d?x==="x"?d.scrollLeft:d.scrollTop:x==="x"?window.scrollX:window.scrollY}function We(){return d?x==="x"?d.clientWidth:d.clientHeight:x==="x"?window.innerWidth:window.innerHeight}function Se(){let t=e.getBoundingClientRect(),s,l,p;if(d){let V=d.getBoundingClientRect();s=x==="x"?t.left-V.left+d.scrollLeft:t.top-V.top+d.scrollTop,l=x==="x"?t.width:t.height,p=ce();}else s=x==="x"?t.left:t.top,l=x==="x"?t.width:t.height,p=ce();let re=Me({top:s,height:l},p,We(),Re,He);A=re.tStart,k=re.tEnd,Fe&&process.env.NODE_ENV!=="production"&&(ue?.remove(),ue=qe(A,k,x));}function Ve(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),H){let l=s==="reverse"?1-t:t;e.style.clipPath=W(l);return}G.forEach((l,p)=>{l.style.strokeDashoffset=s==="reverse"?`${E[p]*t}`:`${E[p]*(1-t)}`,f&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),$&&g?l.style.stroke=ye($,g,t):g&&(l.style.stroke=g),y!==null&&b!==null?l.style.strokeWidth=`${y+(b-y)*t}`:b!==null&&(l.style.strokeWidth=`${b}`),h!==null&&w!==null?l.style.fillOpacity=`${h+(w-h)*t}`:w!==null&&(l.style.fillOpacity=`${w}`),O&&l.tagName.toLowerCase()==="path"&&T[p]&&l.setAttribute("d",Le(T[p],O,t));});}function $e(){if(e.style.setProperty("--scroll-draw-progress","0"),H){e.style.clipPath=W(0);return}G.forEach((t,s)=>{t.style.strokeDasharray=`${E[s]}`,t.style.strokeDashoffset=P==="reverse"?"0":`${E[s]}`,f?t.style.opacity=P==="reverse"?"1":"0":t.style.opacity="",$&&(t.style.stroke=$),y!==null&&(t.style.strokeWidth=`${y}`),h!==null&&(t.style.fillOpacity=`${h}`),O&&t.tagName.toLowerCase()==="path"&&T[s]&&t.setAttribute("d",T[s]);});}if(G.forEach(t=>{Ge(t);let s=ge(t);E.push(s),t.tagName.toLowerCase()==="path"?T.push(t.getAttribute("d")??""):T.push(""),o?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=P==="reverse"?`${s}`:"0",f&&(t.style.opacity="1"),g&&(t.style.stroke=g),b!==null&&(t.style.strokeWidth=`${b}`),w!==null&&(t.style.fillOpacity=`${w}`),O&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",O)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=P==="reverse"?"0":`${s}`,f?t.style.opacity=P==="reverse"?"1":"0":t.style.opacity="",$&&(t.style.stroke=$),y!==null&&(t.style.strokeWidth=`${y}`),h!==null&&(t.style.fillOpacity=`${h}`));}),H){if(o)return e.style.clipPath=W(1),j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=W(0);}else if(o)return j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};Se();function ee(){if(!U||F)return;let t=performance.now(),s=ce(),l=a;if(ie!==false){let i=t-Ee,c=i>0?Math.abs(s-(Z<0?s:Z))/i:0;l=a*Math.max(.2,1+c*(typeof ie=="number"?ie:1)*.04);}Z=s,Ee=t;let p=oe?J===-1||s>=J?"forward":"reverse":P;J=s;let re=k-A,V=true;if(H){let i=ae(z(s,A,k,l));X&&!oe&&(v=Math.max(v,i),i=v),K=i,e.style.setProperty("--scroll-draw-progress",String(i));let c=p==="reverse"?1-i:i;e.style.clipPath=W(c),ve?.(i),!C&&z(s,A,k,l)>0&&(C=true,xe?.()),i>=1&&!S?(S=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,Q=setTimeout(()=>{v=-1,C=false,S=false,e.style.clipPath=W(0);},we))):i<1&&!X&&(S=false),M=requestAnimationFrame(ee);return}if(G.forEach((i,c)=>{let D=c*B*re,u=ae(z(s,A+D,k+D,l));X&&!oe&&(v=Math.max(v,u),u=v),K=u,i.style.strokeDashoffset=p==="reverse"?`${E[c]*u}`:`${E[c]*(1-u)}`,f&&(i.style.opacity=p==="reverse"?`${1-u}`:`${u}`),$&&g?i.style.stroke=ye($,g,u):g&&(i.style.stroke=g),y!==null&&b!==null?i.style.strokeWidth=`${y+(b-y)*u}`:b!==null&&(i.style.strokeWidth=`${b}`),h!==null&&w!==null?i.style.fillOpacity=`${h+(w-h)*u}`:w!==null&&(i.style.fillOpacity=`${w}`),O&&i.tagName.toLowerCase()==="path"&&T[c]&&i.setAttribute("d",Le(T[c],O,u)),c===0&&(ve?.(u),e.style.setProperty("--scroll-draw-progress",String(u))),u<1&&(V=false);}),se){let i=ae(z(s,A,k,l));for(let c in se){let D=parseFloat(c);i>=D&&!Y.has(D)&&(Y.add(D),se[c]?.());}}!C&&z(s,A,k,l)>0&&(C=true,xe?.()),V&&!S?(S=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,Q=setTimeout(()=>{v=-1,C=false,S=false,Y.clear(),$e();},we))):!V&&!X&&(S=false),M=requestAnimationFrame(ee);}let fe=new IntersectionObserver(t=>{t.forEach(s=>{U=s.isIntersecting,U&&!F?M=requestAnimationFrame(ee):cancelAnimationFrame(M);});},{root:d??null,threshold:Ie,rootMargin:Ne}),me;function te(){clearTimeout(me),me=setTimeout(()=>{G.forEach((t,s)=>{E[s]=ge(t),t.style.strokeDasharray=`${E[s]}`;}),Se();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),he>0?setTimeout(()=>fe.observe(e),he):fe.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(Q),fe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(me),ue?.remove();},replay(){v=-1,J=-1,Z=-1,C=false,S=false,q=0,F=false,Y.clear(),clearTimeout(Q),$e();},pause(){F=true,cancelAnimationFrame(M);},resume(){F&&(F=false,U&&(M=requestAnimationFrame(ee)));},seek(t){let s=Math.min(1,Math.max(0,t));K=s,v=s,F=true,cancelAnimationFrame(M),Ve(s,P);},getProgress(){return K}}}function Qe(e={}){let r=vue.ref(null);return vue.onMounted(()=>{if(!r.value)return;let o=be(r.value,e);vue.onUnmounted(()=>o.destroy());}),r}var Ye=vue.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=vue.ref(null);return vue.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 a=be(o.value,n);vue.onUnmounted(()=>a.destroy());}),()=>vue.h("div",{ref:o},r.default?.())}});exports.ScrollDraw=Ye;exports.useScrollDraw=Qe;

package/dist/vue/index.d.mts

@@ -27,6 +27,14 @@ interface ScrollDrawOptions {
     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.
+     * `true` defaults to `'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). */

package/dist/vue/index.d.ts

@@ -27,6 +27,14 @@ interface ScrollDrawOptions {
     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.
+     * `true` defaults to `'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). */

package/dist/vue/index.mjs

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

package/dist/web-component/index.cjs

@@ -0,0 +1,3 @@
+'use strict';var me={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 de(e="top bottom"){let s=e.trim();if(/^\d+(\.\d+)?%$/.test(s))return {element:"top",viewport:s};let[r="top",o="bottom"]=s.split(/\s+/).filter(Boolean);return {element:r,viewport:o}}function Te(e,s,r,o){switch(o){case "top":return e+r;case "center":return e+r+s/2;case "bottom":return e+r+s;default:return e+r}}function ke(e,s){if(/^\d+(\.\d+)?%$/.test(e))return s*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return s/2;case "bottom":return s;default:return s}}function ye(e){let s=e.tagName.toLowerCase();if(s==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(s==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function We(e,s,r){return Math.min(r,Math.max(s,e))}function z(e,s,r,o){return r===s?0:We((e-s)/(r-s)*o,0,1)}function Me(e,s,r,o,a){let c=Te(e.top,e.height,s,o.element)-ke(o.viewport,r),u=Te(e.top,e.height,s,a.element)-ke(a.viewport,r);return {tStart:c,tEnd:u}}function Se(e){let s=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(s)return [parseInt(s[1]+s[1],16),parseInt(s[2]+s[2],16),parseInt(s[3]+s[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 ge(e,s,r){let o=Se(e),a=Se(s);return !o||!a?e:`rgb(${Math.round(o[0]+(a[0]-o[0])*r)},${Math.round(o[1]+(a[1]-o[1])*r)},${Math.round(o[2]+(a[2]-o[2])*r)})`}function Le(e,s){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,s);}function Ve(e){let s=e.getAttribute("stroke"),r=e.getAttribute("fill");!s||s==="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 ze(e,s,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 a(){let c=r==="x"?window.scrollX:window.scrollY,u=e-c,y=s-c,B=r==="x";o.innerHTML=`
+      <div style="position:absolute;${B?`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;${B?`left:${y}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${y}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 De(e,s,r){let o=(s.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,c=>{let u=parseFloat(c),y=o[a++]??u;return String(+(u+(y-u)*r).toFixed(4))})}function Pe(e,s={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let r=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:y={},stagger:B=0,direction:P="forward",once:X=false,debug:Ie=false,axis:E="y",scrollContainer:se,autoReverse:ne=false,delay:be=0,strokeColor:C,strokeWidth:N,fillOpacity:H,waypoints:oe,velocityScale:ie=false,threshold:Fe=0,rootMargin:Oe="0px",repeat:_=0,repeatDelay:we=0,morphTo:I,clip:le,onProgress:ve,onStart:xe,onComplete:j}=s,R=le===true?"left":typeof le=="string"?le:false,ae=typeof u=="function"?u:me[u]??me.linear,Ce=de(y.start??"top bottom"),Ne=de(y.end??"bottom top"),d=typeof se=="string"?document.querySelector(se):se??null,T=Array.isArray(C)?C[0]:null,g=Array.isArray(C)?C[1]:typeof C=="string"?C:null,h=Array.isArray(N)?N[0]:null,b=Array.isArray(N)?N[1]:typeof N=="number"?N:null,w=Array.isArray(H)?H[0]:null,v=Array.isArray(H)?H[1]:typeof H=="number"?H:null;function W(t){let n=t*100;switch(R){case "right":return `inset(0 0 0 ${100-n}%)`;case "top":return `inset(0 0 ${100-n}% 0)`;case "bottom":return `inset(${100-n}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-n}% 0 0)`}}let G=R?[]:Array.from(e.querySelectorAll(o)),$=[],k=[],S=0,M=0,A=false,F=false,L=0,J=false,x=-1,K=-1,O=false,Q=0,q=0,U,ce=null,Y=new Set,Z=-1,Ee=performance.now();function ue(){return d?E==="x"?d.scrollLeft:d.scrollTop:E==="x"?window.scrollX:window.scrollY}function He(){return d?E==="x"?d.clientWidth:d.clientHeight:E==="x"?window.innerWidth:window.innerHeight}function $e(){let t=e.getBoundingClientRect(),n,l,m;if(d){let V=d.getBoundingClientRect();n=E==="x"?t.left-V.left+d.scrollLeft:t.top-V.top+d.scrollTop,l=E==="x"?t.width:t.height,m=ue();}else n=E==="x"?t.left:t.top,l=E==="x"?t.width:t.height,m=ue();let re=Me({top:n,height:l},m,He(),Ce,Ne);S=re.tStart,M=re.tEnd,Ie&&process.env.NODE_ENV!=="production"&&(ce?.remove(),ce=ze(S,M,E));}function Re(t,n){if(e.style.setProperty("--scroll-draw-progress",String(t)),R){let l=n==="reverse"?1-t:t;e.style.clipPath=W(l);return}G.forEach((l,m)=>{l.style.strokeDashoffset=n==="reverse"?`${$[m]*t}`:`${$[m]*(1-t)}`,c&&(l.style.opacity=n==="reverse"?`${1-t}`:`${t}`),T&&g?l.style.stroke=ge(T,g,t):g&&(l.style.stroke=g),h!==null&&b!==null?l.style.strokeWidth=`${h+(b-h)*t}`:b!==null&&(l.style.strokeWidth=`${b}`),w!==null&&v!==null?l.style.fillOpacity=`${w+(v-w)*t}`:v!==null&&(l.style.fillOpacity=`${v}`),I&&l.tagName.toLowerCase()==="path"&&k[m]&&l.setAttribute("d",De(k[m],I,t));});}function Ae(){if(e.style.setProperty("--scroll-draw-progress","0"),R){e.style.clipPath=W(0);return}G.forEach((t,n)=>{t.style.strokeDasharray=`${$[n]}`,t.style.strokeDashoffset=P==="reverse"?"0":`${$[n]}`,c?t.style.opacity=P==="reverse"?"1":"0":t.style.opacity="",T&&(t.style.stroke=T),h!==null&&(t.style.strokeWidth=`${h}`),w!==null&&(t.style.fillOpacity=`${w}`),I&&t.tagName.toLowerCase()==="path"&&k[n]&&t.setAttribute("d",k[n]);});}if(G.forEach(t=>{Ve(t);let n=ye(t);$.push(n),t.tagName.toLowerCase()==="path"?k.push(t.getAttribute("d")??""):k.push(""),r?(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=P==="reverse"?`${n}`:"0",c&&(t.style.opacity="1"),g&&(t.style.stroke=g),b!==null&&(t.style.strokeWidth=`${b}`),v!==null&&(t.style.fillOpacity=`${v}`),I&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",I)):(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=P==="reverse"?"0":`${n}`,c?t.style.opacity=P==="reverse"?"1":"0":t.style.opacity="",T&&(t.style.stroke=T),h!==null&&(t.style.strokeWidth=`${h}`),w!==null&&(t.style.fillOpacity=`${w}`));}),R){if(r)return e.style.clipPath=W(1),j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=W(0);}else if(r)return j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};$e();function ee(){if(!J||O)return;let t=performance.now(),n=ue(),l=a;if(ie!==false){let i=t-Ee,p=i>0?Math.abs(n-(Z<0?n:Z))/i:0;l=a*Math.max(.2,1+p*(typeof ie=="number"?ie:1)*.04);}Z=n,Ee=t;let m=ne?K===-1||n>=K?"forward":"reverse":P;K=n;let re=M-S,V=true;if(R){let i=ae(z(n,S,M,l));X&&!ne&&(x=Math.max(x,i),i=x),Q=i,e.style.setProperty("--scroll-draw-progress",String(i));let p=m==="reverse"?1-i:i;e.style.clipPath=W(p),ve?.(i),!F&&z(n,S,M,l)>0&&(F=true,xe?.()),i>=1&&!A?(A=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{x=-1,F=false,A=false,e.style.clipPath=W(0);},we))):i<1&&!X&&(A=false),L=requestAnimationFrame(ee);return}if(G.forEach((i,p)=>{let D=p*B*re,f=ae(z(n,S+D,M+D,l));X&&!ne&&(x=Math.max(x,f),f=x),Q=f,i.style.strokeDashoffset=m==="reverse"?`${$[p]*f}`:`${$[p]*(1-f)}`,c&&(i.style.opacity=m==="reverse"?`${1-f}`:`${f}`),T&&g?i.style.stroke=ge(T,g,f):g&&(i.style.stroke=g),h!==null&&b!==null?i.style.strokeWidth=`${h+(b-h)*f}`:b!==null&&(i.style.strokeWidth=`${b}`),w!==null&&v!==null?i.style.fillOpacity=`${w+(v-w)*f}`:v!==null&&(i.style.fillOpacity=`${v}`),I&&i.tagName.toLowerCase()==="path"&&k[p]&&i.setAttribute("d",De(k[p],I,f)),p===0&&(ve?.(f),e.style.setProperty("--scroll-draw-progress",String(f))),f<1&&(V=false);}),oe){let i=ae(z(n,S,M,l));for(let p in oe){let D=parseFloat(p);i>=D&&!Y.has(D)&&(Y.add(D),oe[p]?.());}}!F&&z(n,S,M,l)>0&&(F=true,xe?.()),V&&!A?(A=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{x=-1,F=false,A=false,Y.clear(),Ae();},we))):!V&&!X&&(A=false),L=requestAnimationFrame(ee);}let fe=new IntersectionObserver(t=>{t.forEach(n=>{J=n.isIntersecting,J&&!O?L=requestAnimationFrame(ee):cancelAnimationFrame(L);});},{root:d??null,threshold:Fe,rootMargin:Oe}),pe;function te(){clearTimeout(pe),pe=setTimeout(()=>{G.forEach((t,n)=>{$[n]=ye(t),t.style.strokeDasharray=`${$[n]}`;}),$e();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),be>0?setTimeout(()=>fe.observe(e),be):fe.observe(e),{destroy(){cancelAnimationFrame(L),clearTimeout(U),fe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(pe),ce?.remove();},replay(){x=-1,K=-1,Z=-1,F=false,A=false,q=0,O=false,Y.clear(),clearTimeout(U),Ae();},pause(){O=true,cancelAnimationFrame(L);},resume(){O&&(O=false,J&&(L=requestAnimationFrame(ee)));},seek(t){let n=Math.min(1,Math.max(0,t));Q=n,x=n,O=true,cancelAnimationFrame(L),Re(n,P);},getProgress(){return Q}}}var he=class extends HTMLElement{constructor(){super(...arguments);this.instance=null;}connectedCallback(){let r={},o=this.getAttribute("speed"),a=this.getAttribute("easing"),c=this.getAttribute("stagger"),u=this.getAttribute("direction"),y=this.getAttribute("selector");o&&(r.speed=parseFloat(o)),a&&(r.easing=a),c&&(r.stagger=parseFloat(c)),u&&(r.direction=u),y&&(r.selector=y),this.hasAttribute("fade")&&(r.fade=this.getAttribute("fade")!=="false"),this.instance=Pe(this,r);}disconnectedCallback(){this.instance?.destroy(),this.instance=null;}};typeof customElements<"u"&&!customElements.get("scroll-draw")&&customElements.define("scroll-draw",he);

package/dist/web-component/index.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/web-component/index.d.ts

@@ -0,0 +1,2 @@
+
+export {  }