svg-scroll-draw 1.1.0 → 1.3.0

package/dist/group/index.cjs

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

package/dist/group/index.d.mts

@@ -1,4 +1,4 @@
-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;
@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Trigger the animation when the element enters the viewport instead of
+     * tying it to scroll position. The draw runs over `duration` milliseconds,
+     * replaying each time the element re-enters the viewport (use `once: true`
+     * to play only the first time).
+     *
+     * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
+     * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
+     * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
+     *
+     * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
+     * also works — `seek(0.5)` pauses at 50% of the duration.
+     */
+    autoplay?: boolean;
+    /**
+     * Duration of the autoplay animation in milliseconds. Only used when
+     * `autoplay: true`. Default `1000`.
+     */
+    duration?: number;
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and

package/dist/group/index.d.ts

@@ -1,4 +1,4 @@
-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;
@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Trigger the animation when the element enters the viewport instead of
+     * tying it to scroll position. The draw runs over `duration` milliseconds,
+     * replaying each time the element re-enters the viewport (use `once: true`
+     * to play only the first time).
+     *
+     * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
+     * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
+     * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
+     *
+     * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
+     * also works — `seek(0.5)` pauses at 50% of the duration.
+     */
+    autoplay?: boolean;
+    /**
+     * Duration of the autoplay animation in milliseconds. Only used when
+     * `autoplay: true`. Default `1000`.
+     */
+    duration?: number;
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and

package/dist/group/index.mjs

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

package/dist/index.cjs

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

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-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;
@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Trigger the animation when the element enters the viewport instead of
+     * tying it to scroll position. The draw runs over `duration` milliseconds,
+     * replaying each time the element re-enters the viewport (use `once: true`
+     * to play only the first time).
+     *
+     * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
+     * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
+     * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
+     *
+     * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
+     * also works — `seek(0.5)` pauses at 50% of the duration.
+     */
+    autoplay?: boolean;
+    /**
+     * Duration of the autoplay animation in milliseconds. Only used when
+     * `autoplay: true`. Default `1000`.
+     */
+    duration?: number;
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
@@ -101,7 +120,36 @@ declare function createSpring({ tension, friction, }?: {
     tension?: number;
     friction?: number;
 }): (t: number) => number;
+/**
+ * Returns a bounce-out easing function.
+ * The animation rises to 1 and then makes `bounces` dips below 1 that settle.
+ * - `bounces` — number of bounces after the initial approach (default 3)
+ * - `decay`   — amplitude reduction per bounce (0–1, default 0.5)
+ *
+ * @example
+ * scrollDraw('#svg', { easing: createBounce() });
+ * scrollDraw('#svg', { easing: createBounce({ bounces: 5, decay: 0.4 }) });
+ */
+declare function createBounce({ bounces, decay, }?: {
+    bounces?: number;
+    decay?: number;
+}): (t: number) => number;
+/**
+ * Returns an elastic-out easing function.
+ * The animation overshoots past 1 and oscillates back, settling at 1.
+ * Can produce values outside [0, 1] — the overshoot is the effect.
+ * - `amplitude` — overshoot magnitude (>=1, default 1 → overshoots to ~1.25)
+ * - `period`    — oscillation period in [0, 1] time (default 0.4)
+ *
+ * @example
+ * scrollDraw('#svg', { easing: createElastic() });
+ * scrollDraw('#svg', { easing: createElastic({ amplitude: 1.5, period: 0.3 }) });
+ */
+declare function createElastic({ amplitude, period, }?: {
+    amplitude?: number;
+    period?: number;
+}): (t: number) => number;
 
 declare function scrollDraw(target: string | Element, options?: ScrollDrawOptions): ScrollDrawInstance;
 
-export { type ScrollDrawInstance, type ScrollDrawOptions, createSpring, scrollDraw };
+export { type ScrollDrawInstance, type ScrollDrawOptions, createBounce, createElastic, createSpring, scrollDraw };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-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;
@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Trigger the animation when the element enters the viewport instead of
+     * tying it to scroll position. The draw runs over `duration` milliseconds,
+     * replaying each time the element re-enters the viewport (use `once: true`
+     * to play only the first time).
+     *
+     * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
+     * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
+     * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
+     *
+     * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
+     * also works — `seek(0.5)` pauses at 50% of the duration.
+     */
+    autoplay?: boolean;
+    /**
+     * Duration of the autoplay animation in milliseconds. Only used when
+     * `autoplay: true`. Default `1000`.
+     */
+    duration?: number;
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and
@@ -101,7 +120,36 @@ declare function createSpring({ tension, friction, }?: {
     tension?: number;
     friction?: number;
 }): (t: number) => number;
+/**
+ * Returns a bounce-out easing function.
+ * The animation rises to 1 and then makes `bounces` dips below 1 that settle.
+ * - `bounces` — number of bounces after the initial approach (default 3)
+ * - `decay`   — amplitude reduction per bounce (0–1, default 0.5)
+ *
+ * @example
+ * scrollDraw('#svg', { easing: createBounce() });
+ * scrollDraw('#svg', { easing: createBounce({ bounces: 5, decay: 0.4 }) });
+ */
+declare function createBounce({ bounces, decay, }?: {
+    bounces?: number;
+    decay?: number;
+}): (t: number) => number;
+/**
+ * Returns an elastic-out easing function.
+ * The animation overshoots past 1 and oscillates back, settling at 1.
+ * Can produce values outside [0, 1] — the overshoot is the effect.
+ * - `amplitude` — overshoot magnitude (>=1, default 1 → overshoots to ~1.25)
+ * - `period`    — oscillation period in [0, 1] time (default 0.4)
+ *
+ * @example
+ * scrollDraw('#svg', { easing: createElastic() });
+ * scrollDraw('#svg', { easing: createElastic({ amplitude: 1.5, period: 0.3 }) });
+ */
+declare function createElastic({ amplitude, period, }?: {
+    amplitude?: number;
+    period?: number;
+}): (t: number) => number;
 
 declare function scrollDraw(target: string | Element, options?: ScrollDrawOptions): ScrollDrawInstance;
 
-export { type ScrollDrawInstance, type ScrollDrawOptions, createSpring, scrollDraw };
+export { type ScrollDrawInstance, type ScrollDrawOptions, createBounce, createElastic, createSpring, scrollDraw };

package/dist/index.mjs

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