svg-scroll-draw 1.0.0 → 1.2.0

package/dist/vue/index.cjs

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

package/dist/vue/index.d.mts

@@ -1,6 +1,6 @@
 import * as vue from 'vue';
 
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
 interface TriggerConfig {
     start?: string;
     end?: string;
@@ -62,6 +62,20 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Use the browser's native CSS scroll-driven animation
+     * (`animation-timeline: view()`) when the configuration is simple enough and
+     * the browser supports it. This runs the draw entirely on the compositor —
+     * zero per-frame JavaScript, zero scroll/resize listeners.
+     *
+     * Falls back to the JS engine automatically when unsupported or when the
+     * config uses a feature native CSS can't express (callbacks, stagger, morph,
+     * velocity scaling, custom triggers, `once`, custom easing functions, etc.).
+     *
+     * - `undefined` / `true` (default): use native when eligible.
+     * - `false`: always use the JS engine.
+     */
+    native?: boolean;
 }
 
 /** Composable — attach to any container ref. */

package/dist/vue/index.d.ts

@@ -1,6 +1,6 @@
 import * as vue from 'vue';
 
-type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bounce' | 'elastic';
 interface TriggerConfig {
     start?: string;
     end?: string;
@@ -62,6 +62,20 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Use the browser's native CSS scroll-driven animation
+     * (`animation-timeline: view()`) when the configuration is simple enough and
+     * the browser supports it. This runs the draw entirely on the compositor —
+     * zero per-frame JavaScript, zero scroll/resize listeners.
+     *
+     * Falls back to the JS engine automatically when unsupported or when the
+     * config uses a feature native CSS can't express (callbacks, stagger, morph,
+     * velocity scaling, custom triggers, `once`, custom easing functions, etc.).
+     *
+     * - `undefined` / `true` (default): use native when eligible.
+     * - `false`: always use the JS engine.
+     */
+    native?: boolean;
 }
 
 /** Composable — attach to any container ref. */

package/dist/vue/index.mjs

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

package/dist/web-component/index.cjs

@@ -1,3 +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);
+'use strict';function Ue({bounces:e=3,decay:n=.5}={}){let r=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,n)),c=Math.sqrt(o),l=0,f=[];for(let a=0;a<r;a++){let y=Math.pow(c,a);f.push(y),l+=y;}let d=[0],C=0;for(let a=0;a<r;a++)C+=f[a]/l,d.push(C);return a=>{if(a<=0)return 0;if(a>=1)return 1;for(let y=0;y<r;y++)if(a<=d[y+1]){let U=(a-d[y])/(d[y+1]-d[y]);if(y===0)return U*(2-U);let b=1-Math.pow(o,y);return b+(1-b)*(2*U-1)*(2*U-1)}return 1}}function je({amplitude:e=1,period:n=.4}={}){let r=Math.max(1,e),o=Math.max(.1,n),c=r<=1?o/4:o/(2*Math.PI)*Math.asin(1/r);return l=>l<=0?0:l>=1?1:r*Math.pow(2,-10*l)*Math.sin((l-c)*(2*Math.PI)/o)+1}var ve={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:Ue(),elastic:je()};function Ee(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[r="top",o="bottom"]=n.split(/\s+/).filter(Boolean);return {element:r,viewport:o}}function Oe(e,n,r,o){switch(o){case "top":return e+r;case "center":return e+r+n/2;case "bottom":return e+r+n;default:return e+r}}function Fe(e,n){if(/^\d+(\.\d+)?%$/.test(e))return n*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return n/2;case "bottom":return n;default:return n}}function $e(e){let n=e.tagName.toLowerCase();if(n==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(n==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function Je(e,n,r){return Math.min(r,Math.max(n,e))}function X(e,n,r,o){return r===n?0:Je((e-n)/(r-n)*o,0,1)}function xe(e,n,r,o,c){let l=Oe(e.top,e.height,n,o.element)-Fe(o.viewport,r),f=Oe(e.top,e.height,n,c.element)-Fe(c.viewport,r);return {tStart:l,tEnd:f}}function Ne(e){let n=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(n)return [parseInt(n[1]+n[1],16),parseInt(n[2]+n[2],16),parseInt(n[3]+n[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 Se(e,n,r){let o=Ne(e),c=Ne(n);return !o||!c?e:`rgb(${Math.round(o[0]+(c[0]-o[0])*r)},${Math.round(o[1]+(c[1]-o[1])*r)},${Math.round(o[2]+(c[2]-o[2])*r)})`}function Re(e,n){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,n);}var We={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Ke=0;function Qe(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Ye(e){let n=e.getAttribute("stroke"),r=e.getAttribute("fill");!n||n==="none"?Re("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&Re("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ze(e,n,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 c(){let l=r==="x"?window.scrollX:window.scrollY,f=e-l,d=n-l,C=r==="x";o.innerHTML=`
+      <div style="position:absolute;${C?`left:${f}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${f}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;${C?`left:${d}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${d}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",c,{passive:true}),c(),o}function He(e,n,r){let o=(n.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),c=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,l=>{let f=parseFloat(l),d=o[c++]??f;return String(+(f+(d-f)*r).toFixed(4))})}function Ve(e,n={}){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:c=1,fade:l=false,easing:f="linear",trigger:d={},stagger:C=0,direction:a="forward",once:y=false,debug:U=false,axis:b="y",scrollContainer:me,autoReverse:ee=false,delay:pe=0,strokeColor:H,strokeWidth:V,fillOpacity:G,waypoints:te,velocityScale:re=false,threshold:Ge=0,rootMargin:ze="0px",repeat:J=0,repeatDelay:Me=0,morphTo:I,clip:de,native:qe=true,onProgress:ye,onStart:he,onComplete:K}=n,z=de===true?"left":typeof de=="string"?de:false,ne=typeof f=="function"?f:ve[f]??ve.linear,ke=Ee(d.start??"top bottom"),Te=Ee(d.end??"bottom top"),E=typeof me=="string"?document.querySelector(me):me??null,O=Array.isArray(H)?H[0]:null,S=Array.isArray(H)?H[1]:typeof H=="string"?H:null,A=Array.isArray(V)?V[0]:null,M=Array.isArray(V)?V[1]:typeof V=="number"?V:null,k=Array.isArray(G)?G[0]:null,T=Array.isArray(G)?G[1]:typeof G=="number"?G:null;function j(t){let s=t*100;switch(z){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 $=z?[]:Array.from(e.querySelectorAll(o)),w=[],F=[],N=0,R=0,D=false,q=false,W=0,se=false,P=-1,oe=-1,B=false,ie=0,Q=0,ae,ge=null,le=new Set,ue=-1,Pe=performance.now();function Y(){return E?b==="x"?E.scrollLeft:E.scrollTop:b==="x"?window.scrollX:window.scrollY}function Le(){return E?b==="x"?E.clientWidth:E.clientHeight:b==="x"?window.innerWidth:window.innerHeight}function De(){let t=e.getBoundingClientRect(),s,u,g;if(E){let x=E.getBoundingClientRect();s=b==="x"?t.left-x.left+E.scrollLeft:t.top-x.top+E.scrollTop,u=b==="x"?t.width:t.height,g=Y();}else s=b==="x"?t.left:t.top,u=b==="x"?t.width:t.height,g=Y();let _=xe({top:s,height:u},g,Le(),ke,Te);N=_.tStart,R=_.tEnd,U&&process.env.NODE_ENV!=="production"&&(ge?.remove(),ge=Ze(N,R,b));}function Be(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),z){let u=s==="reverse"?1-t:t;e.style.clipPath=j(u);return}$.forEach((u,g)=>{u.style.strokeDashoffset=s==="reverse"?`${w[g]*t}`:`${w[g]*(1-t)}`,l&&(u.style.opacity=s==="reverse"?`${1-t}`:`${t}`),O&&S?u.style.stroke=Se(O,S,t):S&&(u.style.stroke=S),A!==null&&M!==null?u.style.strokeWidth=`${A+(M-A)*t}`:M!==null&&(u.style.strokeWidth=`${M}`),k!==null&&T!==null?u.style.fillOpacity=`${k+(T-k)*t}`:T!==null&&(u.style.fillOpacity=`${T}`),I&&u.tagName.toLowerCase()==="path"&&F[g]&&u.setAttribute("d",He(F[g],I,t));});}function Ce(){if(e.style.setProperty("--scroll-draw-progress","0"),z){e.style.clipPath=j(0);return}$.forEach((t,s)=>{t.style.strokeDasharray=`${w[s]}`,t.style.strokeDashoffset=a==="reverse"?"0":`${w[s]}`,l?t.style.opacity=a==="reverse"?"1":"0":t.style.opacity="",O&&(t.style.stroke=O),A!==null&&(t.style.strokeWidth=`${A}`),k!==null&&(t.style.fillOpacity=`${k}`),I&&t.tagName.toLowerCase()==="path"&&F[s]&&t.setAttribute("d",F[s]);});}if($.forEach(t=>{Ye(t);let s=$e(t);w.push(s),t.tagName.toLowerCase()==="path"?F.push(t.getAttribute("d")??""):F.push(""),r?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=a==="reverse"?`${s}`:"0",l&&(t.style.opacity="1"),S&&(t.style.stroke=S),M!==null&&(t.style.strokeWidth=`${M}`),T!==null&&(t.style.fillOpacity=`${T}`),I&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",I)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=a==="reverse"?"0":`${s}`,l?t.style.opacity=a==="reverse"?"1":"0":t.style.opacity="",O&&(t.style.stroke=O),A!==null&&(t.style.strokeWidth=`${A}`),k!==null&&(t.style.fillOpacity=`${k}`));}),z){if(r)return e.style.clipPath=j(1),K?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=j(0);}else if(r)return K?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function _e(){return !(qe===false||!Qe()||!$.length||typeof f!="string"||!(f in We)||z||b!=="y"||E||c!==1||C!==0||y||ee||re!==false||I||te||J||pe>0||ye||he||K||H!=null||V!=null||G!=null||(d.start??"top bottom").trim()!=="top bottom"||(d.end??"bottom top").trim()!=="bottom top")}function Xe(){let t=`svg-scroll-draw-${++Ke}`,s=a==="reverse"?"0":"var(--ssd-len)",u=a==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${s};`,_=`stroke-dashoffset:${u};`;l&&(g+=`opacity:${a==="reverse"?1:0};`,_+=`opacity:${a==="reverse"?0:1};`);let x=document.createElement("style");x.setAttribute("data-svg-scroll-draw",""),x.textContent=`@keyframes ${t}{from{${g}}to{${_}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${We[f]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(x);function i(p,L){p.style.setProperty("--ssd-len",String(w[L])),p.style.strokeDasharray=`${w[L]}`,p.style.strokeDashoffset="",p.style.opacity="",p.style.animationPlayState="",p.classList.add(t);}$.forEach(i);let m=false,v=-1;function h(){if(v>=0)return v;let p=e.getBoundingClientRect(),{tStart:L,tEnd:Z}=xe({top:p.top,height:p.height},Y(),Le(),ke,Te);return ne(X(Y(),L,Z,c))}return {destroy(){$.forEach(p=>{p.classList.remove(t),p.style.removeProperty("--ssd-len"),p.style.animationPlayState="";}),x.remove();},replay(){m=false,v=-1,$.forEach(i);},pause(){m=true,$.forEach(p=>{p.style.animationPlayState="paused";});},resume(){m&&(m=false,$.forEach(p=>{p.style.animationPlayState="running";}));},seek(p){let L=Math.min(1,Math.max(0,p));v=L,m=true,$.forEach((Z,Ie)=>{Z.classList.remove(t),Z.style.strokeDashoffset=a==="reverse"?`${w[Ie]*L}`:`${w[Ie]*(1-L)}`,l&&(Z.style.opacity=a==="reverse"?`${1-L}`:`${L}`);});},getProgress(){return h()}}}if(_e())return Xe();De();function ce(){if(!se||B)return;let t=performance.now(),s=Y(),u=c;if(re!==false){let i=t-Pe,m=i>0?Math.abs(s-(ue<0?s:ue))/i:0;u=c*Math.max(.2,1+m*(typeof re=="number"?re:1)*.04);}ue=s,Pe=t;let g=ee?oe===-1||s>=oe?"forward":"reverse":a;oe=s;let _=R-N,x=true;if(z){let i=ne(X(s,N,R,u));y&&!ee&&(P=Math.max(P,i),i=P),ie=i,e.style.setProperty("--scroll-draw-progress",String(i));let m=g==="reverse"?1-i:i;e.style.clipPath=j(m),ye?.(i),!q&&X(s,N,R,u)>0&&(q=true,he?.()),i>=1&&!D?(D=true,K?.(),Q<(J==="infinite"?1/0:J??0)&&(Q++,ae=setTimeout(()=>{P=-1,q=false,D=false,e.style.clipPath=j(0);},Me))):i<1&&!y&&(D=false),W=requestAnimationFrame(ce);return}if($.forEach((i,m)=>{let v=m*C*_,h=ne(X(s,N+v,R+v,u));y&&!ee&&(P=Math.max(P,h),h=P),ie=h,i.style.strokeDashoffset=g==="reverse"?`${w[m]*h}`:`${w[m]*(1-h)}`,l&&(i.style.opacity=g==="reverse"?`${1-h}`:`${h}`),O&&S?i.style.stroke=Se(O,S,h):S&&(i.style.stroke=S),A!==null&&M!==null?i.style.strokeWidth=`${A+(M-A)*h}`:M!==null&&(i.style.strokeWidth=`${M}`),k!==null&&T!==null?i.style.fillOpacity=`${k+(T-k)*h}`:T!==null&&(i.style.fillOpacity=`${T}`),I&&i.tagName.toLowerCase()==="path"&&F[m]&&i.setAttribute("d",He(F[m],I,h)),m===0&&(ye?.(h),e.style.setProperty("--scroll-draw-progress",String(h))),h<1&&(x=false);}),te){let i=ne(X(s,N,R,u));for(let m in te){let v=parseFloat(m);i>=v&&!le.has(v)&&(le.add(v),te[m]?.());}}!q&&X(s,N,R,u)>0&&(q=true,he?.()),x&&!D?(D=true,K?.(),Q<(J==="infinite"?1/0:J??0)&&(Q++,ae=setTimeout(()=>{P=-1,q=false,D=false,le.clear(),Ce();},Me))):!x&&!y&&(D=false),W=requestAnimationFrame(ce);}let be=new IntersectionObserver(t=>{t.forEach(s=>{se=s.isIntersecting,se&&!B?W=requestAnimationFrame(ce):cancelAnimationFrame(W);});},{root:E??null,threshold:Ge,rootMargin:ze}),we;function fe(){clearTimeout(we),we=setTimeout(()=>{$.forEach((t,s)=>{w[s]=$e(t),t.style.strokeDasharray=`${w[s]}`;}),De();},150);}return window.addEventListener("resize",fe),window.addEventListener("orientationchange",fe),pe>0?setTimeout(()=>be.observe(e),pe):be.observe(e),{destroy(){cancelAnimationFrame(W),clearTimeout(ae),be.disconnect(),window.removeEventListener("resize",fe),window.removeEventListener("orientationchange",fe),clearTimeout(we),ge?.remove();},replay(){P=-1,oe=-1,ue=-1,q=false,D=false,Q=0,B=false,le.clear(),clearTimeout(ae),Ce();},pause(){B=true,cancelAnimationFrame(W);},resume(){B&&(B=false,se&&(W=requestAnimationFrame(ce)));},seek(t){let s=Math.min(1,Math.max(0,t));ie=s,P=s,B=true,cancelAnimationFrame(W),Be(s,a);},getProgress(){return ie}}}var Ae=class extends HTMLElement{constructor(){super(...arguments);this.instance=null;}connectedCallback(){let r={},o=this.getAttribute("speed"),c=this.getAttribute("easing"),l=this.getAttribute("stagger"),f=this.getAttribute("direction"),d=this.getAttribute("selector");o&&(r.speed=parseFloat(o)),c&&(r.easing=c),l&&(r.stagger=parseFloat(l)),f&&(r.direction=f),d&&(r.selector=d),this.hasAttribute("fade")&&(r.fade=this.getAttribute("fade")!=="false"),this.instance=Ve(this,r);}disconnectedCallback(){this.instance?.destroy(),this.instance=null;}};typeof customElements<"u"&&!customElements.get("scroll-draw")&&customElements.define("scroll-draw",Ae);

package/dist/web-component/index.mjs

@@ -1,3 +1,3 @@
-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);
+function Ue({bounces:e=3,decay:n=.5}={}){let r=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,n)),c=Math.sqrt(o),l=0,f=[];for(let a=0;a<r;a++){let y=Math.pow(c,a);f.push(y),l+=y;}let d=[0],C=0;for(let a=0;a<r;a++)C+=f[a]/l,d.push(C);return a=>{if(a<=0)return 0;if(a>=1)return 1;for(let y=0;y<r;y++)if(a<=d[y+1]){let U=(a-d[y])/(d[y+1]-d[y]);if(y===0)return U*(2-U);let b=1-Math.pow(o,y);return b+(1-b)*(2*U-1)*(2*U-1)}return 1}}function je({amplitude:e=1,period:n=.4}={}){let r=Math.max(1,e),o=Math.max(.1,n),c=r<=1?o/4:o/(2*Math.PI)*Math.asin(1/r);return l=>l<=0?0:l>=1?1:r*Math.pow(2,-10*l)*Math.sin((l-c)*(2*Math.PI)/o)+1}var ve={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:Ue(),elastic:je()};function Ee(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[r="top",o="bottom"]=n.split(/\s+/).filter(Boolean);return {element:r,viewport:o}}function Oe(e,n,r,o){switch(o){case "top":return e+r;case "center":return e+r+n/2;case "bottom":return e+r+n;default:return e+r}}function Fe(e,n){if(/^\d+(\.\d+)?%$/.test(e))return n*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return n/2;case "bottom":return n;default:return n}}function $e(e){let n=e.tagName.toLowerCase();if(n==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(r+o)}if(n==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function Je(e,n,r){return Math.min(r,Math.max(n,e))}function X(e,n,r,o){return r===n?0:Je((e-n)/(r-n)*o,0,1)}function xe(e,n,r,o,c){let l=Oe(e.top,e.height,n,o.element)-Fe(o.viewport,r),f=Oe(e.top,e.height,n,c.element)-Fe(c.viewport,r);return {tStart:l,tEnd:f}}function Ne(e){let n=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(n)return [parseInt(n[1]+n[1],16),parseInt(n[2]+n[2],16),parseInt(n[3]+n[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 Se(e,n,r){let o=Ne(e),c=Ne(n);return !o||!c?e:`rgb(${Math.round(o[0]+(c[0]-o[0])*r)},${Math.round(o[1]+(c[1]-o[1])*r)},${Math.round(o[2]+(c[2]-o[2])*r)})`}function Re(e,n){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,n);}var We={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Ke=0;function Qe(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Ye(e){let n=e.getAttribute("stroke"),r=e.getAttribute("fill");!n||n==="none"?Re("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&Re("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ze(e,n,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 c(){let l=r==="x"?window.scrollX:window.scrollY,f=e-l,d=n-l,C=r==="x";o.innerHTML=`
+      <div style="position:absolute;${C?`left:${f}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${f}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;${C?`left:${d}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${d}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",c,{passive:true}),c(),o}function He(e,n,r){let o=(n.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),c=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,l=>{let f=parseFloat(l),d=o[c++]??f;return String(+(f+(d-f)*r).toFixed(4))})}function Ve(e,n={}){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:c=1,fade:l=false,easing:f="linear",trigger:d={},stagger:C=0,direction:a="forward",once:y=false,debug:U=false,axis:b="y",scrollContainer:me,autoReverse:ee=false,delay:pe=0,strokeColor:H,strokeWidth:V,fillOpacity:G,waypoints:te,velocityScale:re=false,threshold:Ge=0,rootMargin:ze="0px",repeat:J=0,repeatDelay:Me=0,morphTo:I,clip:de,native:qe=true,onProgress:ye,onStart:he,onComplete:K}=n,z=de===true?"left":typeof de=="string"?de:false,ne=typeof f=="function"?f:ve[f]??ve.linear,ke=Ee(d.start??"top bottom"),Te=Ee(d.end??"bottom top"),E=typeof me=="string"?document.querySelector(me):me??null,O=Array.isArray(H)?H[0]:null,S=Array.isArray(H)?H[1]:typeof H=="string"?H:null,A=Array.isArray(V)?V[0]:null,M=Array.isArray(V)?V[1]:typeof V=="number"?V:null,k=Array.isArray(G)?G[0]:null,T=Array.isArray(G)?G[1]:typeof G=="number"?G:null;function j(t){let s=t*100;switch(z){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 $=z?[]:Array.from(e.querySelectorAll(o)),w=[],F=[],N=0,R=0,D=false,q=false,W=0,se=false,P=-1,oe=-1,B=false,ie=0,Q=0,ae,ge=null,le=new Set,ue=-1,Pe=performance.now();function Y(){return E?b==="x"?E.scrollLeft:E.scrollTop:b==="x"?window.scrollX:window.scrollY}function Le(){return E?b==="x"?E.clientWidth:E.clientHeight:b==="x"?window.innerWidth:window.innerHeight}function De(){let t=e.getBoundingClientRect(),s,u,g;if(E){let x=E.getBoundingClientRect();s=b==="x"?t.left-x.left+E.scrollLeft:t.top-x.top+E.scrollTop,u=b==="x"?t.width:t.height,g=Y();}else s=b==="x"?t.left:t.top,u=b==="x"?t.width:t.height,g=Y();let _=xe({top:s,height:u},g,Le(),ke,Te);N=_.tStart,R=_.tEnd,U&&process.env.NODE_ENV!=="production"&&(ge?.remove(),ge=Ze(N,R,b));}function Be(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),z){let u=s==="reverse"?1-t:t;e.style.clipPath=j(u);return}$.forEach((u,g)=>{u.style.strokeDashoffset=s==="reverse"?`${w[g]*t}`:`${w[g]*(1-t)}`,l&&(u.style.opacity=s==="reverse"?`${1-t}`:`${t}`),O&&S?u.style.stroke=Se(O,S,t):S&&(u.style.stroke=S),A!==null&&M!==null?u.style.strokeWidth=`${A+(M-A)*t}`:M!==null&&(u.style.strokeWidth=`${M}`),k!==null&&T!==null?u.style.fillOpacity=`${k+(T-k)*t}`:T!==null&&(u.style.fillOpacity=`${T}`),I&&u.tagName.toLowerCase()==="path"&&F[g]&&u.setAttribute("d",He(F[g],I,t));});}function Ce(){if(e.style.setProperty("--scroll-draw-progress","0"),z){e.style.clipPath=j(0);return}$.forEach((t,s)=>{t.style.strokeDasharray=`${w[s]}`,t.style.strokeDashoffset=a==="reverse"?"0":`${w[s]}`,l?t.style.opacity=a==="reverse"?"1":"0":t.style.opacity="",O&&(t.style.stroke=O),A!==null&&(t.style.strokeWidth=`${A}`),k!==null&&(t.style.fillOpacity=`${k}`),I&&t.tagName.toLowerCase()==="path"&&F[s]&&t.setAttribute("d",F[s]);});}if($.forEach(t=>{Ye(t);let s=$e(t);w.push(s),t.tagName.toLowerCase()==="path"?F.push(t.getAttribute("d")??""):F.push(""),r?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=a==="reverse"?`${s}`:"0",l&&(t.style.opacity="1"),S&&(t.style.stroke=S),M!==null&&(t.style.strokeWidth=`${M}`),T!==null&&(t.style.fillOpacity=`${T}`),I&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",I)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=a==="reverse"?"0":`${s}`,l?t.style.opacity=a==="reverse"?"1":"0":t.style.opacity="",O&&(t.style.stroke=O),A!==null&&(t.style.strokeWidth=`${A}`),k!==null&&(t.style.fillOpacity=`${k}`));}),z){if(r)return e.style.clipPath=j(1),K?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=j(0);}else if(r)return K?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function _e(){return !(qe===false||!Qe()||!$.length||typeof f!="string"||!(f in We)||z||b!=="y"||E||c!==1||C!==0||y||ee||re!==false||I||te||J||pe>0||ye||he||K||H!=null||V!=null||G!=null||(d.start??"top bottom").trim()!=="top bottom"||(d.end??"bottom top").trim()!=="bottom top")}function Xe(){let t=`svg-scroll-draw-${++Ke}`,s=a==="reverse"?"0":"var(--ssd-len)",u=a==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${s};`,_=`stroke-dashoffset:${u};`;l&&(g+=`opacity:${a==="reverse"?1:0};`,_+=`opacity:${a==="reverse"?0:1};`);let x=document.createElement("style");x.setAttribute("data-svg-scroll-draw",""),x.textContent=`@keyframes ${t}{from{${g}}to{${_}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${We[f]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(x);function i(p,L){p.style.setProperty("--ssd-len",String(w[L])),p.style.strokeDasharray=`${w[L]}`,p.style.strokeDashoffset="",p.style.opacity="",p.style.animationPlayState="",p.classList.add(t);}$.forEach(i);let m=false,v=-1;function h(){if(v>=0)return v;let p=e.getBoundingClientRect(),{tStart:L,tEnd:Z}=xe({top:p.top,height:p.height},Y(),Le(),ke,Te);return ne(X(Y(),L,Z,c))}return {destroy(){$.forEach(p=>{p.classList.remove(t),p.style.removeProperty("--ssd-len"),p.style.animationPlayState="";}),x.remove();},replay(){m=false,v=-1,$.forEach(i);},pause(){m=true,$.forEach(p=>{p.style.animationPlayState="paused";});},resume(){m&&(m=false,$.forEach(p=>{p.style.animationPlayState="running";}));},seek(p){let L=Math.min(1,Math.max(0,p));v=L,m=true,$.forEach((Z,Ie)=>{Z.classList.remove(t),Z.style.strokeDashoffset=a==="reverse"?`${w[Ie]*L}`:`${w[Ie]*(1-L)}`,l&&(Z.style.opacity=a==="reverse"?`${1-L}`:`${L}`);});},getProgress(){return h()}}}if(_e())return Xe();De();function ce(){if(!se||B)return;let t=performance.now(),s=Y(),u=c;if(re!==false){let i=t-Pe,m=i>0?Math.abs(s-(ue<0?s:ue))/i:0;u=c*Math.max(.2,1+m*(typeof re=="number"?re:1)*.04);}ue=s,Pe=t;let g=ee?oe===-1||s>=oe?"forward":"reverse":a;oe=s;let _=R-N,x=true;if(z){let i=ne(X(s,N,R,u));y&&!ee&&(P=Math.max(P,i),i=P),ie=i,e.style.setProperty("--scroll-draw-progress",String(i));let m=g==="reverse"?1-i:i;e.style.clipPath=j(m),ye?.(i),!q&&X(s,N,R,u)>0&&(q=true,he?.()),i>=1&&!D?(D=true,K?.(),Q<(J==="infinite"?1/0:J??0)&&(Q++,ae=setTimeout(()=>{P=-1,q=false,D=false,e.style.clipPath=j(0);},Me))):i<1&&!y&&(D=false),W=requestAnimationFrame(ce);return}if($.forEach((i,m)=>{let v=m*C*_,h=ne(X(s,N+v,R+v,u));y&&!ee&&(P=Math.max(P,h),h=P),ie=h,i.style.strokeDashoffset=g==="reverse"?`${w[m]*h}`:`${w[m]*(1-h)}`,l&&(i.style.opacity=g==="reverse"?`${1-h}`:`${h}`),O&&S?i.style.stroke=Se(O,S,h):S&&(i.style.stroke=S),A!==null&&M!==null?i.style.strokeWidth=`${A+(M-A)*h}`:M!==null&&(i.style.strokeWidth=`${M}`),k!==null&&T!==null?i.style.fillOpacity=`${k+(T-k)*h}`:T!==null&&(i.style.fillOpacity=`${T}`),I&&i.tagName.toLowerCase()==="path"&&F[m]&&i.setAttribute("d",He(F[m],I,h)),m===0&&(ye?.(h),e.style.setProperty("--scroll-draw-progress",String(h))),h<1&&(x=false);}),te){let i=ne(X(s,N,R,u));for(let m in te){let v=parseFloat(m);i>=v&&!le.has(v)&&(le.add(v),te[m]?.());}}!q&&X(s,N,R,u)>0&&(q=true,he?.()),x&&!D?(D=true,K?.(),Q<(J==="infinite"?1/0:J??0)&&(Q++,ae=setTimeout(()=>{P=-1,q=false,D=false,le.clear(),Ce();},Me))):!x&&!y&&(D=false),W=requestAnimationFrame(ce);}let be=new IntersectionObserver(t=>{t.forEach(s=>{se=s.isIntersecting,se&&!B?W=requestAnimationFrame(ce):cancelAnimationFrame(W);});},{root:E??null,threshold:Ge,rootMargin:ze}),we;function fe(){clearTimeout(we),we=setTimeout(()=>{$.forEach((t,s)=>{w[s]=$e(t),t.style.strokeDasharray=`${w[s]}`;}),De();},150);}return window.addEventListener("resize",fe),window.addEventListener("orientationchange",fe),pe>0?setTimeout(()=>be.observe(e),pe):be.observe(e),{destroy(){cancelAnimationFrame(W),clearTimeout(ae),be.disconnect(),window.removeEventListener("resize",fe),window.removeEventListener("orientationchange",fe),clearTimeout(we),ge?.remove();},replay(){P=-1,oe=-1,ue=-1,q=false,D=false,Q=0,B=false,le.clear(),clearTimeout(ae),Ce();},pause(){B=true,cancelAnimationFrame(W);},resume(){B&&(B=false,se&&(W=requestAnimationFrame(ce)));},seek(t){let s=Math.min(1,Math.max(0,t));ie=s,P=s,B=true,cancelAnimationFrame(W),Be(s,a);},getProgress(){return ie}}}var Ae=class extends HTMLElement{constructor(){super(...arguments);this.instance=null;}connectedCallback(){let r={},o=this.getAttribute("speed"),c=this.getAttribute("easing"),l=this.getAttribute("stagger"),f=this.getAttribute("direction"),d=this.getAttribute("selector");o&&(r.speed=parseFloat(o)),c&&(r.easing=c),l&&(r.stagger=parseFloat(l)),f&&(r.direction=f),d&&(r.selector=d),this.hasAttribute("fade")&&(r.fade=this.getAttribute("fade")!=="false"),this.instance=Ve(this,r);}disconnectedCallback(){this.instance?.destroy(),this.instance=null;}};typeof customElements<"u"&&!customElements.get("scroll-draw")&&customElements.define("scroll-draw",Ae);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svg-scroll-draw",
-  "version": "1.0.0",
-  "description": "Scroll-driven SVG path drawing animation library — zero dependencies, ~3 KB gzipped, works with React, Vue, and vanilla JS",
+  "version": "1.2.0",
+  "description": "Scroll-driven SVG path drawing animation library — zero dependencies, ~4.4 KB gzipped, works with React, Vue, and vanilla JS",
   "keywords": [
     "svg",
     "scroll",
@@ -35,7 +35,11 @@
     "path-morphing",
     "svg-morph",
     "sequence",
-    "group"
+    "group",
+    "bounce-easing",
+    "elastic-easing",
+    "spring-easing",
+    "physics-easing"
   ],
   "homepage": "https://svg-scroll-draw.vercel.app",
   "repository": {