svg-scroll-draw 1.2.0 → 1.3.0

package/dist/group/index.cjs

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

@@ -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

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

@@ -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/index.d.ts

@@ -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/index.mjs

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

package/dist/nuxt/index.cjs

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

package/dist/nuxt/index.d.mts

@@ -63,6 +63,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